Color

ClassPropertyColor token
.bx--data-table-v2-headerbackground-color$ui-01
.bx--data-table-v2-headertext color$text-01
.bx--data-table-v2 theadbackground-color$ui-03
.bx--table-header-labeltext color$text-01
.bx--data-table-v2 tbodybackground-color$ui-01
.bx--data-table-v2 tdtext color$text-02
.bx--data-table-v2--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-v2 tr:hover tdbackground-color$hover-row
.bx--data-table-v2 td:hovertext color$text-01
.bx--data-table-v2 td:focusborder$focus
.bx--data-table-v2--selectedbackground-color$selected-ui
.bx--data-table-v2--selected tdtext color$text-01
.bx--data-table-v2--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

Column headers should be in title case. All other table text should be sentenced case.

ClassFont-size (px/rem)Font-weightType token
.bx--data-table-v2-header18 / 1.125Regular / 400$heading-03
.bx--table-header-label14 / 0.875SemiBold / 600$heading-01
.bx--data-table-v2 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-v2 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-v2--compactCompact24 / 1.5
.bx--data-table-v2--shortShort32 / 2
.bx--data-table-v2 trDefault48 / 3
.bx--data-table-v2--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-v2-headermargin-bottom16 / 1$spacing-05
.bx--table-sort-v2__iconpadding8 / 0.5$spacing-03
.bx--data-table-v2 td:first-of-type
.bx--data-table-v2 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