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

function DensityStory() {
  return (
    <div style={{display: 'grid', gap: 24}}>
      <Table columns={columns} data={data.slice(0, 2)} density="compact" />
      <Table columns={columns} data={data.slice(0, 2)} density="balanced" />
      <Table columns={columns} data={data.slice(0, 2)} density="spacious" />
    </div>
  );
}

<DensityStory />

Dividers

Source	Cost
Compute	$18.00
Storage	$6.00
Total	$24.00

Source	Cost
Compute	$18.00
Storage	$6.00
Total	$24.00

Source	Cost
Compute	$18.00
Storage	$6.00
Total	$24.00

Source	Cost
Compute	$18.00
Storage	$6.00
Total	$24.00

function DividersStory() {
  const variants: TableDividers[] = ['rows', 'columns', 'grid', 'none'];
  return (
    <div style={{display: 'grid', gap: 24}}>
      {variants.map(variant => (
        <Table dividers={variant} key={variant} label={`${variant} dividers`}>
          <TableHeader>
            <TableRow>
              <TableHeaderCell>Source</TableHeaderCell>
              <TableHeaderCell>Cost</TableHeaderCell>
            </TableRow>
          </TableHeader>
          <TableBody>
            <TableRow>
              <TableCell>Compute</TableCell>
              <TableCell>$18.00</TableCell>
            </TableRow>
            <TableRow>
              <TableCell>Storage</TableCell>
              <TableCell>$6.00</TableCell>
            </TableRow>
          </TableBody>
          <TableFooter>
            <TableRow>
              <TableCell>Total</TableCell>
              <TableCell>$24.00</TableCell>
            </TableRow>
          </TableFooter>
        </Table>
      ))}
    </div>
  );
}

<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

function TextOverflowStory() {
  const overflowData = data.slice(0, 3).map((item, index) =>
    index === 0
      ? {
          ...item,
          notes:
            'UnbrokenIdentifier_0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ with surrounding copy to compare truncation and wrapping.',
        }
      : item,
  );

  return (
    <div style={{display: 'grid', gap: 24}}>
      <Table
        columns={longTextColumns}
        data={overflowData}
        textOverflow="truncate"
      />
      <Table
        columns={longTextColumns}
        data={overflowData}
        textOverflow="wrap"
      />
    </div>
  );
}

<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

function VerticalAlignStory() {
  return (
    <div style={{display: 'grid', gap: 24}}>
      <Table
        columns={longTextColumns}
        data={data.slice(0, 2)}
        verticalAlign="top"
      />
      <Table
        columns={longTextColumns}
        data={data.slice(0, 2)}
        verticalAlign="middle"
      />
      <Table
        columns={longTextColumns}
        data={data.slice(0, 2)}
        verticalAlign="bottom"
      />
    </div>
  );
}

<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>

Children mode / Minimum width

Workstream	Owner	Status	Next step
Documentation	Alex Morgan	Ready for review	Publish the migration guide and confirm that every example uses the stable API.
Accessibility	Sam Rivera	Follow-up needed	Recheck keyboard navigation at compact viewport sizes before the release candidate is tagged.

<div style={{maxWidth: '100%', width: '560px'}}>
  <Table
    label="Release readiness"
    style={{minWidth: '760px'}}
    verticalAlign="top">
    <TableHeader>
      <TableRow>
        <TableHeaderCell style={{width: '150px'}}>
          Workstream
        </TableHeaderCell>
        <TableHeaderCell style={{width: '130px'}}>Owner</TableHeaderCell>
        <TableHeaderCell style={{width: '170px'}}>Status</TableHeaderCell>
        <TableHeaderCell style={{width: '310px'}}>
          Next step
        </TableHeaderCell>
      </TableRow>
    </TableHeader>
    <TableBody>
      <TableRow>
        <TableCell>Documentation</TableCell>
        <TableCell>Alex Morgan</TableCell>
        <TableCell>
          <Badge color="success" label="Ready for review" size="lg" />
        </TableCell>
        <TableCell>
          Publish the migration guide and confirm that every example uses
          the stable API.
        </TableCell>
      </TableRow>
      <TableRow>
        <TableCell>Accessibility</TableCell>
        <TableCell>Sam Rivera</TableCell>
        <TableCell>
          <Badge color="warning" label="Follow-up needed" size="lg" />
        </TableCell>
        <TableCell>
          Recheck keyboard navigation at compact viewport sizes before the
          release candidate is tagged.
        </TableCell>
      </TableRow>
    </TableBody>
  </Table>
</div>

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

function SortableStory() {
  const sortable = useTableSortableState<TaskRow, string>({
    data,
    isMultiSortEnabled: true,
  });
  const sortPlugin = useTableSortable<TaskRow>(sortable.sortConfig);
  return (
    <Table
      columns={columns}
      data={sortable.sortedData}
      idKey="id"
      plugins={{sortPlugin}}
    />
  );
}

<SortableStory />

Sortable / Alignment

Task (start)	Progress (center)	Budget (end)
Design review	70%	18200
Alert tuning	55%	15100
QA pass	20%	13400
Billing migration	45%	9600
Docs refresh	100%	7200
Research synthesis	10%	5400

function SortableAlignmentStory({
  direction,
}: {
  direction: 'ltr' | 'rtl';
}): React.JSX.Element {
  const sortable = useTableSortableState<TaskRow, string>({
    data,
    defaultSort: [{direction: 'descending', sortKey: 'budget'}],
    isMultiSortEnabled: true,
  });
  const sortPlugin = useTableSortable<TaskRow>(sortable.sortConfig);
  return (
    <div dir={direction}>
      <Table
        columns={alignedSortableColumns}
        data={sortable.sortedData}
        idKey="id"
        plugins={{sortPlugin}}
      />
    </div>
  );
}

<SortableAlignmentStory direction="ltr" />

Sortable / Alignment RTL

Task (start)	Progress (center)	Budget (end)
Design review	70%	18200
Alert tuning	55%	15100
QA pass	20%	13400
Billing migration	45%	9600
Docs refresh	100%	7200
Research synthesis	10%	5400

function SortableAlignmentStory({
  direction,
}: {
  direction: 'ltr' | 'rtl';
}): React.JSX.Element {
  const sortable = useTableSortableState<TaskRow, string>({
    data,
    defaultSort: [{direction: 'descending', sortKey: 'budget'}],
    isMultiSortEnabled: true,
  });
  const sortPlugin = useTableSortable<TaskRow>(sortable.sortConfig);
  return (
    <div dir={direction}>
      <Table
        columns={alignedSortableColumns}
        data={sortable.sortedData}
        idKey="id"
        plugins={{sortPlugin}}
      />
    </div>
  );
}

<SortableAlignmentStory direction="rtl" />

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

function SelectionStory() {
  const [selectedKeys, setSelectedKeys] = useState(
    () => new Set<string>(['design']),
  );
  const selection = useTableSelectionState({
    data,
    getIsItemEnabled: item => item.status !== 'Blocked',
    getIsItemSelectable: item => item.status !== 'Done',
    idKey: 'id',
    selectedKeys,
    setSelectedKeys,
  });
  const selectionPlugin = useTableSelection(selection.selectionConfig);
  return (
    <Table
      columns={columns}
      data={data}
      idKey="id"
      plugins={{selectionPlugin}}
    />
  );
}

<SelectionStory />

Selection / Multi-line rows

Select all rows	Name	DOB
Select row	Alex Morganalex.morgan@example.com	1980-01-19
Select row	Sam Riverasam.rivera@example.com	1983-09-27
Select row	Jordan Leejordan.lee@example.com	—
Select row	Taylor Kimtaylor.kim@example.com	1994-08-22

function MultilineSelectionStory() {
  const [selectedKeys, setSelectedKeys] = useState(
    () => new Set(contactData.map(item => item.id)),
  );
  const selection = useTableSelectionState({
    data: contactData,
    idKey: 'id',
    selectedKeys,
    setSelectedKeys,
  });
  const selectionPlugin = useTableSelection(selection.selectionConfig);
  return (
    <Table
      columns={contactColumns}
      data={contactData}
      idKey="id"
      plugins={{selectionPlugin}}
      verticalAlign="top"
    />
  );
}

<MultilineSelectionStory />

Selection / Striped rows

Select all rows	Name	DOB
Select row	Alex Morganalex.morgan@example.com	1980-01-19
Select row	Sam Riverasam.rivera@example.com	1983-09-27
Select row	Jordan Leejordan.lee@example.com	—
Select row	Taylor Kimtaylor.kim@example.com	1994-08-22

function StripedSelectionStory() {
  const [selectedKeys, setSelectedKeys] = useState(
    () => new Set([contactData[0].id, contactData[2].id]),
  );
  const selection = useTableSelectionState({
    data: contactData,
    idKey: 'id',
    selectedKeys,
    setSelectedKeys,
  });
  const selectionPlugin = useTableSelection(selection.selectionConfig);
  return (
    <Table
      columns={contactColumns}
      data={contactData}
      idKey="id"
      isStriped
      plugins={{selectionPlugin}}
      verticalAlign="top"
    />
  );
}

<StripedSelectionStory />

Selection / Minimum width

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
Select row	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

function SelectionMinimumWidthStory() {
  const [selectedKeys, setSelectedKeys] = useState(() => new Set<string>());
  const selection = useTableSelectionState({
    data,
    idKey: 'id',
    selectedKeys,
    setSelectedKeys,
  });
  const selectionPlugin = useTableSelection(selection.selectionConfig);
  return (
    <div style={{maxWidth: '100%', width: '560px'}}>
      <Table
        columns={[
          {header: 'Task', key: 'task'},
          {header: 'Owner', key: 'owner'},
          {header: 'Status', key: 'status'},
          {align: 'end', header: 'Budget', key: 'budget'},
          {header: 'Due', key: 'due'},
        ]}
        data={data}
        idKey="id"
        plugins={{selectionPlugin}}
        style={{minWidth: '760px'}}
      />
    </div>
  );
}

<SelectionMinimumWidthStory />

Row Expansion

	Name	Kind	Size	Modified
	src	folder	—	Jun 20
	components	folder	—	Jun 20
	utils	folder	—	Jun 17
	index.ts	file	0.4 KB	Jun 20
	public	folder	—	Jun 1
	package.json	file	1.8 KB	Jun 22
	README.md	file	0.6 KB	Jun 1

function RowExpansionStory() {
  const expansion = useTableRowExpansionState<FileRow>({
    data: fileTree,
    defaultExpandedKeys: ['src'],
    getChildren: item => item.children,
    getRowKey: item => item.id,
  });
  const expansionPlugin = useTableRowExpansion<FileRow>({
    ...expansion.expansionConfig,
    hasExpandAllToggle: true,
  });
  return (
    <Table
      columns={fileColumns}
      data={expansion.data}
      hasHover
      idKey="id"
      plugins={{expansion: expansionPlugin}}
    />
  );
}

<RowExpansionStory />

Row Expansion / Row click

	Name	Kind	Size	Modified
	src	folder	—	Jun 20
	public	folder	—	Jun 1
	package.json	file	1.8 KB	Jun 22
	README.md	file	0.6 KB	Jun 1

function RowExpansionRowClickStory() {
  const expansion = useTableRowExpansionState<FileRow>({
    data: fileTree,
    getChildren: item => item.children,
    getRowKey: item => item.id,
  });
  const expansionPlugin = useTableRowExpansion<FileRow>({
    ...expansion.expansionConfig,
    getExpanderLabel: (item, isExpanded) =>
      isExpanded ? `Collapse ${item.name}` : `Expand ${item.name}`,
    hasRowClickExpansion: true,
  });
  return (
    <Table
      columns={fileColumns}
      data={expansion.data}
      hasHover
      idKey="id"
      plugins={{expansion: expansionPlugin}}
    />
  );
}

<RowExpansionRowClickStory />

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

function PaginationStory() {
  const [page, setPage] = useState(1);
  const pageSize = 2;
  const paginationPlugin = useTablePagination<TaskRow>({
    onPageChange: setPage,
    page,
    pageSize,
    position: 'both',
    totalItems: data.length,
    variant: 'pages',
  });
  return (
    <Table
      columns={columns}
      data={paginateData(data, {page, pageSize})}
      idKey="id"
      plugins={{paginationPlugin}}
    />
  );
}

<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

function ColumnSettingsStory() {
  const defaultKeys = ['task', 'owner', 'status', 'due'];
  const [activeColumnKeys, setActiveColumnKeys] = useState(defaultKeys);
  const settingsPlugin = useTableColumnSettings<TaskRow>({
    activeColumnKeys,
    columns: [
      {isAlwaysVisible: true, key: 'task', label: 'Task'},
      {key: 'owner', label: 'Owner'},
      {key: 'status', label: 'Status'},
      {key: 'budget', label: 'Budget'},
      {key: 'due', label: 'Due'},
    ],
    defaultColumnKeys: defaultKeys,
    onChangeActiveColumnKeys: keys => {
      setActiveColumnKeys([...keys]);
    },
  });
  return (
    <div style={{display: 'grid', gap: 12}}>
      <div style={{display: 'flex', gap: 8}}>
        <Button
          icon={Settings2}
          label="Show budget"
          onClick={() => {
            setActiveColumnKeys(['task', 'owner', 'status', 'budget', 'due']);
          }}
          size="sm"
          variant="secondary"
        />
        <Button
          icon={Settings2}
          label="Reorder"
          onClick={() => {
            setActiveColumnKeys(['status', 'task', 'owner', 'due']);
          }}
          size="sm"
          variant="secondary"
        />
        <Button
          icon={RotateCcw}
          label="Reset"
          onClick={() => {
            setActiveColumnKeys(defaultKeys);
          }}
          size="sm"
          variant="ghost"
        />
      </div>
      <Table
        columns={columns}
        data={data}
        idKey="id"
        plugins={{settingsPlugin}}
      />
    </div>
  );
}

<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

function ColumnResizeStory() {
  const [columnWidths, setColumnWidths] = useState<Record<string, number>>({
    due: 128,
    task: 220,
    owner: 180,
  });
  const resizePlugin = useTableColumnResize<TaskRow>({
    columnWidths,
    columns: columns as TableColumn<Record<string, unknown>>[],
    minWidth: 96,
    onColumnResizeEnd: updates => {
      setColumnWidths(previous => ({...previous, ...updates}));
    },
  });
  return (
    <Table columns={columns} data={data} idKey="id" plugins={{resizePlugin}} />
  );
}

<ColumnResizeStory />

Filtering

Task Filter Task	Owner Filter Owner	Status Filter 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

function FilteringStory() {
  return <FilteredTable variant="popover" />;
}

function FilteredTable({variant}: {variant: TableFilterVariant}) {
  const {filters, onFilterChange} = useTableFilterState();
  const filteredRows = useMemo(() => filterData(data, filters), [filters]);
  const filteringPlugin = useTableFiltering<TaskRow>({
    filters,
    onFilterChange,
    searchConfig: filterSearchConfig,
    variant,
  });
  return (
    <Table
      columns={filterColumns}
      data={filteredRows}
      emptyState={<EmptyState isCompact title="No matching tasks" />}
      idKey="id"
      plugins={{filteringPlugin}}
    />
  );
}

<FilteringStory />

Inline Filtering

Task Filter Task	Owner Filter Owner	Status Filter Status All	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

function InlineFilteringStory() {
  return <FilteredTable variant="inline" />;
}

function FilteredTable({variant}: {variant: TableFilterVariant}) {
  const {filters, onFilterChange} = useTableFilterState();
  const filteredRows = useMemo(() => filterData(data, filters), [filters]);
  const filteringPlugin = useTableFiltering<TaskRow>({
    filters,
    onFilterChange,
    searchConfig: filterSearchConfig,
    variant,
  });
  return (
    <Table
      columns={filterColumns}
      data={filteredRows}
      emptyState={<EmptyState isCompact title="No matching tasks" />}
      idKey="id"
      plugins={{filteringPlugin}}
    />
  );
}

<InlineFilteringStory />

Combined Plugins

Select all rows		Task Filter Task	Owner Filter Owner	Status Filter Status	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		Annotate screens	Ada Lovelace	In progress	4200	Jun 10

Go to previous page

Page 1 of 3

Go to next page

function CombinedPluginsStory() {
  const [page, setPage] = useState(1);
  const [selectedKeys, setSelectedKeys] = useState(() => new Set<string>());
  const {filters, onFilterChange} = useTableFilterState();
  // Composition order: filter and sort operate on the root rows of the tree,
  // expansion flattens the visible rows, and pagination slices the flattened
  // output last (paginating before flattening would orphan child rows).
  const filteredRows = useMemo(
    () => filterData(combinedTaskTree, filters),
    [filters],
  );
  const sortable = useTableSortableState<TaskRow, string>({
    data: filteredRows,
    defaultSort: [{direction: 'ascending', sortKey: 'due'}],
  });
  const expansion = useTableRowExpansionState<TaskRow>({
    data: sortable.sortedData,
    defaultExpandedKeys: ['design'],
    getChildren: item => item.subtasks,
    getRowKey: item => item.id,
  });
  const selection = useTableSelectionState({
    data: expansion.data,
    idKey: 'id',
    selectedKeys,
    setSelectedKeys,
  });
  const pageSize = 3;
  const sortPlugin = useTableSortable<TaskRow>(sortable.sortConfig);
  const expansionPlugin = useTableRowExpansion(expansion.expansionConfig);
  const selectionPlugin = useTableSelection(selection.selectionConfig);
  const filteringPlugin = useTableFiltering<TaskRow>({
    filters,
    onFilterChange,
    searchConfig: filterSearchConfig,
    variant: 'popover',
  });
  const paginationPlugin = useTablePagination<TaskRow>({
    onPageChange: setPage,
    page,
    pageSize,
    totalItems: expansion.data.length,
    variant: 'compact',
  });
  return (
    <Table
      columns={filterColumns}
      data={paginateData(expansion.data, {page, pageSize})}
      idKey="id"
      plugins={{
        expansionPlugin,
        selectionPlugin,
        sortPlugin,
        filteringPlugin,
        paginationPlugin,
      }}
    />
  );
}

<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	"bottom" | "top" | "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.
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
aria-sort	AriaAttributes['aria-sort']	—	Indicates whether and how the column is sorted.
children	ReactNode	—	Header cell content.
className	string	—	Additional CSS class names applied to the th.
data-column-key	string	—	Column key used by table plugins.
data-testid	string	—	Test ID applied to the th.
ref	Ref<HTMLTableCellElement>	—	Ref forwarded to the th element.
scope	ThHTMLAttributes<HTMLTableCellElement>['scope']	'col'	Scope of the header cell.
style	CSSProperties	—	Inline styles applied to the th.
title	string	—	Native tooltip text 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.