Tables

Tables let you create tabulate 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

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

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

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

    Row {
        "Tim Cook"
        "Apple Park"
        "Cupertino"
        "California"
    }
} 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 {
    Row {
        "Bob Blob"
        "Underwater Baker"
        "Seaweed Scones"
        "Collecting Rubber Ducks"
    }

    Row {
        "Sally Sizzle"
        "Firefighter Chef"
        "Spicy Ice Cream"
        "Volcano Surfing"
    }

    Row {
        "Greg Grumble"
        "Grumpy Florist"
        "Thorny Roses Salad"
        "Whispering to Snails"
    }
} 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 {
    Row {
        "Bob Blob"
        "Underwater Baker"
        "Seaweed Scones"
        "Collecting Rubber Ducks"
    }

    Row {
        "Sally Sizzle"
        "Firefighter Chef"
        "Spicy Ice Cream"
        "Volcano Surfing"
    }

    Row {
        "Greg Grumble"
        "Grumpy Florist"
        "Thorny Roses Salad"
        "Whispering to Snails"
    }
} 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

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)
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.

Created in Swift with Ignite