Skip to main contentCarbon Design System

Data table

Color

Table header

ElementPropertyColor token
Table headerbackground-color$layer *
Titletext-color$text-primary
Descriptiontext-color$text-secondary

* Denotes a contextual color token that will change values based on the layer it is placed on.

Data table header

Column header

StatePropertyColor token
Enabledbackground-color$layer-accent *
text-color$text-primary
svg$icon-primary
Hoverbackground-color$layer-accent-hover *
text-color$text-primary
Focusborder$focus
Activebackground-color$layer-accent-active *

* Denotes a contextual color token that will change values based on the layer it is placed on.

Column headers

Row

StatePropertyColor token
Enabledbackground-color$layer *
text-color$text-secondary
border-bottom$border-subtle *
svg$icon-secondary
Hoverbackground-color$layer-hover *
text-color$text-primary
Focusborder$focus
Selectedbackground-color$layer-selected *
text-color$text-primary
border-bottom$border-subtle-selected*
svg$icon-primary
Selected + hoverbackground-color$layer-selected-hover *
Expandedbackground-color$layer *
svg$icon-primary
Zebrabackground-color$layer-accent *

* Denotes a contextual color token that will change values based on the layer it is placed on.

Data table rows

Toolbar

ElementPropertyColor token
Toolbarbackground-color$layer *
Icon buttonSee ghost button
ButtonSee primary button

* Denotes a contextual color token that will change values based on the layer it is placed on.

Data table toolbar

Batch action bar

ElementPropertyColor token
Barbackground-color$background-brand
Summarytext-color$text-on-color
ButtonSee primary button
data table batch actions

Typography

ElementFont-size (px/rem)Font-weightType token
Table header20 / 1.25Regular / 400$heading-03
Column header14 / 0.875SemiBold / 600$heading-compact-01
Row text14 / 0.875Regular / 400$body-compact-01

Structure

Tables are a configurable and customizable component. Designers can pick and choose certain elements and interactions. The basic table style is the required base from which tables can be developed. Basic tables are composed of a header row followed by rows of data below.

ElementPropertypx / remSpacing token
Table headermargin-top16 / 1$spacing-05
margin-bottom24 / 1.5$spacing-06
padding left, padding right16 / 1$spacing-05
Sort iconpadding8 / 0.5$spacing-03
Before and after textpadding-left, padding-right16 / 1$spacing-05
Data table structure

Structure and spacing measurements for a basic data table | px/rem

Columns

Column widths can vary by content and only require a minimum spacing between columns. Tables require three or more columns.

Spacing betweenPropertypx / remSpacing token
Columnspadding16 /1$spacing-05
Data table column measurements

Structure and spacing measurements for columns in a data table | px/rem

Rows

Row sizes are customizable. The column header row should always match the row size of the table. Column header and row text is always centered in the row with the expecption of the extra large which is offset by padding-top: 16px. Extra large row heights are only recommended if your data is expected to have two lines of content in a single row.

SizeHeight (px / rem)
Extra small (xs)24 / 1.5
Small (sm)32 / 2
Medium (md)40 / 2.5
Large (lg)48 / 3
Extra large (xl)64 / 4
data table row sizes

Enhancements

After the simple table structure, tables can be enhanced by adding any of the following: selectable rows, expanding rows, nested tables, row menus, table batch actions, overall table menu, and/or table filter.

ElementPropertypx / remSpacing token
Checkboxheight, width20 / 1.25
Radio buttonheight, width20 / 1.25
Overflow menuheight40 / 2.5
Chevron iconsvg16 / 1
Row: expandablepadding-top, padding-right16 / 1$spacing-05
padding-left48 / 3$spacing-09
padding-bottom24 / 1.5$spacing-06
Data table expanded row measurements

Structure and spacing measurements for expanded row | px/rem

Toolbar

The large 48px toolbar is paired with the extra large and large row sizes. The small toolbar is paired with the small and extra small row sizes.

ElementPropertypx / remSpacing token
Toolbar: largeheight, width48 / 3
margin-top, margin-bottom16 / 1$spacing-05
Toolbar: smallheight, width32 / 2
margin-top, margin-bottom8 / 0.5$spacing-03
Data table toolbar measurements

Structure and spacing measurements for toolbar | px/rem

Batch action bar

The large 48px batch action bar is paired with the extra large and large row sizes. The small batch action bar is paired with the small and extra small row sizes.

ElementPropertypx / remSpacing token
Batch action bar: largeheight48 / 3
Buttonsize48px
Batch action bar: smallheight32 / 2
Buttonsize32px
Before and after textpadding-left, padding-right16 / 1$spacing-05
Button: iconpadding-right16 / 1$spacing-05
Data table batch action bar measurements

Structure and spacing measurements for batch action bar | px/rem