How it works
TableColumnContent is the protocol that describes the columns of a Table. Every column type you place inside a table's builder closure conforms to it, so it serves as the common currency the table uses to lay out, sort, and render each vertical slice of your data. You rarely name TableColumnContent directly; instead you compose conforming values like TableColumn, and the protocol defines the associated row value and sort-comparator types that let those columns stay type-safe against the data they display. Reach for it when you build custom column constructs or generic column helpers that must slot into a Table the same way the built-in columns do.
Produce columns inside a Table builder
A table's trailing closure is a column builder that collects TableColumnContent values into the table's structure. In the example, the closure passed to
Table(fruits)yields two columns, and each one is a piece of TableColumnContent that the table positions left to right.Conform via TableColumn
TableColumn is the standard concrete conformer you use to declare a single column: a header plus the value it pulls from each row. Here
TableColumn("Name", value: \.name)andTableColumn("Color", value: \.color)are both TableColumnContent, supplying the column title and the key path into eachFruit.Bind columns to the row value type
TableColumnContent carries an associated RowValue, so every column in a table must read from the same element type. Because
Table(fruits)iterates overFruit, the\.nameand\.colorkey paths in each column resolve against thatFruitvalue, keeping the columns and their data aligned at compile time.Drive sorting through the comparator
TableColumnContent also exposes a sort comparator type, which is how value-based columns become sortable. Supplying a key path such as
value: \.namegives the column a comparator overFruit.name, the hook a sortable table uses when the reader clicks that column's header.Combine columns as a single content value
Listing several conformers in the builder composes them into one aggregate TableColumnContent for the table to consume. The pairing of the
"Name"and"Color"columns is treated as a unit, which is why you can group, conditionally include, or factor columns into helpers without changing how the Table reads them.
TableColumn("ID", value: \.id.uuidString) next to the existing columns to watch the table grow a new column from one more piece of TableColumnContent.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.
struct TableColumnContentDemo: View {
struct Fruit: Identifiable {
let id = UUID()
let name: String
let color: String
}
let fruits = [
Fruit(name: "Apple", color: "Red"),
Fruit(name: "Lime", color: "Green"),
Fruit(name: "Plum", color: "Purple")
]
var body: some View {
Table(fruits) {
TableColumn("Name", value: \.name)
TableColumn("Color", value: \.color)
}
.padding()
}
}