Table

A data display component designed to structure structured, multi-column datasets inside rows and cells.

#	Header	Header	Header
1	Cell 1	Cell 2	Cell 3
2	Cell 4	Cell 5	Cell 6

Striped Rows

Use the table-striped or table-striped-even class to enable striped rows.

#	Header	Header	Header
1	Cell 1	Cell 2	Cell 3
2	Cell 4	Cell 5	Cell 6
3	Cell 7	Cell 8	Cell 9

Striped Columns

Use the table-striped-columns or table-striped-columns-odd class to enable striped columns.

#	Header	Header	Header
1	Cell 1	Cell 2	Cell 3
2	Cell 4	Cell 5	Cell 6
3	Cell 7	Cell 8	Cell 9

Bordered Table

#	Header	Header	Header
1	Cell 1	Cell 2	Cell 3
2	Cell 4	Cell 5	Cell 6

Column Bordered Table

#	Header	Header	Header
1	Cell 1	Cell 2	Cell 3
2	Cell 4	Cell 5	Cell 6

Full Bordered Table

#	Header	Header	Header
1	Cell 1	Cell 2	Cell 3
2	Cell 4	Cell 5	Cell 6

Borderless Table

#	Header	Header	Header
1	Cell 1	Cell 2	Cell 3
2	Cell 4	Cell 5	Cell 6

Interactive Table

Use the interactive class to enable interaction with the table. Refer to the Interaction section for more information on interactive variants.

#	Header	Header	Header
1	Cell 1	Cell 2	Cell 3
2	Cell 4	Cell 5	Cell 6

Sizes

Use the table-{size} class to control the component size.

Size values can include:smmd.

For more information on all available sizing utilities, visit Tailwind

#	Header	Header	Header
1	Cell 1	Cell 2	Cell 3
2	Cell 4	Cell 5	Cell 6

#	Header	Header	Header
1	Cell 1	Cell 2	Cell 3
2	Cell 4	Cell 5	Cell 6

Variants

Use the variant and palette classes to control the appereance of the component.

Variant values can include solidoutlinesubtlelinkplain.
Color palettes can include primaryneutral. For extra palettes such as warning error and more, refer to the Colors section.

Header
Cell

Header
Cell

Header
Cell

Header
Cell

Header
Cell

Header
Cell

Header
Cell

Header
Cell

Header
Cell

Header
Cell

Customizing

globals.css


:root {
  --ex-table-font-size-sm: var(--text-xs);
  --ex-table-font-size-md: var(--text-sm);
 
  --ex-table-striped-order: odd;
  --ex-table-striped-columns-order: even;
 
  --ex-table-cell-px-sm: calc(var(--spacing) * 3);
  --ex-table-cell-px-md: calc(var(--spacing) * 4);
 
  --ex-table-cell-py-sm: calc(var(--spacing) * 3);
  --ex-table-cell-py-md: calc(var(--spacing) * 4);
 
  --ex-table-caption-font-size-sm: var(--text-2xs);
  --ex-table-caption-font-size-md: var(--text-xs);
 
  --ex-table-caption-font-weight: var(--font-weight-normal);
  --ex-table-caption-opacity: var(--ex-options-opacity-muted);
 
  --ex-table-header-font-weight: var(--font-weight-normal);
}

API

Table

Element	Selector
`Table`	`.ex-table`

Prop	Type	Default
`as`	`ElementType`	`table`
`asChild`	`boolean`	`false`

Table Caption

Element	Selector
`Table.Caption`	`.ex-table-caption`

Prop	Type	Default
`as`	`ElementType`	`caption`
`asChild`	`boolean`	`false`

Table Head

Element	Selector
`Table.Head`	`.ex-table-head`

Prop	Type	Default
`as`	`ElementType`	`thead`
`asChild`	`boolean`	`false`

Table Body

Element	Selector
`Table.Body`	`.ex-table-body`

Prop	Type	Default
`as`	`ElementType`	`tbody`
`asChild`	`boolean`	`false`

Table Foot

Element	Selector
`Table.Foot`	`.ex-table-foot`

Prop	Type	Default
`as`	`ElementType`	`tfoot`
`asChild`	`boolean`	`false`

Table Header

Element	Selector
`Table.Header`	`.ex-table-header`

Prop	Type	Default
`as`	`ElementType`	`th`
`asChild`	`boolean`	`false`

Table Row

Element	Selector
`Table.Row`	`.ex-table-row`

Prop	Type	Default
`as`	`ElementType`	`tr`
`asChild`	`boolean`	`false`

Table Cell

Element	Selector
`Table.Cell`	`.ex-table-cell`

Prop	Type	Default
`as`	`ElementType`	`td`
`asChild`	`boolean`	`false`