New in SwiftUI 4: Tables for iPadOS & iOS(Kinda :))

DevTechie Inc

Jun 24, 2022

SwiftUI 4 brought Tables to iPadOS, so this means tables are now supported for macOS as well as iPadOS. It’s kinda supported for iOS as well and we will see how with the example.

So Table is a container that presents rows of data arranged in one or more columns, it optionally provides the ability to select one or more members. We usually crate table from a collection of data. Let’s understand this better with an example.

We will start with a simple data structure.

struct DevTechieCourse: Identifiable, Hashable {
    let id = UUID()
    let name: String
    let category: String
}

Let’s add some sample data:

extension DevTechieCourse {
    static var exampleData: [DevTechieCourse] {
        [
            .init(name: "Mastering SwiftUI 3", category: "SwiftUI"),
            .init(name: "What's new in SwiftUI 4", category: "SwiftUI"),
            .init(name: "Build Strava Clone in UIKit", category: "UIKit")
        ]
    }
}

Now we can put a TableView on screen. Table takes collection of data as parameter so we will pass example data into the Table. We will use TableColumn to place data.

struct ContentView: View {
    
    var body: some View {
        VStack {
            Text("DevTechie")
                .font(.largeTitle)
            
            Table(DevTechieCourse.exampleData) {
                TableColumn("ID", value: \.id.uuidString)
                TableColumn("Course Name", value: \.name)
                TableColumn("Category", value: \.category)
            }
        }
    }
    
}

Note: Under Xcode 14 beta 1 there is a bug which shows table column header overlapping with data. Hopefully this will be fixed by the final release of Xcode 14

Running this code on iOS will give us table view but it will only show first column.

With that we have reached the end of this article. Thank you once again for reading. Subscribe our newsletter at https://www.devtechie.com