Dissecting the iOS UITableView

Nowadays, most mobile apps fetch data from backend services, ranging from small information to large files or never-ending scrolling data. Despite the introduction of SwiftUI, UIKit is still widely used. To handle dynamic data display, Apple provides UITableView APIs since iOS version 2.0. In this article, I will cover the fundamental concepts of UITableView and its important APIs.

What is UITableView?

From the apple documentation — Table views in iOS display rows of vertically scrolling content in a single column. Each row in the table contains one piece of your app’s content. For example, the Contacts app displays the name of each contact in a separate row, and the main page of the Settings app displays the available groups of settings. You can configure a table to display a single long list of rows, or you can group related rows into sections to make navigating the content easier.

In simple words, a table view presents data in rows, following a predefined prototyped UI, and allows vertical scrolling exclusively.

Parts of TableView

1. Table View Header: The view that is displayed above the table’s content. This view is always attached to the top of the table view. Developer often get confused with tableview header with section header. They are different.
2. Table View Footer: The view that is displayed below the table’s content. This view is always attached to the bottom of the table view. It differs from the table view’s section footer. Developer often get confused with tableview footer with section footer. They are different.
3. Table View Rows (Cells): This is the main part of the table view where the table’s content is displayed. Developers can create multiple cells to display different kinds of prototype UI. Each cell must have a unique reuse identifier, which can be used to reuse the cell when the user scrolls, rather than creating a new cell. You can read more about reuseIdentifier here.
4. Table Sections: The table view can be divided into multiple sections. Each section can have a different number of rows. By default, the table view has only one section.
5. Table Section Header: Each section can have a header, which can be reused in different sections, similar to table view cells.
6. Table Section Footer: Each section can have a footer, which can also be reused in different sections, similar to table view cells.
7. IndexPath: IndexPath is a data structure that can be constructed with row and section values. It is used to configure rows, section headers, and section footers of the table view. IndexPath is also used for retrieving the configured cell, header, or footer. By default, the IndexPath row and section starts from 0.

Let’s write a simple diagram that combines all the different parts of UITableView into one.

To understand how data can be displayed in a table view, UITableView provides datasource and delegate methods. These methods allow you to display any complex UI. I will cover only the important methods that can be used to configure different parts of the table view as explained above.

Configure tableview header and footer

let tableView = UITableView()
tableView.tableHeaderView = // tableheader
tableView.tableFooterView = // tablefooter

UITableViewDataSource Methods

var blogPosts = [BlogPost]()

extension ViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        // You can configure table rows here.
        let blogPost = blogPosts[indexPath.row]
        let cell = tableView.dequeueReusableCell(withIdentifier: identifier, for: indexPath)
        var content = cell.defaultContentConfiguration()
        content.text = blogPost.title
        content.secondaryText = blogPost.body
        cell.contentConfiguration = content
        return cell
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // you can return number of rows based on section
        if section == 0 {
            return 10
        } else {
            return 1
        }
    }
    
    func numberOfSections(in tableView: UITableView) -> Int {
        // you can return number of sections
        return 2
    }
}

UITableViewDelegate Methods

extension ViewController: UITableViewDelegate {
    func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        guard section == 0 else {
            return nil
        }
        return tableView.dequeueReusableHeaderFooterView(withIdentifier: identifier)
    }
    
    func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
        return UIView()
    }
}

I encourage you to explore other UITableView datasource and delegate methods as well. I hope this helps you understand the UITableView better.

Thank you!