TechnologiesSwiftUI

TableColumnAlignment struct

iOSmacOStvOSwatchOSvisionOS✓ renders

Describes the alignment of the content of a table column.

How it works

TableColumnAlignment describes how a column's content sits within its horizontal extent in a SwiftUI Table — leading, center, or trailing. Because a table places every cell in a column inside the same fixed-width region, the alignment you choose governs where the value lands and where its header label is drawn relative to it. Reach for it when a column's values read better pinned to one edge — most commonly numeric or measurement columns, which are conventionally aligned to the trailing edge so that digits line up vertically down the rows.

  1. Pass an alignment to TableColumn

    A TableColumnAlignment value is supplied through the alignment: parameter of a TableColumn. It applies to that one column's cells and its header together, leaving sibling columns untouched. In the example, TableColumn("Qty", alignment: .trailing) requests trailing alignment for the quantity column while the "Name" column keeps the default.

  2. Choose among the alignment cases

    TableColumnAlignment is a small set of type properties — leading, center, and trailing — each producing a value of the type. You select one with leading-dot syntax at the call site, as with .trailing here. Omitting the alignment: argument entirely, as the "Name" column does, falls back to the column's natural leading layout.

  3. Header and cells share the alignment

    The chosen TableColumnAlignment positions both the column's header text and the content view each row builds for that column. So .trailing pushes the "Qty" label and every Text("\($0.qty)") cell to the right edge of the column, giving the numbers a clean right margin that the default leading layout would not.

  4. Apply it where it matters across columns

    Mixing alignments per column is the point: text-bearing columns typically stay leading while numeric ones go trailing. The demo pairs a default-aligned TableColumn("Name") with a .trailing TableColumn("Qty"), so names flush left and counts flush right within the same Table(items).

Try it — Change alignment: .trailing on the "Qty" column to alignment: .center and watch both the header and the numbers shift to the middle of the column.

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.

TableColumnAlignment.swift
struct TableColumnAlignmentDemo: View {
    struct Item: Identifiable {
        let id = UUID()
        let name: String
        let qty: Int
    }
    let items = [
        Item(name: "Apples", qty: 4),
        Item(name: "Pears", qty: 12),
        Item(name: "Figs", qty: 7)
    ]
    var body: some View {
        Table(items) {
            TableColumn("Name") { Text($0.name) }
            TableColumn("Qty", alignment: .trailing) {
                Text("\($0.qty)")
            }
        }
        .padding()
    }
}
Live preview
Name Qty $0.name {$0.qty} $0.name {$0.qty} $0.name {$0.qty}
Name Qty $0.name {$0.qty} $0.name {$0.qty} $0.name {$0.qty}
swift → lexer → parser → sema → uiir → canvas Open in Studio ↗
What's new in SwiftUI 27 →