Skip to main content


.bx--data-table-v2 tbodybackground-color$ui-01#ffffff
.bx--data-table-v2--zebra tbody tr:nth-child(even)background-color$ui-02#f4f7fb
.bx--data-table-v2 theadbackground-color$ui-02#f4f7fb
.bx--data-table-v2 tr:hover tdbackground-color$hover-row#5596e6 at 10% opacity
tr.bx--expandable-row-v2 > td:first-of-type:beforebackground-color$brand-01#3d70b2
.bx--data-table-v2 th:first-of-type
.bx--data-table-v2 th:last-of-type
.bx--data-table-v2 th
border-top, border-right, border-left$ui-04#8897a2
.bx--data-table-v2 tr:hover tdborder$brand-01#3d70b2
.bx--responsive-table td
.bx--responsive-table th

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

Background colors

Data tables are built to be accessible against two $ui-01 and $ui-02:

Data table: background colors

Data table on ui-01 vs ui-02


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

ClassFont-size (px/rem)Font-weightType style
bx--data-table-v2-header18 / 1.125Semibold / 600.bx--type-delta
bx--table-header-label14 / 0.875Semibold / 600.bx--type-zeta
.bx--data-table-v2 td14 / 0.875Normal / 400-


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.

Compact and Tall are designer and developer preferences. 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

Simple data table

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 trheight48 / 3-
.bx--table-expand-v2__svgheight16 / 1-
.bx--checkbox-appearanceheight, width18 / 1.125-

Data table

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--data-table-v2-headermargin-bottom16 / 1$spacing-md
.bx--table-sort-v2__iconpadding2 / 0.125$spacing-3xs
.bx--data-table-v2 td:first-of-type
.bx--data-table-v2 td:last-of-type
padding-left, padding-right24 / 1.5$spacing-lg
Spacing for a basic Data Table

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

Spacing betweenPropertypx/remSpacing token
Columnspadding≥ 24 / 1.5$spacing-lg


ClassPropertypx/remSpacing token
.bx--toolbar-action_iconheight16 / 1$spacing-md
.bx--toolbar > divmargin-left, margin-right4 / 0.25$spacing-2xs
.bx--toolbarmargin-top, margin-bottom16 / 1$spacing-md

Structure and spacing measurements for toolbar icons | px / rem