Mastering Tables in SwiftUI, How and Where?

In this story, I want to talk about Table in SwiftUI, exploring its core functionalities and practical applications.
SwiftUI brought a declarative and streamlined approach to iOS and iPadOS development. One long-awaited addition to the SwiftUI toolbox was Table, a powerful construct for building interactive multi-column tables. it’s available from iOS 16, and it’s not even close to the TableView in UIKit. Keep in mind that it is useful for Mac apps and iPad apps. Table allows you to efficiently present and manipulate data in a user-friendly format.

Generated with AI

How does it work?

At its heart, Table takes two arguments: a data source and a closure for defining the content of each row. The data source can be an array of structs or any other collection that conforms to the Identifiable protocol. This protocol ensures each item in your data has a unique identifier, essential for tracking changes within the table.

struct City: Identifiable {
    var id = UUID()
    let name: String
    let country: String
    let state: String
}

The row content closure defines the view hierarchy for each row. Here, you leverage SwiftUI’s familiar building blocks like Text, Image, and custom views to represent your data visually.

@State private var cities = [
    City(name: "Munich", country: "Germany", state: "Bavaria"),
    City(name: "Berlin", country: "Germany", state: "Berlin"),
    City(name: "Frankfurt", country: "Germany", state: "Hessen")
]

var body: some View {
    Table(cities) {
        TableColumn("Name", value: \.name)
        TableColumn("Country", value: \.country)
        TableColumn("State", value: \.state)
    }
}

Making Table Interactive

Table goes beyond static data display. It empowers you to create dynamic and interactive tables.

• Sorting: Leverage the power of built-in sorting by binding a sorting variable to the Table. Clicking a sortable column header automatically updates the data based on the chosen sorting criteria.

@State private var sortOrder = [KeyPathComparator(\City.name)]

var body: some View {
    Table(cities, sortOrder: $sortOrder) {
        TableColumn("Name", value: \.name)
        TableColumn("Country", value: \.country)
        TableColumn("State", value: \.state)
    }
    .onChange(of: sortOrder) { value in
        cities.sort(using: sortOrder)
    }
}

Table with SortOrder

• Selection: Allow users to select rows using the selection modifier. This is perfect for scenarios where you want to perform actions on specific data points within the table.

@State private var selectedCity = Set<City.ID>()

var body: some View {
    Table(cities, selection: $selectedCity) {
        TableColumn("Name", value: \.name)
        TableColumn("Country", value: \.country)
        TableColumn("State", value: \.state)
    }
}

Table with Selection

Conclusion

Table in SwiftUI is a game-changer for building interactive and informative data displays. Its declarative nature and rich feature set streamline the process of presenting and manipulating data within your SwiftUI applications. So, the next time you have a data-driven project, consider leveraging the power of Table to create a user-friendly and visually appealing experience.
You can find the example source in my GitHub.

Leveraging SwiftUI’s Environment for Dependency Injection