Data Table

Data Table is used to display data in a table.

Overview

DataTable can be used to display tabular data on the page. It should not be used for creating layouts or displaying information that is not strictly tabular. The data should be arranged in rows and columns.

Usage

Data Table with Caption

In Figma DataTable is designed to be used as a buildable block as opposed to one full component. It is responsive and can be stretched.

Accessibility

Never use a data table for presentation, it should only be used to display data.

It is recommended to use a caption to give the table context, this will be read out by screen readers. A heading can be placed within a caption.

Variations

Row Headers

Row Headers can be used to further describe the data.

Row Headers can also be React elements, allowing greater customisation.

Stripes

Striping can be enabled or disabled for the entire table. By default it is enabled.

Column Width

On web the columns can optionally be assigned a fixed width.

With children

Instead of using the props to generate the table you can specify the caption, headers and body of the table as children.

Properties

DataTable

Name	Values	Default
items	ReactNode[][]
columnHeadings	ReactNode[]
caption	ReactNode
rowHeadings	Boolean	false
striped	boolean	true
columnWidths	string[]
...	JSX.IntrinsicElements["table"]

TableCaption

Name	Values	Default
...	JSX.IntrinsicElements["caption"]

TableHead

Name	Values	Default
...	JSX.IntrinsicElements["thead"]

TableHeader

Name	Values	Default
cellWidth	string
...	JSX.IntrinsicElements["th"]

TableBody

Name	Values	Default
...	JSX.IntrinsicElements["tbody"]

TableRow

Name	Values	Default
stripe	boolean	false
...	JSX.IntrinsicElements["tr"]

TableCell

Name	Values	Default
cellWidth	string
...	JSX.IntrinsicElements["td"]

TableRowHeader

Name	Values	Default
cellWidth	string
...	JSX.IntrinsicElements["th"]

Tokens

Inclusive Components - Data Table (opens in new window)