SwiftUI Table

by Annett Schwarze | 2025-03-14

A Table in SwiftUI is used to present data in rows and columns. It provides features for sorting, selection and more.

To create a table insert a Table view and nested in there TableColumns.

        
import SwiftUI

class Record: ObservableObject, Identifiable {
    var id: UUID = UUID()
    @Published var firstName: String
    @Published var lastName: String
    @Published var age:  Int
    @Published var city:  String

    init(firstName: String, lastName: String, age: Int, city: String) {
        self.firstName = firstName
        self.lastName = lastName
        self.age = age
        self.city = city
    }
}

struct SampleTableView: View {
    @State private var records: [Record] = []
    @State private var sortOrder: [KeyPathComparator] = [
        KeyPathComparator(\Record.firstName),
        KeyPathComparator(\Record.lastName),
        KeyPathComparator(\Record.age),
        KeyPathComparator(\Record.city)
    ]

    var body: some View {
        VStack(alignment: .leading) {
            HStack {
                Text("Table")
            }
            .font(.title)

            Table(records, sortOrder: $sortOrder, columns: {
                TableColumn("First Name", value: \.firstName)

                TableColumn("Last Name", value: \.lastName, content: { rec in
                    Text(rec.lastName)
                })

                TableColumn("Age", value: \.age, content: { rec in
                    Text("\(rec.age)")
                })
                .alignment(.center)

                TableColumn("City", value: \.city)
            })

        }
        .task() {
            records = [
                Record(firstName: "John", lastName: "Smith", age: 50 , city: "Vancouver"),
                Record(firstName: "Jane", lastName: "Doe", age: 30 , city: "Toronto"),
                Record(firstName: "Alice", lastName: "Anderson", age: 25 , city: "Montreal"),
                Record(firstName: "Bob", lastName: "Brown", age: 40 , city: "Calgary")
            ]
            sortRecords(sortOrder)
        }
        .onChange(of: sortOrder) { _, sortOrder in
            sortRecords(sortOrder)
        }
    }

    private func sortRecords(_ sortOrder: [KeyPathComparator]) {
        records.sort(using: sortOrder)
    }
}

#Preview {
    SampleTableView()
}