DataTable

States

State	Support	Visual change	Tokens
Default	Yes	Same as Table: transparent header with a darker rule under it, row divider	table-header-background, table-header-border, table-border
Hover	Row (hoverable, on by default)	The row is tinted; no lift	table-row-background-hovered
Selected	Row	Selected background, data-selected, checkbox checked	table-row-background-selected
Sorted	Header	Arrow icon; turns half a turn when descending	icon-size-xs
Header button pressed	Header	Scales to 97 %	motion-press-scale
Focus	Sort button, row open button, checkboxes, scroll region	2 px focus outline, 2 px away; inside the edge on the scroll region	color-focus-ring, border-width-focus, focus-offset
Loading	status="loading"	Five skeleton rows, aria-busy	color-surface-sunken
Empty, filtered-empty, error	status	A centred message and an optional action button	color-text-subtle
Disabled	Select all (with no data)	The checkbox is disabled	-

Measurements

Property	Value	Token
Cell inline padding	8 px; 0 at the end of a checkbox cell	table-cell-padding-inline
Cell block padding, compact	4 px (rows at least 32 px)	table-cell-padding-block-compact
Cell block padding, standard (default)	8 px (rows at least 40 px)	table-cell-padding-block-standard
Cell block padding, comfortable	12 px (rows at least 48 px)	table-cell-padding-block-comfortable
Header row height, standard	40 px	table-header-height
Row height (virtualisation estimate), compact / standard / comfortable	32 px / 40 px / 48 px	-
Sort icon	12 px	icon-size-xs
Actions column	Sticky at the end of the row	-
Skeleton bar	12 px high, at most 160 px wide	space-lg
Column panel	At least 192 px wide, 16 px padding; the shared popup surface: hairline edge, popup shadow, 10 px corners	space-xl, color-border-overlay, shadow-popup, popover-radius
Gap between parts	8 px	space-md
Pinned column	Page surface fill (header cell included), with a 1 px line in the table rule colour on the edge toward the scrolling columns	color-surface-default, table-border
Expand button	24 px, 16 px icon, 6 px corners	button-height-xs, icon-size-sm, menu-item-radius
Expanded detail row	Layer 1 surface	color-surface-layer-1

Tokens

DataTable adds no tokens; it uses the table.* tokens of Table. Values follow the selected brand.

Token	Sample	Light mode	Dark mode
--bigbang-table-header-background		rgba(0, 0, 0, 0)rgba(0, 0, 0, 0)rgba(0, 0, 0, 0)	rgba(0, 0, 0, 0)rgba(0, 0, 0, 0)rgba(0, 0, 0, 0)
--bigbang-table-header-foreground		#404040#404040#404040	#d4d4d4#d4d4d4#d4d4d4
--bigbang-table-row-background-hovered		#f5f5f5#f5f5f5#f5f5f5	#303030#303030#303030
--bigbang-table-row-background-selected		#edf5f8#ededed#ededed	#092932#404040#404040
--bigbang-table-border		#ededed#ededed#ededed	#303030#303030#303030
--bigbang-table-cell-padding-inline		8px8px8px	8px8px8px
--bigbang-table-cell-padding-block-compact		4px4px4px	4px4px4px
--bigbang-table-cell-padding-block-standard		8px8px8px	8px8px8px
--bigbang-table-header-height		40px40px40px	40px40px40px
--bigbang-table-cell-padding-block-comfortable		12px12px12px	12px12px12px
--bigbang-icon-size-xs		12px12px12px	12px12px12px
--bigbang-color-focus-ring		#146d83#737373#737373	#77bacf#8c8c8c#8c8c8c
--bigbang-motion-press-scale		0.970.970.97	0.970.970.97

Motion and interaction

Interaction	Motion	Reduced motion
Sort button press	scale 1 → 0.97, motion-press-duration (70 ms) (motion.press)	Scale stays 1
Sort direction change	The arrow turns half a turn, motion-collapsible-icon-duration	No movement; the arrow changes
Row hover	Background colour, motion-hover-duration (110 ms) (motion.hover); the row never lifts	Same; colour only
Selected row	The background colour changes at the same pace	Same
Skeleton	A highlight crosses three times, then stops (motion.skeleton)	No highlight
Column panel opening	A fade and a 4 px drop (motion.collapsible)	Short fade only
Data change	No animation on rows	Same

Values come from tokens; see Motion for details.