Tables

Tables let you create tabulated data in rows and columns for easier reading.

Simple tables consist of rows and columns, like this:

Table {
    Row {
        "Taylor Swift"
        "555, Swiftie Avenue"
        "Nashville"
        "Tennessee"
    }

    Row {
        "Adele Adkins"
        "Caesars Palace"
        "Las Vegas"
        "Nevada"
    }

    Row {
        "Tim Cook"
        "Apple Park"
        "Cupertino"
        "California"
    }
}

Taylor Swift	555, Swiftie Avenue	Nashville	Tennessee
Adele Adkins	Caesars Palace	Las Vegas	Nevada
Tim Cook	Apple Park	Cupertino	California

In that example, all rows are fixed directly as Swift code. If you prefer, you can pass in an array:

Table(User.examples) { user in
    Row {
        user.name
        user.address
        user.city
        user.state
    }
}
.margin(.bottom, .xLarge)

Taylor Swift	555, Swiftie Avenue	Nashville	Tennessee
Adele Adkins	Caesars Palace	Las Vegas	Nevada
Tim Cook	Apple Park	Cupertino	California

You can also add headings to clarify what each column means:

Table(User.examples) { user in
    Row {
        user.name
        user.address
        user.city
        user.state
    }
} header: {
    "Name"
    "Address"
    "City"
    "State"
}

Name	Address	City	State
Taylor Swift	555, Swiftie Avenue	Nashville	Tennessee
Adele Adkins	Caesars Palace	Las Vegas	Nevada
Tim Cook	Apple Park	Cupertino	California

Table styling

To make rows easier to distinguish, use .tableStyle(.stripedRows) to create a zebra striping effect:

Table(TeamMember.examples) { teamMember in
    Row {
        teamMember.name
        teamMember.occupation
        teamMember.favoriteFood
        teamMember.secretHobby
    }
} header: {
    "Name"
    "Occupation"
    "Favourite Food"
    "Secret Hobby"
}
.tableStyle(.stripedRows)

Name	Occupation	Favourite Food	Secret Hobby
Bob Blob	Underwater Baker	Seaweed Scones	Collecting Rubber Ducks
Sally Sizzle	Firefighter Chef	Spicy Ice Cream	Volcano Surfing
Greg Grumble	Grumpy Florist	Thorny Roses Salad	Whispering to Snails

Alternatively, use .tableStyle(.stripedColumns) to create columnar stripes:

Table(TeamMember.examples) { teamMember in
    Row {
        teamMember.name
        teamMember.occupation
        teamMember.favoriteFood
        teamMember.secretHobby
    }
} header: {
    "Name"
    "Occupation"
    "Favourite Food"
    "Secret Hobby"
}
.tableStyle(.stripedColumns)

Name	Occupation	Favourite Food	Secret Hobby
Bob Blob	Underwater Baker	Seaweed Scones	Collecting Rubber Ducks
Sally Sizzle	Firefighter Chef	Spicy Ice Cream	Volcano Surfing
Greg Grumble	Grumpy Florist	Thorny Roses Salad	Whispering to Snails

Filtering tables

If you want users to be able to filter the data in your table, add a filterTitle parameter when you create it. This will filter on any text in each row.

Table(Customer.examples, filterTitle: "Search for a user") { customer in
    Row {
        customer.name
        customer.city
        customer.country
    }
}
.tableStyle(.stripedRows)

Emily Carter	Toronto	Canada
Lucas Meyer	Berlin	Germany
Sofia Rossi	Rome	Italy
Jack Thompson	Sydney	Australia
Aiko Tanaka	Osaka	Japan
Liam Johnson	Chicago	USA
Chloe Dubois	Lyon	France
Mateo García	Barcelona	Spain
Zanele Mokoena	Johannesburg	South Africa
Arjun Patel	Mumbai	India

Row and column formatting

Rows are top-aligned by default, but you can change that by adding a Column then using its verticalAlignment() modifier. This is easier to see when the table borders is enabled using the tableBorder() modifier, like this:

Table {
    Row {
        Column {
            "Top"
        }
        .verticalAlignment(.top)

        Column {
            "Middle"
        }
        .verticalAlignment(.middle)

        Column {
            "Bottom"
        }
        .verticalAlignment(.bottom)

        Column {
            """
            This is much longer text and will wrap over multiple lines, so we can see vertical alignment working.             This is much longer text and will wrap over multiple lines, so we can see vertical alignment working.             This is much longer text and will wrap over multiple lines, so we can see vertical alignment working.             This is much longer text and will wrap over multiple lines, so we can see vertical alignment working.             This is much longer text and will wrap over multiple lines, so we can see vertical alignment working.
            """
        }
    }
}
.tableBorder(true)

Top

Middle

Bottom

This is much longer text and will wrap over multiple lines, so we can see vertical alignment working. This is much longer text and will wrap over multiple lines, so we can see vertical alignment working. This is much longer text and will wrap over multiple lines, so we can see vertical alignment working. This is much longer text and will wrap over multiple lines, so we can see vertical alignment working. This is much longer text and will wrap over multiple lines, so we can see vertical alignment working.

Each row item occupies one column by default, but Column objects have a columnSpan() modifier to adjust that:

Table {
    Row {
        "This is a column"
        "Another column"
        "One more for luck"
    }

    Row {
        Column {
            "This column is as wide as the previous three, and is aligned to the center."
        }
        .columnSpan(3)
        .horizontalAlignment(.center)
    }

    Row {
        "This is another column"

        Column {
            "This column occupies two slots, and is aligned to the trailing edge."
        }
        .columnSpan(2)
        .horizontalAlignment(.trailing)
    }
}
.tableBorder(true)
.tableStyle(.stripedRows)

This is a column	Another column	One more for luck
This column is as wide as the previous three, and is aligned to the center.
This is another column	This column occupies two slots, and is aligned to the trailing edge.