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.