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

Interactive states

ClassPropertyColor token
.bx--data-table tr:hover tdbackground-color$hover-row
.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

Style options

Specific styling on the data table component can be toggled on/off based on user or team preference.

Row dividers, zebra striping, & table border

If zebra striping is turned off, you must have row dividers.

Data table: row styling

Data table with various row styling

Typography

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

Row sizes

Short and Default are offered as user preferences that can be accessed from the table settings menu.

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 styling

Data table: varying row sizes

Basics

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. At a minimum, tables require three or more columns.

Column widths can vary by content and only requires a minimum spacing between columns.

ClassPropertypx / remSpacing token
.bx--data-table-headermargin-bottom16 / 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

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--table-toolbarheight48 / 3
.bx--table-toolbar--smallheight32 / 2
.bx--table-expand-v2__svgheight16 / 1
.bx--checkbox-appearanceheight, width20 / 1.25

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

Spacing betweenPropertypx / remSpacing token
Columnspadding16 /1$spacing-05

Toolbar

ClassPropertypx/remSpacing token
.bx--toolbar-actionheight, width48 / 3
.bx--toolbarmargin-top, margin-bottom16 / 1$spacing-05
.bx--toolbar-action--smallheight, width32 / 2
.bx--toolbar--smallmargin-top, margin-bottom8 / 0.5$spacing-03

Structure and spacing measurements for toolbar icons | px / rem