Table

Table is a compound component for semantic tabular data where native table structure matters more than grid-like keyboard interaction.

Storybook Source

Overview

Table styling is split across the root table element, row borders, and alignment-aware heading and data cells. The public contract is small and mostly semantic.

Public CSS Variables

Plan	Per month
Starter	$9
Team	$29

Variable	Value	Affects
Row separators.`TableRow`		No visible change in this state

Edit a value to try it in the demo. Hover a variable to outline what it changes; switch the preview state to see hover, pressed, focus, disabled and invalid variables. Click a name to copy it.

Part-Level Variables

Table: handles full-width and full-height layout flags.
TableRow: applies row borders through --border-color.
TableHeading: owns heading padding and alignment behavior.
TableData: owns cell padding and alignment behavior.

State And Variant Interaction

dataAlign changes both heading and data cell alignment.
edgePadded={false} removes first and last cell edge padding to align with surrounding layout.
fullWidth and fullHeight affect layout but do not change the semantic structure.

Examples

.brandTable {
  --border-color: var(--separator-opaque);
}

.compactTable td,
.compactTable th {
  padding: var(--spacing-4);
}

Do Not Override

Do not remove row separators without checking scanability.
Do not rely only on visual alignment if semantic heading structure is already weak.
Do not force table styling into grid-like interaction semantics that the component does not own.