Table

Data table with sorting, filtering, and column resize plugins.

Examples

Default

Task	Owner	Status	Budget	Due
Design review	Ada Lovelace	In progress	18200	Jun 12
Billing migration	Grace Hopper	Ready	9600	Jun 17
QA pass	Katherine Johnson	Blocked	13400	Jun 21
Docs refresh	Hedy Lamarr	Done	7200	Jun 24
Alert tuning	Alan Turing	In progress	15100	Jun 27
Research synthesis	Mary Jackson	Ready	5400	Jul 2

<Table columns={columns} data={data} idKey="id" />

Empty State

Task	Owner	Status	Budget	Due
No tasks found Try adjusting filters or creating a new task.

<Table
  columns={columns}
  data={[]}
  emptyState={
    <EmptyState
      description="Try adjusting filters or creating a new task."
      isCompact
      title="No tasks found"
    />
  }
/>

Default Empty State

Task	Owner	Status	Budget	Due
No data

<Table columns={columns} data={[]} />

Density

Task	Owner	Status	Budget	Due
Design review	Ada Lovelace	In progress	18200	Jun 12
Billing migration	Grace Hopper	Ready	9600	Jun 17

Task	Owner	Status	Budget	Due
Design review	Ada Lovelace	In progress	18200	Jun 12
Billing migration	Grace Hopper	Ready	9600	Jun 17

Task	Owner	Status	Budget	Due
Design review	Ada Lovelace	In progress	18200	Jun 12
Billing migration	Grace Hopper	Ready	9600	Jun 17

<DensityStory />

Dividers

Task	Owner	Status	Budget	Due
Design review	Ada Lovelace	In progress	18200	Jun 12
Billing migration	Grace Hopper	Ready	9600	Jun 17

Task	Owner	Status	Budget	Due
Design review	Ada Lovelace	In progress	18200	Jun 12
Billing migration	Grace Hopper	Ready	9600	Jun 17

Task	Owner	Status	Budget	Due
Design review	Ada Lovelace	In progress	18200	Jun 12
Billing migration	Grace Hopper	Ready	9600	Jun 17

Task	Owner	Status	Budget	Due
Design review	Ada Lovelace	In progress	18200	Jun 12
Billing migration	Grace Hopper	Ready	9600	Jun 17

<DividersStory />

Striped

Task	Owner	Status	Budget	Due
Design review	Ada Lovelace	In progress	18200	Jun 12
Billing migration	Grace Hopper	Ready	9600	Jun 17
QA pass	Katherine Johnson	Blocked	13400	Jun 21
Docs refresh	Hedy Lamarr	Done	7200	Jun 24
Alert tuning	Alan Turing	In progress	15100	Jun 27
Research synthesis	Mary Jackson	Ready	5400	Jul 2

<Table columns={columns} data={data} idKey="id" isStriped />

Hover

Task	Owner	Status	Budget	Due
Design review	Ada Lovelace	In progress	18200	Jun 12
Billing migration	Grace Hopper	Ready	9600	Jun 17
QA pass	Katherine Johnson	Blocked	13400	Jun 21
Docs refresh	Hedy Lamarr	Done	7200	Jun 24
Alert tuning	Alan Turing	In progress	15100	Jun 27
Research synthesis	Mary Jackson	Ready	5400	Jul 2

<Table columns={columns} data={data} hasHover idKey="id" />

Hover With Sections

Plan	Status
Starter	Ready
Growth	Ready
Enterprise	Draft
3 plans

<Table hasHover isStriped>
  <TableHeader>
    <TableRow>
      <TableHeaderCell>Plan</TableHeaderCell>
      <TableHeaderCell>Status</TableHeaderCell>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Starter</TableCell>
      <TableCell>Ready</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Growth</TableCell>
      <TableCell>Ready</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Enterprise</TableCell>
      <TableCell>Draft</TableCell>
    </TableRow>
  </TableBody>
  <TableFooter>
    <TableRow>
      <TableCell colSpan={2}>3 plans</TableCell>
    </TableRow>
  </TableFooter>
</Table>

Text Overflow

Task	Notes	Owner
Design review	UnbrokenIdentifier_0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ with surrounding copy to compare truncation and wrapping.	Ada Lovelace
Billing migration	Move remaining accounts to the new billing pipeline after validating invoice previews with support.	Grace Hopper
QA pass	Run the cross-browser verification pass and log issues against the release checklist.	Katherine Johnson

Task	Notes	Owner
Design review	UnbrokenIdentifier_0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ with surrounding copy to compare truncation and wrapping.	Ada Lovelace
Billing migration	Move remaining accounts to the new billing pipeline after validating invoice previews with support.	Grace Hopper
QA pass	Run the cross-browser verification pass and log issues against the release checklist.	Katherine Johnson

<TextOverflowStory />

Vertical Align

Task	Notes	Owner
Design review	Prepare the final handoff package with annotated screenshots, links to key decisions, and open follow-up items.	Ada Lovelace
Billing migration	Move remaining accounts to the new billing pipeline after validating invoice previews with support.	Grace Hopper

Task	Notes	Owner
Design review	Prepare the final handoff package with annotated screenshots, links to key decisions, and open follow-up items.	Ada Lovelace
Billing migration	Move remaining accounts to the new billing pipeline after validating invoice previews with support.	Grace Hopper

Task	Notes	Owner
Design review	Prepare the final handoff package with annotated screenshots, links to key decisions, and open follow-up items.	Ada Lovelace
Billing migration	Move remaining accounts to the new billing pipeline after validating invoice previews with support.	Grace Hopper

<VerticalAlignStory />

Column Widths

Fixed 160px	2fr min 180px	1fr min 120px	Fixed 96px
Design review	Prepare the final handoff package with annotated screenshots, links to key decisions, and open follow-up items.	Ada Lovelace	Jun 12
Billing migration	Move remaining accounts to the new billing pipeline after validating invoice previews with support.	Grace Hopper	Jun 17
QA pass	Run the cross-browser verification pass and log issues against the release checklist.	Katherine Johnson	Jun 21
Docs refresh	Refresh the administrator guide and add examples for importing historical project data.	Hedy Lamarr	Jun 24
Alert tuning	Tune noisy alert thresholds and group notifications by service owner for faster triage.	Alan Turing	Jun 27
Research synthesis	Interview workflow owners and summarize the strongest opportunities for dashboard consolidation.	Mary Jackson	Jul 2

<Table columns={widthColumns} data={data} idKey="id" />

Custom Cell Rendering

Task	Owner	Priority	Status
Design review	Ada Lovelace	High	In progress
Billing migration	Grace Hopper	Medium	Ready
QA pass	Katherine Johnson	High	Blocked
Docs refresh	Hedy Lamarr	Low	Done
Alert tuning	Alan Turing	Medium	In progress
Research synthesis	Mary Jackson	Low	Ready

<Table
  columns={[
    columns[0],
    columns[1],
    {
      header: 'Priority',
      key: 'priority',
      renderCell: item => (
        <Badge
          color={
            item.priority === 'High'
              ? 'error'
              : item.priority === 'Medium'
                ? 'warning'
                : 'neutral'
          }
          label={item.priority}
          size="lg"
        />
      ),
    },
    columns[2],
  ]}
  data={data}
  idKey="id"
/>

Auto Columns

Budget	Due	Id	Notes	Owner	Priority	Progress	Status	Task
18200	Jun 12	design	Prepare the final handoff package with annotated screenshots, links to key decisions, and open follow-up items.	Ada Lovelace	High	70%	In progress	Design review
9600	Jun 17	migration	Move remaining accounts to the new billing pipeline after validating invoice previews with support.	Grace Hopper	Medium	45%	Ready	Billing migration
13400	Jun 21	qa	Run the cross-browser verification pass and log issues against the release checklist.	Katherine Johnson	High	20%	Blocked	QA pass
7200	Jun 24	docs	Refresh the administrator guide and add examples for importing historical project data.	Hedy Lamarr	Low	100%	Done	Docs refresh

<Table data={data.slice(0, 4)} idKey="id" />

Children Mode

Plan	Status	Owner
Manual rows	Ready	Ada Lovelace
Rendered with table primitives.

<Table>
  <TableHeader>
    <TableRow>
      <TableHeaderCell>Plan</TableHeaderCell>
      <TableHeaderCell>Status</TableHeaderCell>
      <TableHeaderCell>Owner</TableHeaderCell>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Manual rows</TableCell>
      <TableCell>Ready</TableCell>
      <TableCell>Ada Lovelace</TableCell>
    </TableRow>
  </TableBody>
  <TableFooter>
    <TableRow>
      <TableCell colSpan={3}>Rendered with table primitives.</TableCell>
    </TableRow>
  </TableFooter>
</Table>

Sortable

Task	Owner	Status	Budget	Due
Design review	Ada Lovelace	In progress	18200	Jun 12
Billing migration	Grace Hopper	Ready	9600	Jun 17
QA pass	Katherine Johnson	Blocked	13400	Jun 21
Docs refresh	Hedy Lamarr	Done	7200	Jun 24
Alert tuning	Alan Turing	In progress	15100	Jun 27
Research synthesis	Mary Jackson	Ready	5400	Jul 2

<SortableStory />

Selection

Select all rows	Task	Owner	Status	Budget	Due
Select row	Design review	Ada Lovelace	In progress	18200	Jun 12
Select row	Billing migration	Grace Hopper	Ready	9600	Jun 17
Select row	QA pass	Katherine Johnson	Blocked	13400	Jun 21
	Docs refresh	Hedy Lamarr	Done	7200	Jun 24
Select row	Alert tuning	Alan Turing	In progress	15100	Jun 27
Select row	Research synthesis	Mary Jackson	Ready	5400	Jul 2

<SelectionStory />

Pagination

Go to previous page

123

Go to next page

Task	Owner	Status	Budget	Due
Design review	Ada Lovelace	In progress	18200	Jun 12
Billing migration	Grace Hopper	Ready	9600	Jun 17

Go to previous page

123

Go to next page

<PaginationStory />

Column Settings

Show budgetReorderReset

Task	Owner	Status	Due
Design review	Ada Lovelace	In progress	Jun 12
Billing migration	Grace Hopper	Ready	Jun 17
QA pass	Katherine Johnson	Blocked	Jun 21
Docs refresh	Hedy Lamarr	Done	Jun 24
Alert tuning	Alan Turing	In progress	Jun 27
Research synthesis	Mary Jackson	Ready	Jul 2

<ColumnSettingsStory />

Column Resize

Task	Owner	Status	Budget	Due
Design review	Ada Lovelace	In progress	18200	Jun 12
Billing migration	Grace Hopper	Ready	9600	Jun 17
QA pass	Katherine Johnson	Blocked	13400	Jun 21
Docs refresh	Hedy Lamarr	Done	7200	Jun 24
Alert tuning	Alan Turing	In progress	15100	Jun 27
Research synthesis	Mary Jackson	Ready	5400	Jul 2

<ColumnResizeStory />

Filtering

Task Filter Task Filter Task Reset Apply Close popover	Owner Filter Owner Filter Owner Reset Apply Close popover	Status Filter Status Filter Status All Blocked Done In progress Ready Reset Apply Close popover	Budget	Due
Design review	Ada Lovelace	In progress	18200	Jun 12
Billing migration	Grace Hopper	Ready	9600	Jun 17
QA pass	Katherine Johnson	Blocked	13400	Jun 21
Docs refresh	Hedy Lamarr	Done	7200	Jun 24
Alert tuning	Alan Turing	In progress	15100	Jun 27
Research synthesis	Mary Jackson	Ready	5400	Jul 2

<FilteringStory />

Inline Filtering

Task Filter Task	Owner Filter Owner	Status Filter Status All Blocked Done In progress Ready	Budget	Due
Design review	Ada Lovelace	In progress	18200	Jun 12
Billing migration	Grace Hopper	Ready	9600	Jun 17
QA pass	Katherine Johnson	Blocked	13400	Jun 21
Docs refresh	Hedy Lamarr	Done	7200	Jun 24
Alert tuning	Alan Turing	In progress	15100	Jun 27
Research synthesis	Mary Jackson	Ready	5400	Jul 2

<InlineFilteringStory />

Combined Plugins

Select all rows	Task Filter Task Filter Task Reset Apply Close popover	Owner Filter Owner Filter Owner Reset Apply Close popover	Status Filter Status Filter Status All Blocked Done In progress Ready Reset Apply Close popover	Budget	Due
Select row	Research synthesis	Mary Jackson	Ready	5400	Jul 2
Select row	Design review	Ada Lovelace	In progress	18200	Jun 12
Select row	Billing migration	Grace Hopper	Ready	9600	Jun 17

Go to previous page

Page 1 of 2

Go to next page

<CombinedPluginsStory />

API

Table

Prop	Type	Default	Description
children	ReactNode	—	Table primitives rendered instead of data-driven content. When provided, columns/data are ignored and the children are rendered as-is.
className	string	—	Additional CSS class names applied to the table element.
columns	TableColumn<T>[]	—	Column definitions. When omitted, columns are inferred from data.
data	T[]	—	Row data rendered into the table body.
data-testid	string	—	Test ID applied to the table element.
density	"compact" | "balanced" | "spacious"	'balanced'	Spacing density for rows and cells.
dividers	"none" | "grid" | "columns" | "rows"	'rows'	Which divider lines to show between cells.
emptyState	ReactNode	—	Content shown when data is an empty array. Omit for the default empty state; pass null to render nothing.
hasHover	boolean	false	Whether rows highlight on hover.
idKey	(keyof T & string) | ((item: T) => number | string)	—	Stable row identity, used as the React key for each body row.
isStriped	boolean	false	Whether alternating rows have a subtle background.
label	string	'Table'	Name of the table, used to label its horizontal scroll region.
plugins	Record<string, TablePlugin<T>> | TablePlugin<T>[]	—	Plugin map or array that extends table behavior.
ref	Ref<HTMLTableElement>	—	Ref forwarded to the table element.
style	CSSProperties	—	Inline styles applied to the table element.
tableProps	HTMLAttributes<HTMLTableElement>	—	Extra HTML attributes spread onto the table element.
textOverflow	"wrap" | "truncate"	'wrap'	How overflowing cell text is handled.
verticalAlign	"top" | "bottom" | "middle"	'middle'	Vertical alignment of cell content.

TableBody

Wraps table body rows in a `<tbody>` element.

Prop	Type	Default	Description
children*	ReactNode	—	Table row elements rendered inside the body.
className	string	—	Additional CSS class names applied to the tbody.
data-testid	string	—	Test ID applied to the tbody.
ref	Ref<HTMLTableSectionElement>	—	Ref forwarded to the tbody element.
style	CSSProperties	—	Inline styles applied to the tbody.

TableCell

Table data cell with density, alignment, and divider styling from context.

Prop	Type	Default	Description
children	ReactNode	—	Cell content.
className	string	—	Additional CSS class names applied to the td.
colSpan	number	—	Number of columns the cell spans.
data-testid	string	—	Test ID applied to the td.
headers	string	—	Space-separated list of header cell IDs this cell relates to.
ref	Ref<HTMLTableCellElement>	—	Ref forwarded to the td element.
rowSpan	number	—	Number of rows the cell spans.
scope	'col' | 'colgroup' | 'row' | 'rowgroup'	—	Scope of the cell when used as a header-like td.
style	CSSProperties	—	Inline styles applied to the td.

TableFooter

Wraps table footer rows in a `<tfoot>` element. Rows rendered inside opt out of the table's hover and striping styling.

Prop	Type	Default	Description
children*	ReactNode	—	Footer row elements rendered inside the tfoot.
className	string	—	Additional CSS class names applied to the tfoot.
data-testid	string	—	Test ID applied to the tfoot.
ref	Ref<HTMLTableSectionElement>	—	Ref forwarded to the tfoot element.
style	CSSProperties	—	Inline styles applied to the tfoot.

TableHeader

Wraps table header rows in a `<thead>` element. Rows rendered inside opt out of the table's hover and striping styling.

Prop	Type	Default	Description
children*	ReactNode	—	Header row elements rendered inside the thead.
className	string	—	Additional CSS class names applied to the thead.
data-testid	string	—	Test ID applied to the thead.
ref	Ref<HTMLTableSectionElement>	—	Ref forwarded to the thead element.
style	CSSProperties	—	Inline styles applied to the thead.

TableHeaderCell

Table header cell with density and divider styling from context.

Prop	Type	Default	Description
children	ReactNode	—	Header cell content.
className	string	—	Additional CSS class names applied to the th.
data-testid	string	—	Test ID applied to the th.
ref	Ref<HTMLTableCellElement>	—	Ref forwarded to the th element.
scope	'col' | 'colgroup' | 'row' | 'rowgroup'	'col'	Scope of the header cell.
style	CSSProperties	—	Inline styles applied to the th.

TableRow

Table row with hover and striped styling from context. Header and footer rows are not interactive, so they render without that styling even when the surrounding table enables it.

Prop	Type	Default	Description
children*	ReactNode	—	Cell elements rendered inside the row.
className	string	—	Additional CSS class names applied to the tr.
data-testid	string	—	Test ID applied to the tr.
ref	Ref<HTMLTableRowElement>	—	Ref forwarded to the tr element.
style	CSSProperties	—	Inline styles applied to the tr.