Table

A collection of Table components which can be used to construct fully semantic HTML tables.

<TableBody> must always be used in order to be semantically correct, however <TableHeader> is optional depending on the circumstances. Detailed information can be found with the accompanying examples for these scenarios.

Examples

Single Row of Data

View standalone

Basic table with one row of data and no headers.

Code

<Table>
  <TableBody>
    <TableRow>
      <TableCell>
        A
      </TableCell>
      <TableCell>
        B
      </TableCell>
      <TableCell>
        C
      </TableCell>
    </TableRow>
  </TableBody>
</Table>

Rows of Data

View standalone

Basic table with multiple rows of data and no headers.

A	B	C
D	E	F
G	H	I

Code

<Table>
  <TableBody>
    <TableRow>
      <TableCell>
        A
      </TableCell>
      <TableCell>
        B
      </TableCell>
      <TableCell>
        C
      </TableCell>
    </TableRow>
    <TableRow>
      <TableCell>
        D
      </TableCell>
      <TableCell>
        E
      </TableCell>
      <TableCell>
        F
      </TableCell>
    </TableRow>
    <TableRow>
      <TableCell>
        G
      </TableCell>
      <TableCell>
        H
      </TableCell>
      <TableCell>
        I
      </TableCell>
    </TableRow>
  </TableBody>
</Table>

Headings and Data

View standalone

Standard table with column headers and related data. By default these headings have a gray background. In this case, the headers row should reside within <TableHeader> with the remaining data rows inside <TableBody>

Animal	Noise	Hobby
Cat	Meow	Sleeping
Dog	Woof	Walkies

Code

<Table>
  <TableHead>
    <TableRow>
      <TableCell
        heading
        scope="col"
      >
        Animal
      </TableCell>
      <TableCell
        heading
        scope="col"
      >
        Noise
      </TableCell>
      <TableCell
        heading
        scope="col"
      >
        Hobby
      </TableCell>
    </TableRow>
  </TableHead>
  <TableBody>
    <TableRow>
      <TableCell>
        Cat
      </TableCell>
      <TableCell>
        Meow
      </TableCell>
      <TableCell>
        Sleeping
      </TableCell>
    </TableRow>
    <TableRow>
      <TableCell>
        Dog
      </TableCell>
      <TableCell>
        Woof
      </TableCell>
      <TableCell>
        Walkies
      </TableCell>
    </TableRow>
  </TableBody>
</Table>

Headings and Data

View standalone

Standard table with column headers in our secondary blue colour and related data. The heading colour defaults to gray but can be set to blue by setting headingColour="blue"

Animal	Noise	Hobby
Cat	Meow	Sleeping
Dog	Woof	Walkies

Code

<Table>
  <TableHead>
    <TableRow>
      <TableCell
        heading
        headingColor="blue"
        scope="col"
      >
        Animal
      </TableCell>
      <TableCell
        heading
        headingColor="blue"
        scope="col"
      >
        Noise
      </TableCell>
      <TableCell
        heading
        headingColor="blue"
        scope="col"
      >
        Hobby
      </TableCell>
    </TableRow>
  </TableHead>
  <TableBody>
    <TableRow>
      <TableCell>
        Cat
      </TableCell>
      <TableCell>
        Meow
      </TableCell>
      <TableCell>
        Sleeping
      </TableCell>
    </TableRow>
    <TableRow>
      <TableCell>
        Dog
      </TableCell>
      <TableCell>
        Woof
      </TableCell>
      <TableCell>
        Walkies
      </TableCell>
    </TableRow>
  </TableBody>
</Table>

Multi Axis Headings and Data

View standalone

Standard table with column and row headers with related data. In this case, all rows reside within <TableBody>

	Bird	Cat	Spider
Leg Count	2	4	8
Lays Eggs	Yes	No	Yes

Code

<Table>
  <TableBody>
    <TableRow>
      <TableCell
        heading
        scope="col"
      />
      <TableCell
        heading
        scope="col"
      >
        Bird
      </TableCell>
      <TableCell
        heading
        scope="col"
      >
        Cat
      </TableCell>
      <TableCell
        heading
        scope="col"
      >
        Spider
      </TableCell>
    </TableRow>
    <TableRow>
      <TableCell
        heading
        scope="row"
      >
        Leg Count
      </TableCell>
      <TableCell>
        2
      </TableCell>
      <TableCell>
        4
      </TableCell>
      <TableCell>
        8
      </TableCell>
    </TableRow>
    <TableRow>
      <TableCell
        heading
        scope="row"
      >
        Lays Eggs
      </TableCell>
      <TableCell>
        Yes
      </TableCell>
      <TableCell>
        No
      </TableCell>
      <TableCell>
        Yes
      </TableCell>
    </TableRow>
  </TableBody>
</Table>

Numerical data

View standalone

In keeping with our branding guidelines, cells that contain numerical data only will have specific styling applied to them. This includes Monospace Uppercase Lining and end text alignment.

	Q3 2022	Q4 2022	Q1 2023	Q2 2023
Lives saved by using tables	0	1,860	140,600	8,566,500
Scientific discoveries made by using tables	0	27,600	1,865,000	9,864,253,001
Profit as a result of using tables	$0	$1,854,000	$987,560,000	$85,560,000,000

Code

<Table>
  <TableBody>
    <TableRow>
      <TableCell
        heading
        scope="col"
      />
      <TableCell
        heading
        scope="col"
      >
        Q3 2022
      </TableCell>
      <TableCell
        heading
        scope="col"
      >
        Q4 2022
      </TableCell>
      <TableCell
        heading
        scope="col"
      >
        Q1 2023
      </TableCell>
      <TableCell
        heading
        scope="col"
      >
        Q2 2023
      </TableCell>
    </TableRow>
    <TableRow>
      <TableCell
        heading
        scope="row"
      >
        Lives saved by using tables
      </TableCell>
      <TableCell>
        0
      </TableCell>
      <TableCell>
        1,860
      </TableCell>
      <TableCell>
        140,600
      </TableCell>
      <TableCell>
        8,566,500
      </TableCell>
    </TableRow>
    <TableRow>
      <TableCell
        heading
        scope="row"
      >
        Scientific discoveries made by using tables
      </TableCell>
      <TableCell>
        0
      </TableCell>
      <TableCell>
        27,600
      </TableCell>
      <TableCell>
        1,865,000
      </TableCell>
      <TableCell>
        9,864,253,001
      </TableCell>
    </TableRow>
    <TableRow>
      <TableCell
        heading
        scope="row"
      >
        Profit as a result of using tables
      </TableCell>
      <TableCell>
        $0
      </TableCell>
      <TableCell>
        $1,854,000
      </TableCell>
      <TableCell>
        $987,560,000
      </TableCell>
      <TableCell>
        $85,560,000,000
      </TableCell>
    </TableRow>
  </TableBody>
</Table>

Table Text Alignment

View standalone

By default, table content is aligned left horizontally and top vertically. Text alignment can however be applied to an entire table using the textAlign and/or verticalAlign props on the outer <Table> component.

As you can see, the text is centered and at the bottom.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Code

<Table
  textAlign="center"
  verticalAlign="bottom"
>
  <TableBody>
    <TableRow>
      <TableCell>
        As you can see, the text is centered and at the bottom.
      </TableCell>
      <TableCell>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </TableCell>
    </TableRow>
  </TableBody>
</Table>

Row Text Alignment

View standalone

By default, rows inherit textAlign and verticalAlign from the outer <Table>. They can however be applied to individual <TableRow> components to override this inheritance.

Header rows inherit vertical align "middle" from your default browser stylesheet	With text align "end" added
Data cells inherit "left" from the outer Table with vertical align "middle" added.	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Header rows inherit vertical align "middle" from your default browser stylesheet

With text align "end" added

Data cells inherit "left" from the outer Table with vertical align "middle" added.

Code

<Table>
  <TableHead>
    <TableRow textAlign="end">
      <TableCell
        heading
        scope="col"
      >
        Header rows inherit vertical align "middle" from your default browser stylesheet
      </TableCell>
      <TableCell
        heading
        scope="col"
      >
        With text align "end" added
      </TableCell>
    </TableRow>
  </TableHead>
  <TableBody>
    <TableRow verticalAlign="middle">
      <TableCell>
        Data cells inherit "left" from the outer Table with vertical align "middle" added.
      </TableCell>
      <TableCell>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </TableCell>
    </TableRow>
  </TableBody>
</Table>

Cell Text Alignment

View standalone

By default, cells inherit their horizontal and vertical alignment from either the current row or the outer table. textAlign and verticalAlign can however be applied to individual <TableCell> components to override this inheritance.

I inherit "center" from the row and "top" by default

I'm aligned "start" and "middle"

I'm aligned "end" and "bottom"

Code

<Table>
  <TableBody>
    <TableRow textAlign="center">
      <TableCell>
        I inherit "center" from the row and "top" by default
      </TableCell>
      <TableCell
        textAlign="start"
        verticalAlign="middle"
      >
        I'm aligned "start" and "middle"
      </TableCell>
      <TableCell
        textAlign="end"
        verticalAlign="bottom"
      >
        I'm aligned "end" and "bottom"
      </TableCell>
      <TableCell>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </TableCell>
    </TableRow>
  </TableBody>
</Table>

Responsive Behaviour

View standalone

Customizing <TableCell> component widths is not supported as the responsibility of cell sizing is delegated to the browsers native behaviour. As our designs progress, tables will be replaced with alternative layouts for smaller screen sizes, however as a temporary measure cell widths are hardcoded to 160px for mobile and tablet and the table becomes scrollable. (Resize your browser window to <=1024px to see this in action)

Column Heading 1	Column Heading 2	Column Heading 3	Column Heading 4	Column Heading 5	Column Heading 6	Column Heading 7	Column Heading 8
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Code

<Table>
  <TableHead>
    <TableRow>
      <TableCell
        heading
        scope="col"
      >
        Column Heading 1
      </TableCell>
      <TableCell
        heading
        scope="col"
      >
        Column Heading 2
      </TableCell>
      <TableCell
        heading
        scope="col"
      >
        Column Heading 3
      </TableCell>
      <TableCell
        heading
        scope="col"
      >
        Column Heading 4
      </TableCell>
      <TableCell
        heading
        scope="col"
      >
        Column Heading 5
      </TableCell>
      <TableCell
        heading
        scope="col"
      >
        Column Heading 6
      </TableCell>
      <TableCell
        heading
        scope="col"
      >
        Column Heading 7
      </TableCell>
      <TableCell
        heading
        scope="col"
      >
        Column Heading 8
      </TableCell>
    </TableRow>
  </TableHead>
  <TableBody>
    <TableRow>
      <TableCell>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </TableCell>
      <TableCell>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </TableCell>
      <TableCell>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </TableCell>
      <TableCell>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </TableCell>
      <TableCell>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </TableCell>
      <TableCell>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </TableCell>
      <TableCell>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </TableCell>
      <TableCell>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </TableCell>
    </TableRow>
  </TableBody>
</Table>

Table Cell with a component child

View standalone

Basic table that has a TableCell containing a component

This is a Text Component inside a TableCell. Hello 👋

Code

<Table>
  <TableBody>
    <TableRow>
      <TableCell>
        <Text>
          This is a Text Component inside a TableCell. Hello 👋
        </Text>
      </TableCell>
    </TableRow>
  </TableBody>
</Table>

Table without rounded corners

View standalone

By default, tables have rounded corners, this can be controlled by the useRounded boolean which is true by default, but setting it to false removes them.

As you can see, this table is super square.

Code

<Table>
  <TableBody>
    <TableRow>
      <TableCell>
        As you can see, this table is super square.
      </TableCell>
      <TableCell>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </TableCell>
    </TableRow>
  </TableBody>
</Table>

Table with no outer borders

View standalone

By default, tables have borders, this can be controlled by the useBorders boolean which is true by default, but setting it to false removes them.

As you can see, this table is border free.

Code

<Table>
  <TableBody>
    <TableRow>
      <TableCell>
        As you can see, this table is border free.
      </TableCell>
      <TableCell>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </TableCell>
    </TableRow>
  </TableBody>
</Table>

Table with no outer or cell borders

View standalone

By default, table cells also have some borders, this can be controlled by the useBorders boolean on TableCell which is true by default, but setting it to false removes them.

As you can see, this table is border free.

Code

<Table>
  <TableBody>
    <TableRow>
      <TableCell>
        As you can see, this table is border free.
      </TableCell>
      <TableCell>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </TableCell>
    </TableRow>
  </TableBody>
</Table>

Props

Table

`textAlign`

ConditionalStyleWithResponsiveArray<Values<("inherit" | "center" | "end" | "start")[], { defaultClass: string; conditions: { [x: string]: string; }; }>, string[] & { length: 4; }>

Default: "start"

`verticalAlign`

"inherit" | "bottom" | "top" | "baseline" | "middle"

Default: "top"

`useBorders`

boolean

Default: true

`useRounded`

boolean

Default: true

`atoms`

Applies permitted design system styles. See styling documentation for more.

TableBody

`atoms`

Applies permitted design system styles. See styling documentation for more.

TableCell

`textAlign`

ConditionalStyleWithResponsiveArray<Values<("inherit" | "center" | "end" | "start")[], { defaultClass: string; conditions: { [x: string]: string; }; }>, string[] & { length: 4; }>

Default: "inherit"

`verticalAlign`

"inherit" | "bottom" | "top" | "baseline" | "middle"

Default: "inherit"

`useBorders`

boolean

Default: true

`headingColor`

"blue" | "gray"

Default: "gray"

`heading`

boolean

Default: false

`scope`

"row" | "col"

`atoms`

Applies permitted design system styles. See styling documentation for more.

TableHead

`atoms`

Applies permitted design system styles. See styling documentation for more.

TableRow

`textAlign`

ConditionalStyleWithResponsiveArray<Values<("inherit" | "center" | "end" | "start")[], { defaultClass: string; conditions: { [x: string]: string; }; }>, string[] & { length: 4; }>

Default: "inherit"

`verticalAlign`

"inherit" | "bottom" | "top" | "baseline" | "middle"

Default: "inherit"

`atoms`

Applies permitted design system styles. See styling documentation for more.