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

National Grid Carbon Intensity Forecast (gCO2/kWh)
DayAverageMaxMin
Today222260147
Tomorrow254279211
Wednesday174223135

Figma
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.

National Grid Carbon Intensity Forecast (gCO2/kWh)
DayAverageMaxMin
Today222260147
Tomorrow254279211
Wednesday174223135

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

National Grid Carbon Intensity Forecast (gCO2/kWh)

Day

Average

Max

Min

Today222260147
Tomorrow254279211
Wednesday174223135

Stripes

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

National Grid Carbon Intensity Forecast (gCO2/kWh)
DayAverageMaxMin
Today222260147
Tomorrow254279211
Wednesday174223135

Column Width

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

Native
Widths are required on Native. Passing auto for width on native will set the flex property to 1, allowing it to stretch.

 
National Grid Carbon Intensity Forecast (gCO2/kWh)
DayAverageMaxMin
Today222260147
Tomorrow254279211
Wednesday174223135

With children

Web Only

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

Usage Table
DateUsage
Sat 1st August59.16kWh
Sun 2nd August97.16kWh

Properties

DataTable

NameValuesDefault

items

ReactNode[][]

columnHeadings

ReactNode[]

caption

ReactNode

rowHeadings

Boolean

false

striped

boolean

true

columnWidthsrequired in React Native

string[]

...

JSX.IntrinsicElements["table"]

TableCaption

Web Only
NameValuesDefault

...

JSX.IntrinsicElements["caption"]

TableHead

Web Only
NameValuesDefault

...

JSX.IntrinsicElements["thead"]

TableHeader

Web Only
NameValuesDefault

cellWidth

string

...

JSX.IntrinsicElements["th"]

TableBody

Web Only
NameValuesDefault

...

JSX.IntrinsicElements["tbody"]

TableRow

Web Only
NameValuesDefault

stripe

boolean

false

...

JSX.IntrinsicElements["tr"]

TableCell

Web Only
NameValuesDefault

cellWidth

string

...

JSX.IntrinsicElements["td"]

TableRowHeader

Web Only
NameValuesDefault

cellWidth

string

...

JSX.IntrinsicElements["th"]

Tokens