How to create a Table in SwiftUI

December 20, 2024

In UIKit, UITableView is one of the most common UI controls on iOS. If you have experience developing apps in UIKit, you are familiar with using table views to present lists of data. This UI control is commonly used in content-based apps. Some popular apps that make use of lists or table views are Instagram, X, Airbnb, or Apple News.

Instead of using UITableView, we use List in SwiftUI to present rows of data. If you have already created a table view with UIKit, you know that it can take considerable effort to implement a simple table view and even more effort to customize the layout of the cells.

SwiftUI simplifies the entire process. With just a few lines of code you can display data in a table format.

Even if you need to customize the layout of the rows, it only requires minimal effort. Feeling confused? Don’t worry. You’ll understand what I mean in a moment. In this SwiftUI tutorial, we’ll start with a simple list. Once you understand the basics, I’ll show you how to present a list of data with a more complex layout.

Let’s start with a simple list. Open XCode and create a new project using the App template. On the next screen, name it SwiftUIList (or whatever name you like) and fill in all the required fields. Also, select SwiftUI as the Interface option.

XCode will generate the code for “Hello World” in ContentView.swift. Replace the content in ContentView.swift with this:

struct ContentView: View {
    var body: some View {
        List {
            
            Text("Item 1")
            Text("Item 2")
            Text("Item 3")
        }
    }
}

The result would be as follows:

This is all the code you need to create a simple list or table. When text views are integrated into a List, the list view will present the data in rows. Here, each row displays a text view with a different description.

Creating table views with ForEach

The same code snippet can be written in the following way using ForEach:

struct ContentView: View {
    var body: some View {
        List {
            ForEach(1...3, id: \.self) { index in
                
                Text("Item \(index)")
            }
        }
    }
}

Since text views are very similar, you can use ForEach in SwiftUI to create views in a loop.

You can provide ForEach with a collection of data or a range. However, it is important to tell ForEach how to uniquely identify each item in the collection. This is accomplished through the id parameter.

Why does ForEach need this identifier? SwiftUI has the ability to automatically update the UI when some or all of the items in the collection change. To accomplish this, it needs a unique identifier to accurately track and update the items.

In the code snippet above, we pass a range of values to ForEach to iterate through. The identifier is set to the value itself (i.e. 1, 2, or 3). The index parameter contains the current value of the loop. For example, if you start with a value of 1, the index parameter will be 1.

Inside the closure, the code that renders the views is defined. In this case, we create a text view with a description that varies based on the index value in the loop. This is how we create three items in the list with different titles.

Now, let me show you an alternative technique. The same code snippet can be simplified even further as follows:

struct ContentView: View {
    var body: some View {
        List {
            ForEach(1...3, id: \.self) {
                
                Text("Item \($0)")
            }
        }
    }
}

You can omit the index parameter and use $0, which refers to the first parameter of the loop.

Let’s simplify the code further by directly passing a collection of data to List. Here is the updated code:

struct ContentView: View {
    var body: some View {
        List(1...3, id: \.self)
        {
            
            Text("Item \($0)")
            
        }
    }
}