Skip to content

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

NameValuesDefault

items

ReactNode[][]

columnHeadings

ReactNode[]

caption

ReactNode

rowHeadings

Boolean

false

striped

boolean

true

columnWidths

string[]

...

JSX.IntrinsicElements["table"]

TableCaption

NameValuesDefault

...

JSX.IntrinsicElements["caption"]

TableHead

NameValuesDefault

...

JSX.IntrinsicElements["thead"]

TableHeader

NameValuesDefault

cellWidth

string

...

JSX.IntrinsicElements["th"]

TableBody

NameValuesDefault

...

JSX.IntrinsicElements["tbody"]

TableRow

NameValuesDefault

stripe

boolean

false

...

JSX.IntrinsicElements["tr"]

TableCell

NameValuesDefault

cellWidth

string

...

JSX.IntrinsicElements["td"]

TableRowHeader

NameValuesDefault

cellWidth

string

...

JSX.IntrinsicElements["th"]

Tokens