Table

Table arranges a collection of items with multiple attributes in rows and columns, to make the data easy to scan and analyze. Table is scrollable horizontally by mouse and keyboard.

Basic Table with row and header data props

The data-based version of the table uses header and row arrays. These are converted into accessible <th> and <td> elements. If the data includes a negative number/integer, the style automatically adopts a red color. This only works where simple integer strings are provided. Where more complex HTML is provided, styling will have to be provided to that HTML manually.

Note: You can add basic markup (but not components; see Custom headers below) to the headers or rows and it will be parsed. For example, you could make one of the row values italic:

Row headers

Sometimes, you'll want the first cell of each row to be used as a row header. This is done automatically where the rowHeaders prop is provided. Accessible <th> elements with scope="row" are inserted.

Captions

You can include a <caption> to name your table. It is recommended you either include a caption or precede the table with a heading of the correct level.

Custom headers

You can also customise the table headers. For instance, you can use Text component for rendering bold text in the table headers.

Manual table

If, for added control, you wish to create the table markup completely manually, you can do that instead. The table will be styled in the same fashion as a data-based one. Note: You cannot use custom headers (see above) and manual markup. Custom headers must be used with data from the rows prop.