Implementing the expandable cell in iOS UITableView
Tags: ios
Published: 2018-08-21 00:40:31

---
title: Implementing the expandable cell in iOS UITableView
published: true
tags: iOS
canonical_url: https://law.gmnz.xyz/2018/07/23/implementing-the-expandable.html
---

I’m going to implement below on how to create the expandable UITableView cell for example on iOS stock calendar.

![1-K0Xsn4n9Lx2lqpUDNO-xXA](https://lawgimenez.me/content/images/2018/07/1-K0Xsn4n9Lx2lqpUDNO-xXA.gif)

From scratch, create a new project on Xcode. In your **main.storyboard** remove the default ViewController (delete also the extra unused **ViewController.swift** file in the project explorer) and drag a new TableViewController.

![1-ti0Kq9gWuhSdxOPXvRjDDw](https://lawgimenez.me/content/images/2018/07/1-ti0Kq9gWuhSdxOPXvRjDDw.png)

Now that we have our TableViewController set on the storyboard. Let’s create a new Swift file, and call it for example **FormTableViewController.swift**. And set is as the custom class in your TableViewController.

![1-XPDBMIMfwL7hBdvehkUnjQ](https://lawgimenez.me/content/images/2018/07/1-XPDBMIMfwL7hBdvehkUnjQ.png)

![1-366I_Aw3939Z5uXtdVX0fg](https://lawgimenez.me/content/images/2018/07/1-366I_Aw3939Z5uXtdVX0fg.png)

Now we are all set. We are gonna change the TableView’s Content from Dynamic Prototypes to Static Cells.

After setting it to Static Cells, your TableView will have a default of 3 static cells created.

For this demo it won’t matter how many cells we are going to use.

The secret to this is the proper measurement of a cell. Click on the first cell and change the row height to 250. Our plan is, inside the cell we will have 2 views. The Label which has a height of 50 and DatePicker with a height of 200. A total of 250. On the storyboard, drag a Label and DatePicker on the first cell, setup its constraints and embed our TableViewController with a NavigationController, it should look like the image below.

![1-VOvLjMRH2f8Gyu7LmfFvYA](https://lawgimenez.me/content/images/2018/07/1-VOvLjMRH2f8Gyu7LmfFvYA.png)

Now let’s start coding. Inside your FormTableViewController you need to override two functions, namely TableView’s didSelectRowAt and heightForRowAt.

```
import UIKit

class FormTableViewController: UITableViewController {
    
    private var dateCellExpanded: Bool = false
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // For removing the extra empty spaces of TableView below
        tableView.tableFooterView = UIView()
    }
    
    override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        if indexPath.row == 0 {
            if dateCellExpanded {
                dateCellExpanded = false
            } else {
                dateCellExpanded = true
            }
            tableView.beginUpdates()
            tableView.endUpdates()
        }
    }
    
    override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        if indexPath.row == 0 {
            if dateCellExpanded {
                return 250
            } else {
                return 50
            }
        }
        return 50
    }
}

```

I’m going to explain shortly about the code. The variable dateCellExpanded is a flag to determine if the current cell selected has been expanded or not. Then, after always call _tableView.beginUpdates()_ and _tableView.endUpdates()_ and it will trigger the delegate function of TableView heightForRowAt to determine what height value should we return or not. Yep, it is that simple. Click RUN!

![1-_TMKiaY6yEn4iGw2w_vdvQ](https://lawgimenez.me/content/images/2018/07/1-_TMKiaY6yEn4iGw2w_vdvQ.gif)

Hopefully this demo should give you an idea on how to implement it on your app.

The example project can be found at [https://github.com/lawgimenez/expandable-cell-test](https://github.com/lawgimenez/expandable-cell-test)