DocsComponents

Table

Structured data with consistent alignment and optional selection.

Project	Status
Weekend notes	Active
A new idea	Draft

Installation

Terminal

pnpm dlx shadcn@latest add https://react-toolbox.io/r/table.json

New here? Set up your project first. Styles, fonts, and required components are included.

Usage

Put TableHead and TableRow directly inside Table. Use selectable and onRowSelect for selection, and keep selected on each row in sync with your state.

Use the Code tab above for a complete example. The import follows your configured UI alias. See Theming to customize colors, spacing, and style slots.

State and callbacks

Table derives selection from each TableRow selected prop. Handle onRowSelect by updating those row props; it receives row indices, so preserve your own stable item identifiers when sorting or filtering data.

selectable adds selection controls; multiSelectable enables multiple selected rows. Set selectable={false} for a table with no selection interaction.

API reference

Generated from the installed TypeScript source. Defaults are the values declared by each function; a dash means no parameter default is declared. Forwarded props can use the receiving component’s default. Callback types show the exact arguments passed to your handler.

`Table`

Property	Type	Default
`multiSelectable`	`boolean`	`false`
`selectable`	`boolean`	`true`
`classNames`	`TableTheme` Classes for the component's rendered parts. Applied after legacy theme overrides.	`—`
`theme`Deprecated alias	`TableTheme` Use classNames for style slots; use ThemeProvider for design tokens.	`—`

Callbacks

Property	Type	Default
`onRowSelect`	`(selectedIndices: number[]) => void`	`—`

Also inherits ComponentPropsWithRef<'table'>, except the omissions and overrides in its exported props type below. Use the supported native aria-*, data-*, event, and element attributes as appropriate.

Additional defaults on inherited props: className = ''.

Style slots

Pass a map of Tailwind classes to classNames. Available keys:

asc
checkboxCell
head
headCell
numeric
row
rowCell
selected
sortIcon
sorted
table

theme is the deprecated compatibility alias. When both are provided, classNames wins conflicting utilities within each slot. See Theming for tokens and override rules.

`TableHead`

Property	Type	Default
`displaySelect`	`boolean`	`true`
`multiSelectable`	`boolean`	`—`
`selectable`	`boolean`	`—`
`selected`	`boolean`	`—`
`classNames`	`TableTheme` Classes for the component's rendered parts. Applied after legacy theme overrides.	`—`
`theme`Deprecated alias	`TableTheme` Use classNames for style slots; use ThemeProvider for design tokens.	`—`

Callbacks

Property	Type	Default
`onSelect`	`(checked: boolean, event: React.MouseEvent<HTMLInputElement>) => void`	`—`

Also inherits Omit<ComponentPropsWithRef<'tr'>, 'onSelect'>, except the omissions and overrides in its exported props type below. Use the supported native aria-*, data-*, event, and element attributes as appropriate.

Style slots

Pass a map of Tailwind classes to classNames. Available keys:

asc
checkboxCell
head
headCell
numeric
row
rowCell
selected
sortIcon
sorted
table

theme is the deprecated compatibility alias. When both are provided, classNames wins conflicting utilities within each slot. See Theming for tokens and override rules.

`TableRow`

Property	Type	Default
`idx`	`number`	`0`
`selectable`	`boolean`	`—`
`selected`	`boolean`	`—`
`classNames`	`TableTheme` Classes for the component's rendered parts. Applied after legacy theme overrides.	`—`
`theme`Deprecated alias	`TableTheme` Use classNames for style slots; use ThemeProvider for design tokens.	`—`

Callbacks

Property	Type	Default
`onSelect`	`(index: number, selected: boolean) => void`	`—`

Style slots

Pass a map of Tailwind classes to classNames. Available keys:

asc
checkboxCell
head
headCell
numeric
row
rowCell
selected
sortIcon
sorted
table

theme is the deprecated compatibility alias. When both are provided, classNames wins conflicting utilities within each slot. See Theming for tokens and override rules.

`TableCell`

Property	Type	Default
`column`	`number`	`—`
`numeric`	`boolean`	`false`
`row`	`number`	`—`
`sorted`	`'asc' \| 'desc'`	`—`
`tagName`	`'td' \| 'th'`	`'td'`
`classNames`	`TableTheme & { tableCell?: string }` Classes for the component's rendered parts. Applied after legacy theme overrides.	`—`
`theme`Deprecated alias	`TableTheme & { tableCell?: string }` Use classNames for style slots; use ThemeProvider for design tokens.	`—`

Callbacks

Property	Type	Default
`onClick`	`(event: MouseEvent<HTMLTableCellElement>, column?: number, row?: number) => void`	`—`

Also inherits Omit<ComponentPropsWithRef<'th'>, 'onClick'>, except the omissions and overrides in its exported props type below. Use the supported native aria-*, data-*, event, and element attributes as appropriate.

Additional defaults on inherited props: className = ''.

Style slots

Pass a map of Tailwind classes to classNames. Available keys:

asc
checkboxCell
head
headCell
numeric
row
rowCell
selected
sortIcon
sorted
table
tableCell

theme is the deprecated compatibility alias. When both are provided, classNames wins conflicting utilities within each slot. See Theming for tokens and override rules.

Exported TypeScript types

Expand a type to inspect its full declaration, including generic constraints, union branches, callback arguments, ref handles, and inherited props. Import these types from @/components/ui/material/table.

TableProps

tsx

interface TableProps extends ComponentPropsWithRef<'table'> {
  multiSelectable?: boolean;
  onRowSelect?: (selectedIndices: number[]) => void;
  selectable?: boolean;
  /** Classes for the component's rendered parts. Applied after legacy theme overrides. */
  classNames?: TableTheme;
  /** @deprecated Use classNames for style slots; use ThemeProvider for design tokens. */
  theme?: TableTheme;
}

TableHeadProps

tsx

interface TableHeadProps extends Omit<ComponentPropsWithRef<'tr'>, 'onSelect'> {
  displaySelect?: boolean;
  multiSelectable?: boolean;
  onSelect?: CheckboxProps['onChange'];
  selectable?: boolean;
  selected?: boolean;
  /** Classes for the component's rendered parts. Applied after legacy theme overrides. */
  classNames?: TableTheme;
  /** @deprecated Use classNames for style slots; use ThemeProvider for design tokens. */
  theme?: TableTheme;
}

TableRowProps

tsx

interface TableRowProps extends Omit<ComponentPropsWithRef<'tr'>, 'onSelect'> {
  idx?: number;
  onSelect?: (index: number, selected: boolean) => void;
  selectable?: boolean;
  selected?: boolean;
  /** Classes for the component's rendered parts. Applied after legacy theme overrides. */
  classNames?: TableTheme;
  /** @deprecated Use classNames for style slots; use ThemeProvider for design tokens. */
  theme?: TableTheme;
}

TableCellProps

tsx

interface TableCellProps extends Omit<ComponentPropsWithRef<'th'>, 'onClick'> {
  column?: number;
  numeric?: boolean;
  onClick?: (event: MouseEvent<HTMLTableCellElement>, column?: number, row?: number) => void;
  row?: number;
  sorted?: 'asc' | 'desc';
  tagName?: 'td' | 'th';
  /** Classes for the component's rendered parts. Applied after legacy theme overrides. */
  classNames?: TableTheme & { tableCell?: string };
  /** @deprecated Use classNames for style slots; use ThemeProvider for design tokens. */
  theme?: TableTheme & { tableCell?: string };
}

Material guidelines

Use tables for comparable values organized into consistent columns. Left-align descriptive text and right-align numeric headers and values.
Keep row selection distinct from sorting or other actions. On narrow screens, contain horizontal scrolling inside the table instead of widening the page.

Material Design 1: Data tables