Skip to main contentCarbon Design System

Data table

Color

ClassPropertyColor token
.bx--data-table-headerbackground-color$ui-01
.bx--data-table-headertext color$text-01
.bx--data-table theadbackground-color$ui-03
.bx--table-header-labeltext color$text-01
.bx--data-table tbodybackground-color$ui-01
.bx--data-table tdtext color$text-02
Basic data table

Enhancements

ClassPropertyColor token
.bx--data-table--zebrabackground-color–
.bx--expandable-row-v2background-color$ui-01
.bx--table-sort-v2__icon
.bx--table-expand-v2__svg
.bx--overflow-menu__icon
fill$icon-01
.bx--batch-actions--activebackground-color$interactive-01
.bx--batch-summary__parabackground-color$text-04
.bx--batch-actions .bx--btntext-color$text-04
.bx--overflow-menu-optionstext-color$text-02
.bx--overflow-menu-optionsbackground color$ui-02

Interactive states

ClassPropertyColor token
.bx--data-table tr:hover tdbackground-color$hover-ui
.bx--data-table td:hovertext color$text-01
.bx--data-table td:focusborder$focus
.bx--data-table--selectedbackground-color$selected-ui
.bx--data-table--selected tdtext color$text-01
.bx--data-table--selected:hoverbackground-color$hover-selected-ui
.bx--batch-actions .bx--btn:hoverbackground color$hover-primary
data table states

Typography

ClassFont-size (px/rem)Font-weightType token
.bx--data-table-header20 / 1.25Regular / 400$productive-heading-03
.bx--table-header-label14 / 0.875SemiBold / 600$productive-heading-01
.bx--data-table td14 / 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.

ClassPropertypx / remSpacing token
.bx--data-table-headermargin-top16 / 1$spacing-05
.bx--data-table-headermargin-bottom24 / 1.5$spacing-06
.bx--data-table-headerpadding left, padding right16 / 1$spacing-05
.bx--table-sort-v2__iconpadding8 / 0.5$spacing-03
.bx--data-table td:first-of-type
.bx--data-table td:last-of-type
padding-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 .bx--data-table thead 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.

ClassSizeRow Height (px/rem)
.bx--data-table--compactCompact24 / 1.5
.bx--data-table--shortShort32 / 2
.bx--data-table trDefault48 / 3
.bx--data-table--tallTall64 / 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.

ClassPropertypx / remSpacing token
.bx--checkbox-appearanceheight, width20 / 1.25–
.bx--radio-button__appearanceheight, width20 / 1.25–
.bx--overflow-menu-optionsheight40 / 2.5–
.bx--table-expand__svgicon16 / 1–
.bx--expandable-rowpadding-top, padding-right16 / 1$spacing-05
.bx--expandable-rowpadding-left48 / 3$spacing-09
.bx--expandable-rowpadding-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.

ClassPropertypx/remSpacing token
.bx--toolbar-actionheight, width48 / 3–
.bx--toolbar-action--smallheight, width32 / 2–
.bx--toolbarmargin-top, margin-bottom16 / 1$spacing-05
.bx--toolbar--smallmargin-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.

ClassPropertypx/remSpacing token
.bx--batch-actionsheight48 / 3–
.bx--batch-actions--smallheight32 / 2–
.bx--batch-actionspadding-left, padding-right16 / 1$spacing-05
.bx--btndefault size48px–
.bx--btnsmall size32px–
.bx--btn__iconpadding-right16/1$spacing-05
Data table batch action bar measurements

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