How to use UITableView in SwiftUI

Generated on 7/30/2024

1 search

Tailscan

This post is brought to you by Tailscan, the best devtool for Tailwind CSS.

To use UITableView in SwiftUI, you can leverage the List view, which is a powerful and flexible way to create table-like interfaces in SwiftUI. Here are some key points and examples from the WWDC sessions that can help you get started:

  1. Basic List Usage:

    • You can use List to create a table-like view. It can be initialized with a collection of data, and it will generate views for each element in the collection.
    • Example from the session "SwiftUI essentials":
      struct Pet: Identifiable {
          let id = UUID()
          let name: String
      }
      
      let pets = [Pet(name: "Whiskers"), Pet(name: "Rufus"), Pet(name: "Bubbles")]
      
      struct ContentView: View {
          var body: some View {
              List(pets) { pet in
                  Text(pet.name)
              }
          }
      }
      
      SwiftUI essentials (07:55)
  2. Customizing List Rows:

    • You can customize each row in the list by using custom views.
    • Example from the session "SwiftUI essentials":
      struct PetRow: View {
          var pet: Pet
      
          var body: some View {
              HStack {
                  Text(pet.name)
                  Spacer()
                  Button("Award") {
                      // Action for awarding the pet
                  }
              }
          }
      }
      
      struct ContentView: View {
          var body: some View {
              List(pets) { pet in
                  PetRow(pet: pet)
              }
          }
      }
      
      SwiftUI essentials (08:50)
  3. Advanced List Customization:

    • You can add features like swipe actions to each row.
    • Example from the session "SwiftUI essentials":
      struct ContentView: View {
          var body: some View {
              List(pets) { pet in
                  Text(pet.name)
                      .swipeActions {
                          Button("Award") {
                              // Action for awarding the pet
                          }
                          .tint(.green)
                      }
              }
          }
      }
      
      SwiftUI essentials (08:50)
  4. Using Sections in Lists:

    • You can organize data into sections within a list.
    • Example from the session "Demystify SwiftUI containers":
      struct ContentView: View {
          var body: some View {
              List {
                  Section(header: Text("My Pets")) {
                      ForEach(myPets) { pet in
                          Text(pet.name)
                      }
                  }
                  Section(header: Text("Other Pets")) {
                      ForEach(otherPets) { pet in
                          Text(pet.name)
                      }
                  }
              }
          }
      }
      
      Demystify SwiftUI containers (10:42)

By using List and its various customization options, you can effectively create and manage table views in SwiftUI, similar to UITableView in UIKit. For more detailed examples and advanced techniques, you can refer to the sessions mentioned above.

Platforms State of the Union

Platforms State of the Union

Discover the newest advancements on Apple platforms.

SwiftUI essentials

SwiftUI essentials

Join us on a tour of SwiftUI, Apple’s declarative user interface framework. Learn essential concepts for building apps in SwiftUI, like views, state variables, and layout. Discover the breadth of APIs for building fully featured experiences and crafting unique custom components. Whether you’re brand new to SwiftUI or an experienced developer, you’ll learn how to take advantage of what SwiftUI has to offer when building great apps.

Demystify SwiftUI containers

Demystify SwiftUI containers

Learn about the capabilities of SwiftUI container views and build a mental model for how subviews are managed by their containers. Leverage new APIs to build your own custom containers, create modifiers to customize container content, and give your containers that extra polish that helps your apps stand out.

Get started with HealthKit in visionOS

Get started with HealthKit in visionOS

Discover how to use HealthKit to create experiences that take full advantage of the spatial canvas. Learn the capabilities of HealthKit on the platform, find out how to bring an existing iPadOS app to visionOS, and explore the special considerations governing HealthKit during a Guest User session. You’ll also learn ways to use SwiftUI, Swift Charts, and Swift concurrency to craft innovative experiences with HealthKit.

Migrate your TVML app to SwiftUI

Migrate your TVML app to SwiftUI

SwiftUI helps you build great apps on all Apple platforms and is the preferred toolkit for bringing your content into the living room with tvOS 18. Learn how to use SwiftUI to create familiar layouts and controls from TVMLKit, and get tips and best practices.

How to use UITableView in SwiftUI | Ask WWDC