TechnologiesSwiftUI

TableStyleConfiguration struct

iOSmacOStvOSwatchOSvisionOS✓ renders

The properties of a table.

How it works

TableStyleConfiguration is the properties container SwiftUI hands to a custom TableStyle when it needs to render a table. It exposes the resolved structural pieces of a table — its columns and its rows — as ready-to-place views, so your style can arrange and decorate them without re-declaring the table's content. Reach for it whenever you implement the TableStyle protocol and want to control a table's appearance while leaving its data and column definitions untouched.

  1. Receive the configuration in makeBody(configuration:)

    A TableStyle's only requirement is makeBody(configuration:), which SwiftUI calls with a TableStyleConfiguration describing the table being styled. The parameter is typed as the protocol's associated Configuration, which is an alias for TableStyleConfiguration; in BorderedTableStyle, makeBody(configuration:) returns some View assembled from that value.

  2. Place the resolved columns

    The columns property is an opaque view value carrying the table's already-resolved column definitions, so you don't restate the TableColumn declarations from the call site. The example forwards configuration.columns into the columns builder of a new Table(of: Person.self), reusing exactly the Name and Role columns the caller specified.

  3. Place the resolved rows

    The rows property is the matching opaque view value holding the table's row content, generated from the data the table was given. Here configuration.rows is passed to the trailing rows: builder of that same Table, reconstructing the body from the supplied people without the style needing to know about the data source.

  4. Decorate the reconstructed table

    Because columns and rows are plain views, you wrap the rebuilt table in ordinary modifiers to define the look. BorderedTableStyle adds a .background(Color(white: 0.97)), an .overlay of a RoundedRectangle stroked in .blue, and a .clipShape with matching corner radius — the visual contribution that distinguishes this style.

  5. Attach the style with tableStyle(_:)

    A type conforming to TableStyle is applied to a table through the tableStyle(_:) modifier, which is what triggers SwiftUI to build a TableStyleConfiguration and call your makeBody. The example activates the custom appearance by writing .tableStyle(BorderedTableStyle()) on the Table(people).

Try it — Change .stroke(.blue, lineWidth: 2) to .stroke(.red, lineWidth: 6) and watch the same configuration.columns and configuration.rows reappear inside a thicker red border, confirming the configuration supplies the content while the style owns the chrome.

Example & preview

Press Run live & edit to compile it in your browser — then edit the Swift on the left and the preview re-renders live.

TableStyleConfiguration.swift
struct TableStyleConfigurationDemo: View {
    struct Person: Identifiable {
        let id = UUID()
        let name: String
        let role: String
    }

    struct BorderedTableStyle: TableStyle {
        func makeBody(configuration: Configuration) -> some View {
            Table(of: Person.self) {
                configuration.columns
            } rows: {
                configuration.rows
            }
            .background(Color(white: 0.97))
            .overlay(
                RoundedRectangle(cornerRadius: 8)
                    .stroke(.blue, lineWidth: 2)
            )
            .clipShape(RoundedRectangle(cornerRadius: 8))
        }
    }

    private let people = [
        Person(name: "Ada", role: "Engineer"),
        Person(name: "Grace", role: "Admiral"),
        Person(name: "Alan", role: "Theorist")
    ]

    var body: some View {
        Table(people) {
            TableColumn("Name", value: \.name)
            TableColumn("Role", value: \.role)
        }
        .tableStyle(BorderedTableStyle())
        .padding()
    }
}
Live preview
Name Role Ada Engineer Grace Admiral Alan Theorist
Name Role Ada Engineer Grace Admiral Alan Theorist
swift → lexer → parser → sema → uiir → canvas Open in Studio ↗
What's new in SwiftUI 27 →