Table

A responsive table component

SSR mode

Examples

Name	Email	Role	Status
Alice Johnson	alice@example.com	Admin	Active
Bob Smith	bob@example.com	Editor	Inactive
Carol White	carol@example.com	Viewer	Active
Dan Miller	dan@example.com	Editor	Active
Eve Davis	eve@example.com	Viewer	Inactive

Small

Name	Role
Alice	Admin
Bob	Editor

Medium (default)

Name	Role
Alice	Admin
Bob	Editor

Large

Name	Role
Alice	Admin
Bob	Editor

Name	Email	Role	Status
Alice Johnson	alice@example.com	Admin	Active
Bob Smith	bob@example.com	Editor	Active
Carol White	carol@example.com	Viewer	Inactive
Dan Miller	dan@example.com	Editor	Active
Eve Davis	eve@example.com	Viewer	Inactive
Frank Lee	frank@example.com	Admin	Active
Grace Kim	grace@example.com	Editor	Active
Henry Park	henry@example.com	Viewer	Inactive
Irene Cho	irene@example.com	Editor	Active
Jake Torres	jake@example.com	Admin	Active

Name	Email	Department	Location	Status
Alice Johnson	alice@example.com	Engineering	New York	Active
Bob Smith	bob@example.com	Marketing	San Francisco	Inactive
Carol White	carol@example.com	Design	London	Active
Dan Miller	dan@example.com	Sales	Chicago	Active
Eve Davis	eve@example.com	Support	Toronto	Inactive

The element family below can be composed together. Click an element to jump to its properties.

Element	Purpose
Table	Container that provides the scroll wrapper, `data-table-size` and a cascading `Table` reference for children. Use with `TableHeader` / `TableBody` / `TableFooter` plus `TableRow` / `TableHead` / `TableCell`.
TableHeader	Renders `<thead>`. Applies sticky-header styling automatically when the parent `Table` has `MaxHeight` set and `StickyHeader` is true.
TableBody	Renders `<tbody>` with row-border styling. Typically wraps a set of `TableRow` children.
TableFooter	Renders `<tfoot>` with muted background and top border, suitable for totals rows.
TableRow	Renders a `<tr>` with the default hover/selected styling.
TableHead	Renders a `<th>` with header typography. Pulls row-height padding from the parent `Table`'s `Size`.
TableCell	Renders a `<td>` with body typography. Pulls row-height padding from the parent `Table`'s `Size`.
TableCaption	Renders a `<caption>` beneath the table with muted styling. Optional.

Container that provides the scroll wrapper, data-table-size and a cascading Table reference for children. Use with TableHeader / TableBody / TableFooter plus TableRow / TableHead / TableCell.

Property	Type	Description
Size	TableSize	Row-height preset. Default: `TableSize.Md`. Other values: `Sm`, `Lg`.
StickyHeader	bool	When true (default) and `MaxHeight` is set, the `TableHeader` sticks to the top during scroll. Default: `true`.
MaxHeight	string?	Optional CSS height (e.g. `"300px"`) that turns the container into a vertically scrollable region and enables `StickyHeader`.
MaxWidth	string?	Optional CSS max-width that enables horizontal scrolling for pinned-column layouts.
Borders	bool	Toggles `border-separate border-spacing-0`. Default: `true`.
Rounded	bool	Toggles `rounded-xl`. Default: `true`.
ClassName	string?	Extra CSS classes appended to the inner `<table>`.
ContainerClassName	string?	Extra CSS classes appended to the outer scroll container.
ChildContent	RenderFragment?	The table's header, body, footer and rows.

Renders <thead>. Applies sticky-header styling automatically when the parent Table has MaxHeight set and StickyHeader is true.

Property	Type	Required	Description
ClassName	string?		Extra CSS classes appended to the `<thead>`.
ChildContent	RenderFragment?		One or more `TableRow` entries containing `TableHead` cells.

Renders <tbody> with row-border styling. Typically wraps a set of TableRow children.

Property	Type	Required	Description
ClassName	string?		Extra CSS classes appended to the `<tbody>`.
ChildContent	RenderFragment?		`TableRow` children.

Renders <tfoot> with muted background and top border, suitable for totals rows.

Property	Type	Required	Description
ClassName	string?		Extra CSS classes appended to the `<tfoot>`.
ChildContent	RenderFragment?		`TableRow` children for the footer.

Renders a <tr> with the default hover/selected styling.

Property	Type	Required	Description
ClassName	string?		Extra CSS classes appended to the `<tr>`.
ChildContent	RenderFragment?		`TableHead` or `TableCell` children.

Renders a <th> with header typography. Pulls row-height padding from the parent Table's Size.

Property	Type	Description
Pinned	bool	When true, the column pins to the left (`position: sticky`). Pair with `TableCell Pinned="true"` in each row's first cell. Default: `false`.
ClassName	string?	Extra CSS classes appended to the `<th>`.
ChildContent	RenderFragment?	Header text or inline markup.

Renders a <td> with body typography. Pulls row-height padding from the parent Table's Size.

Property	Type	Description
Pinned	bool	When true, the cell pins to the left (`position: sticky`). Use on the first cell of each row when the corresponding `TableHead` is pinned. Default: `false`.
ClassName	string?	Extra CSS classes appended to the `<td>`.
ChildContent	RenderFragment?	Cell content.

Renders a <caption> beneath the table with muted styling. Optional.

Property	Type	Required	Description
ClassName	string?		Extra CSS classes appended to the `<caption>`.
ChildContent	RenderFragment?		Caption text.