Mastering SwiftUI: Build Dynamic Table Views with Ease!

Creating a table view (or list) in SwiftUI is quite simple thanks to the declarative nature of the framework. SwiftUI's List view is used for this purpose. Here's a step-by-step guide to building a basic table view using SwiftUI.

1. Basic Setup for Table View (List)

First, you need to create a basic SwiftUI project. Open Xcode and start a new project, then follow these steps:

Step 1: Create the SwiftUI View

You can start by defining a List in your view, which acts as a table view in SwiftUI.

import SwiftUI

struct ContentView: View {

    var body: some View {

        List {

            Text("Item 1")

            Text("Item 2")

            Text("Item 3")

        }

    }

}

struct ContentView_Previews: PreviewProvider {

    static var previews: some View {

        ContentView()

    }

}

This code creates a simple table view with three static rows labeled "Item 1", "Item 2", and "Item 3".

Step 2: Display Dynamic Data Using a Model

In real-world applications, you'll typically display dynamic data. Here's how you can create a data model and display it in the List.

First, define a model for your data:

struct Item: Identifiable {

    let id = UUID()

    let name: String

}

Now, use this model to display dynamic data in the List.

import SwiftUI

struct ContentView: View {

    let items = [

        Item(name: "Item 1"),

        Item(name: "Item 2"),

        Item(name: "Item 3")

    ]

    var body: some View {

        List(items) { item in

            Text(item.name)

        }

    }

}

struct ContentView_Previews: PreviewProvider {

    static var previews: some View {

        ContentView()

    }

}

In this example:

• We define an array of Item objects.

• The List view takes this array and displays each item's name property using Text.

2. Customizing Rows in the Table View

You can customize how each row looks by creating a custom row view.

Step 1: Create a Custom Row View

struct ItemRow: View {

    var item: Item

    var body: some View {

        HStack {

            Text(item.name)

                .font(.headline)

            Spacer()

            Image(systemName: "star.fill")

                .foregroundColor(.yellow)

        }

        .padding()

    }

}

Step 2: Use the Custom Row in the List

Now, update the ContentView to use the ItemRow for each row in the List.

import SwiftUI

struct ContentView: View {

    let items = [

        Item(name: "Item 1"),

        Item(name: "Item 2"),

        Item(name: "Item 3")

    ]

    var body: some View {

        List(items) { item in

            ItemRow(item: item)

        }

    }

}

In this case:

• Each row is now an HStack that displays the item name and a star icon to the right.

• You can further customize this layout as needed.

3. Handling Selection in Table View

If you want to handle when a row is selected, you can add a state variable to track the selected item.

import SwiftUI

struct ContentView: View {

    let items = [

        Item(name: "Item 1"),

        Item(name: "Item 2"),

        Item(name: "Item 3")

    ]

    @State private var selectedItem: Item? = nil

    var body: some View {

        List(items, selection: $selectedItem) { item in

            Text(item.name)

        }

    }

}

Now, selectedItem will hold the currently selected item. You can use this value to perform actions based on user selection.

4. Adding Navigation with NavigationLink

You can easily add navigation to detail views using NavigationLink.

import SwiftUI

struct ContentView: View {

    let items = [

        Item(name: "Item 1"),

        Item(name: "Item 2"),

        Item(name: "Item 3")

    ]

    var body: some View {

        NavigationView {

            List(items) { item in

                NavigationLink(destination: DetailView(item: item)) {

                    Text(item.name)

                }

            }

            .navigationTitle("Items")

        }

    }

}

struct DetailView: View {

    var item: Item

    var body: some View {

        Text("You selected \(item.name)")

            .font(.largeTitle)

            .navigationTitle(item.name)

    }

}

In this example:

• NavigationView wraps the List to provide navigation capabilities.

• Each row uses a NavigationLink that, when tapped, navigates to a DetailView displaying more information.

5. Customizing the List Appearance

You can modify the appearance of the List by using various modifiers.

Example of Custom Styling

List(items) { item in

    ItemRow(item: item)

}

.listStyle(InsetGroupedListStyle())  // Example list style

SwiftUI provides different list styles like .plain, .grouped, .insetGrouped, etc.

6. Handling Swipe Actions in the List

You can add swipe actions (like delete) by using the onDelete modifier.

import SwiftUI

struct ContentView: View {

    @State private var items = [

        Item(name: "Item 1"),

        Item(name: "Item 2"),

        Item(name: "Item 3")

    ]

    var body: some View {

        List {

            ForEach(items) { item in

                Text(item.name)

            }

            .onDelete(perform: deleteItems)

        }

    }

    func deleteItems(at offsets: IndexSet) {

        items.remove(atOffsets: offsets)

    }

}

This allows users to swipe to delete rows from the list.

Conclusion

To summarize:

1. Use List to create a table view in SwiftUI.

2. Create a data model and use it to display dynamic content.

3. Customize your rows by creating custom views.

4. Handle user interaction, like row selection, navigation, or deletion, with state and modifiers.

SwiftUI makes creating and customizing table views simple and powerful, all while using a declarative programming model!