Swift Table Views

Introduction

Table views are among the most fundamental UI components in iOS development. If you've ever scrolled through a list of emails, contacts, or settings on an iOS device, you've interacted with a table view. In iOS, the UITableView class provides a powerful and flexible way to display lists of data in a single column with rows that can be scrolled vertically.

In this guide, we'll explore how to implement table views in Swift, customize their appearance, handle user interactions, and optimize performance. By the end, you'll have a solid understanding of how to use table views to present data efficiently in your iOS applications.

Understanding Table Views Basics

At its core, a UITableView displays a list of items organized in rows, potentially grouped into sections. It works through a delegation pattern, where you provide:

Data Source: Tells the table view what to display
Delegate: Handles user interactions and customizes appearance

Key Components of Table Views:

Cells: Individual rows in the table (instances of UITableViewCell)
Sections: Groups of related rows
Headers/Footers: Optional views at the beginning/end of sections
Index: Optional side index (like in the Contacts app)

Creating Your First Table View

Let's start with a basic table view that displays a list of fruits:

swift
import UIKit

class FruitTableViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
    
    // Our data source - a simple array of fruits
    let fruits = ["Apple", "Banana", "Orange", "Mango", "Strawberry", "Pineapple"]
    
    // Reference to our table view
    @IBOutlet weak var tableView: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Set this view controller as the data source and delegate
        tableView.dataSource = self
        tableView.delegate = self
    }
    
    // MARK: - UITableViewDataSource methods
    
    // How many rows to display
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return fruits.count
    }
    
    // What to display in each cell
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "FruitCell", for: indexPath)
        
        // Configure the cell with the fruit name
        cell.textLabel?.text = fruits[indexPath.row]
        
        return cell
    }
    
    // MARK: - UITableViewDelegate methods
    
    // Handle row selection
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        print("Selected: \(fruits[indexPath.row])")
        tableView.deselectRow(at: indexPath, animated: true)
    }
}

This basic example shows the minimum implementation needed to get a table view working. Let's break down what's happening:

We adopt two protocols: UITableViewDataSource (for providing data) and UITableViewDelegate (for handling interactions)
We implement numberOfRowsInSection to tell the table view how many rows to display
We implement cellForRowAt to configure each cell with content
We implement didSelectRowAt to handle when a user taps on a row

Registering and Reusing Cells

Table views use a cell reuse mechanism to optimize memory usage. Instead of creating a new cell for every row, they recycle cells that are no longer visible.

Using the Storyboard:

Drag a Table View Controller into your storyboard
Configure the prototype cell and give it an identifier (e.g., "FruitCell")

Programmatic Registration:

swift
override func viewDidLoad() {
    super.viewDidLoad()
    
    tableView.dataSource = self
    tableView.delegate = self
    
    // Register a cell class
    tableView.register(UITableViewCell.self, forCellReuseIdentifier: "FruitCell")
}

Custom Table View Cells

For more complex cell designs, you'll want to create custom cell classes:

First, create a Swift class for your custom cell:

swift
class FruitTableViewCell: UITableViewCell {
    @IBOutlet weak var fruitNameLabel: UILabel!
    @IBOutlet weak var fruitImageView: UIImageView!
    @IBOutlet weak var caloriesLabel: UILabel!
    
    func configure(with fruit: Fruit) {
        fruitNameLabel.text = fruit.name
        fruitImageView.image = UIImage(named: fruit.imageName)
        caloriesLabel.text = "\(fruit.calories) calories"
    }
    
    override func prepareForReuse() {
        super.prepareForReuse()
        // Reset any properties that might cause issues when the cell is reused
        fruitImageView.image = nil
    }
}

Update your table view's cellForRowAt method:

swift
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "FruitCell", for: indexPath) as! FruitTableViewCell
    
    let fruit = fruits[indexPath.row]
    cell.configure(with: fruit)
    
    return cell
}

Adding Sections to Your Table View

Tables can be organized into logical sections. Let's modify our example to group fruits by their first letter:

swift
class FruitTableViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
    
    // Our data source - fruits grouped by first letter
    var fruitsByLetter: [String: [String]] = [:]
    var sectionTitles: [String] = []
    
    let allFruits = ["Apple", "Apricot", "Banana", "Blueberry", "Cherry", 
                     "Dragon Fruit", "Grapefruit", "Kiwi", "Mango", 
                     "Orange", "Peach", "Pear", "Strawberry"]
    
    @IBOutlet weak var tableView: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.dataSource = self
        tableView.delegate = self
        
        // Group fruits by first letter
        for fruit in allFruits {
            let firstLetter = String(fruit.prefix(1))
            if fruitsByLetter[firstLetter] == nil {
                fruitsByLetter[firstLetter] = []
            }
            fruitsByLetter[firstLetter]?.append(fruit)
        }
        
        // Get section titles and sort them
        sectionTitles = Array(fruitsByLetter.keys).sorted()
    }
    
    // MARK: - Table view data source
    
    func numberOfSections(in tableView: UITableView) -> Int {
        return sectionTitles.count
    }
    
    func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
        return sectionTitles[section]
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        let key = sectionTitles[section]
        return fruitsByLetter[key]?.count ?? 0
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "FruitCell", for: indexPath)
        
        let key = sectionTitles[indexPath.section]
        if let fruits = fruitsByLetter[key] {
            cell.textLabel?.text = fruits[indexPath.row]
        }
        
        return cell
    }
}

Adding Table View Functionality

1. Swipe Actions

iOS lets users swipe on table cells to reveal actions:

swift
// Trailing swipe actions (right side)
func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
    let deleteAction = UIContextualAction(style: .destructive, title: "Delete") { (action, view, completion) in
        // Delete the item
        let key = self.sectionTitles[indexPath.section]
        if var fruits = self.fruitsByLetter[key] {
            fruits.remove(at: indexPath.row)
            self.fruitsByLetter[key] = fruits
            tableView.deleteRows(at: [indexPath], with: .fade)
        }
        completion(true)
    }
    
    let favoriteAction = UIContextualAction(style: .normal, title: "Favorite") { (action, view, completion) in
        // Mark as favorite
        print("Marked as favorite")
        completion(true)
    }
    favoriteAction.backgroundColor = .systemYellow
    
    return UISwipeActionsConfiguration(actions: [deleteAction, favoriteAction])
}

2. Row Reordering

Enable users to reorder rows in your table:

swift
// Enable reordering
func tableView(_ tableView: UITableView, moveRowAt sourceIndexPath: IndexPath, to destinationIndexPath: IndexPath) {
    let sourceKey = sectionTitles[sourceIndexPath.section]
    let destKey = sectionTitles[destinationIndexPath.section]
    
    if var sourceItems = fruitsByLetter[sourceKey], 
       var destItems = fruitsByLetter[destKey] {
        
        let item = sourceItems[sourceIndexPath.row]
        sourceItems.remove(at: sourceIndexPath.row)
        destItems.insert(item, at: destinationIndexPath.row)
        
        fruitsByLetter[sourceKey] = sourceItems
        fruitsByLetter[destKey] = destItems
    }
}

// Then to enable editing mode:
func enableEditing() {
    tableView.isEditing = true
}

Dynamic Cell Heights

Modern iOS table views automatically adjust row heights based on content:

swift
override func viewDidLoad() {
    super.viewDidLoad()
    
    // Use automatic dimension for row height
    tableView.rowHeight = UITableView.automaticDimension
    tableView.estimatedRowHeight = 60 // Provide an estimate for performance
}

Real-World Example: Contact List App

Let's build a more complete example that shows contacts with profile images, names, and phone numbers:

swift
// Data model
struct Contact {
    let name: String
    let phoneNumber: String
    let profileImage: String // name of the image
}

class ContactsViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
    
    @IBOutlet weak var tableView: UITableView!
    
    // Sample data
    let contacts = [
        Contact(name: "John Smith", phoneNumber: "(555) 123-4567", profileImage: "person1"),
        Contact(name: "Maria Garcia", phoneNumber: "(555) 765-4321", profileImage: "person2"),
        Contact(name: "David Kim", phoneNumber: "(555) 987-6543", profileImage: "person3"),
        Contact(name: "Sarah Johnson", phoneNumber: "(555) 246-8135", profileImage: "person4")
    ]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.dataSource = self
        tableView.delegate = self
        
        // Register our custom cell if using programmatic approach
        // tableView.register(ContactTableViewCell.self, forCellReuseIdentifier: "ContactCell")
        
        tableView.rowHeight = UITableView.automaticDimension
        tableView.estimatedRowHeight = 80
    }
    
    // MARK: - Table view data source
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return contacts.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "ContactCell", for: indexPath) as! ContactTableViewCell
        
        let contact = contacts[indexPath.row]
        cell.configure(with: contact)
        
        return cell
    }
    
    // MARK: - Table view delegate
    
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        tableView.deselectRow(at: indexPath, animated: true)
        
        let contact = contacts[indexPath.row]
        
        // Show contact details or call the contact
        let alert = UIAlertController(
            title: "Contact \(contact.name)",
            message: "Would you like to call \(contact.phoneNumber)?",
            preferredStyle: .alert
        )
        
        alert.addAction(UIAlertAction(title: "Call", style: .default) { _ in
            // In a real app, use URL to initiate a call
            if let url = URL(string: "tel://\(contact.phoneNumber.filter { $0.isNumber })") {
                UIApplication.shared.open(url)
            }
        })
        
        alert.addAction(UIAlertAction(title: "Cancel", style: .cancel))
        
        present(alert, animated: true)
    }
}

// Our custom cell class
class ContactTableViewCell: UITableViewCell {
    
    @IBOutlet weak var profileImageView: UIImageView!
    @IBOutlet weak var nameLabel: UILabel!
    @IBOutlet weak var phoneLabel: UILabel!
    
    func configure(with contact: Contact) {
        nameLabel.text = contact.name
        phoneLabel.text = contact.phoneNumber
        profileImageView.image = UIImage(named: contact.profileImage)
        
        // Make profile image circular
        profileImageView.layer.cornerRadius = profileImageView.frame.height / 2
        profileImageView.clipsToBounds = true
    }
}

Performance Optimization Tips

Table views can suffer performance issues when handling large data sets. Here are some best practices:

Cell Reuse: Always use dequeueReusableCell(withIdentifier:for:)
Avoid Expensive Operations: Don't perform heavy work in cellForRowAt
Prefetching: Implement UITableViewDataSourcePrefetching for proactive data loading
Estimated Heights: Provide accurate estimates with estimatedRowHeight
Image Handling: Load and resize images asynchronously, not in cellForRowAt
Cache Results: Cache calculated heights or complex data

Implementing Search in Table Views

Adding search functionality to your table view:

swift
class SearchableFruitController: UIViewController, UITableViewDataSource, UITableViewDelegate, UISearchResultsUpdating {
    
    @IBOutlet weak var tableView: UITableView!
    let searchController = UISearchController(searchResultsController: nil)
    
    let fruits = ["Apple", "Banana", "Orange", "Mango", "Strawberry", "Pineapple"]
    var filteredFruits: [String] = []
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Setup search controller
        searchController.searchResultsUpdater = self
        searchController.obscuresBackgroundDuringPresentation = false
        searchController.searchBar.placeholder = "Search Fruits"
        navigationItem.searchController = searchController
        definesPresentationContext = true
        
        tableView.dataSource = self
        tableView.delegate = self
        
        filteredFruits = fruits
    }
    
    // MARK: - Search Results Updating
    
    func updateSearchResults(for searchController: UISearchController) {
        if let searchText = searchController.searchBar.text, !searchText.isEmpty {
            filteredFruits = fruits.filter { $0.lowercased().contains(searchText.lowercased()) }
        } else {
            filteredFruits = fruits
        }
        tableView.reloadData()
    }
    
    // MARK: - Table View Data Source
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return filteredFruits.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "FruitCell", for: indexPath)
        cell.textLabel?.text = filteredFruits[indexPath.row]
        return cell
    }
}

Summary

Table views are a fundamental component in iOS development, offering a standardized way to display lists of data. We covered:

Basic table view setup with data source and delegate
Custom cell creation and configuration
Multi-section tables
Advanced features like swipe actions and reordering
Dynamic cell heights
Performance optimization
Search functionality

By mastering table views, you've gained skills that apply to countless iOS apps. Table views form the foundation for many common UI patterns and are essential knowledge for any Swift developer.

Additional Resources

Exercises

Create a table view that displays a list of your favorite movies with custom cells showing the movie poster, title, and year
Implement a multi-section table view that groups contacts by the first letter of their last name
Add swipe-to-delete functionality to remove items from a to-do list
Implement a search bar that filters items in your table view
Create an expandable/collapsible table view where tapping a header reveals additional rows

If you spot any mistakes on this website, please let me know at [email protected]. I’d greatly appreciate your feedback! :)

Introduction​

Understanding Table Views Basics​

Key Components of Table Views:​

Creating Your First Table View​

Registering and Reusing Cells​

Using the Storyboard:​

Programmatic Registration:​

Custom Table View Cells​

Adding Sections to Your Table View​

Adding Table View Functionality​

1. Swipe Actions​

2. Row Reordering​

Dynamic Cell Heights​

Real-World Example: Contact List App​

Performance Optimization Tips​

Implementing Search in Table Views​

Summary​

Additional Resources​

Exercises​