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.
The data-based version of the table uses
row arrays. These are converted into accessible
<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:
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.
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.
You can also customise the table headers. For instance, you can use Text component for rendering bold text in the table headers.
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