Skip to main contentCarbon Design System

Data table

Color

ElementPropertyColor token
Table headerbackground-color$layer
Titletext-color$text-primary
Descriptiontext-color$text-secondary
Column headerbackground-color$layer-accent
text-color$text-primary
Rowbackground-color$layer
text-color$text-secondary
border-bottom$border-subtle
Basic data table

Enhancements

ElementPropertyColor token
Zebra rowbackground-color$layer-accent
Expanded rowbackground-color$layer
Sort iconsvg$icon-primary
Chevron iconsvg$icon-primary
Overflow iconsvg$icon-primary
Batch action barbackground-color$background-brand
text-color$text-on-color
svgicon-on-color
Overflow menubackground-color$layer: inline theme
text-color$text-secondary: inline theme

Interactive states

ElementPropertyColor token
Row: hoverbackground-color$layer-hover
text-color$text-primary
Row: focusborder$focus
Row: selectedbackground-color$layer-selected
text-color$text-primary
Row: selected + hoverbackground-color$layer-selected-hover
Batch action bar: buttonSee ghost button
data table states

Typography

ElementFont-size (px / rem)Font-weightType token
Table header20 / 1.25Regular / 400$productive-heading-03
Column header14 / 0.875SemiBold / 600$productive-heading-01
Row text14 / 0.875Regular / 400$body-short-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. Tall row heights are only recommended if your data is expected to have 2 lines of content in a single row.

ElementPropertySizepx / rem
RowheightCompact24 / 1.5
heightShort32 / 2
heightDefault48 / 3
heightTall64 / 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 default 48px toolbar is paired with the tall and default row sizes. The small toolbar is paired with the short and compact 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 default 48px batch action bar is paired with the tall and default row sizes. The small batch action bar is paired with the short and compact 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