Table

Display structured rows and columns with semantic HTML.

View component source ↗

Preview

Example

A minimal example to get started.

Recent projects in your workspace.
Project	Status
Design system	Active
Website	Draft

Installation

Install this component and its dependencies in a project initialized with shadcn.

pnpm dlx shadcn@latest add https://ui.hyunjoon.net/r/table.json

Usage

This is the basic example. Use the Code tab above for the selected example. Adjust import aliases to match your project.

import {
  Table,
  TableHeader,
  TableRow,
  TableHead,
  TableBody,
  TableCell,
  TableCaption,
} from "@/components/ui/table";

export default function Example() {
  return (
    <Table>
      <TableCaption>Recent projects in your workspace.</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead>Project</TableHead>
          <TableHead>Status</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>Design system</TableCell>
          <TableCell>Active</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>Website</TableCell>
          <TableCell>Draft</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}

API reference

Derived from the installed component types. Native DOM props are also supported where applicable. A dash means no explicit default is documented. Some props depend on the selected mode.

Table

Table properties
Prop	Type	Default	Description
`ref`	React.Ref<HTMLTableElement> \| undefined React.Ref<HTMLTableElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`defaultChecked`	boolean \| undefined boolean \| undefined	`—`	Initial checked state for an uncontrolled control.
`defaultValue`	string \| number \| readonly string[] \| undefined string \| number \| readonly string[] \| undefined	`—`	Initial value for an uncontrolled component.
`className`	string \| undefined string \| undefined	`—`	Additional CSS classes merged with the component styles.
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	React.FocusEventHandler<HTMLTableElement> \| undefined React.FocusEventHandler<HTMLTableElement> \| undefined	`—`	Called when the control receives focus.
`onBlur`	React.FocusEventHandler<HTMLTableElement> \| undefined React.FocusEventHandler<HTMLTableElement> \| undefined	`—`	Called when the control loses focus.
`onChange`	React.ChangeEventHandler<HTMLTableElement, Element> \| undefined React.ChangeEventHandler<HTMLTableElement, Element> \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`onKeyDown`	React.KeyboardEventHandler<HTMLTableElement> \| undefined React.KeyboardEventHandler<HTMLTableElement> \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	React.MouseEventHandler<HTMLTableElement> \| undefined React.MouseEventHandler<HTMLTableElement> \| undefined	`—`	Called when the element is activated.

TableHeader

TableHeader properties
Prop	Type	Default	Description
`ref`	React.Ref<HTMLTableSectionElement> \| undefined React.Ref<HTMLTableSectionElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`defaultChecked`	boolean \| undefined boolean \| undefined	`—`	Initial checked state for an uncontrolled control.
`defaultValue`	string \| number \| readonly string[] \| undefined string \| number \| readonly string[] \| undefined	`—`	Initial value for an uncontrolled component.
`className`	string \| undefined string \| undefined	`—`	Additional CSS classes merged with the component styles.
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	React.FocusEventHandler<HTMLTableSectionElement> \| undefined React.FocusEventHandler<HTMLTableSectionElement> \| undefined	`—`	Called when the control receives focus.
`onBlur`	React.FocusEventHandler<HTMLTableSectionElement> \| undefined React.FocusEventHandler<HTMLTableSectionElement> \| undefined	`—`	Called when the control loses focus.
`onChange`	React.ChangeEventHandler<HTMLTableSectionElement, Element> \| undefined React.ChangeEventHandler<HTMLTableSectionElement, Element> \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`onKeyDown`	React.KeyboardEventHandler<HTMLTableSectionElement> \| undefined React.KeyboardEventHandler<HTMLTableSectionElement> \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	React.MouseEventHandler<HTMLTableSectionElement> \| undefined React.MouseEventHandler<HTMLTableSectionElement> \| undefined	`—`	Called when the element is activated.

TableBody

TableBody properties
Prop	Type	Default	Description
`ref`	React.Ref<HTMLTableSectionElement> \| undefined React.Ref<HTMLTableSectionElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`defaultChecked`	boolean \| undefined boolean \| undefined	`—`	Initial checked state for an uncontrolled control.
`defaultValue`	string \| number \| readonly string[] \| undefined string \| number \| readonly string[] \| undefined	`—`	Initial value for an uncontrolled component.
`className`	string \| undefined string \| undefined	`—`	Additional CSS classes merged with the component styles.
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	React.FocusEventHandler<HTMLTableSectionElement> \| undefined React.FocusEventHandler<HTMLTableSectionElement> \| undefined	`—`	Called when the control receives focus.
`onBlur`	React.FocusEventHandler<HTMLTableSectionElement> \| undefined React.FocusEventHandler<HTMLTableSectionElement> \| undefined	`—`	Called when the control loses focus.
`onChange`	React.ChangeEventHandler<HTMLTableSectionElement, Element> \| undefined React.ChangeEventHandler<HTMLTableSectionElement, Element> \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`onKeyDown`	React.KeyboardEventHandler<HTMLTableSectionElement> \| undefined React.KeyboardEventHandler<HTMLTableSectionElement> \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	React.MouseEventHandler<HTMLTableSectionElement> \| undefined React.MouseEventHandler<HTMLTableSectionElement> \| undefined	`—`	Called when the element is activated.

TableFooter

TableFooter properties
Prop	Type	Default	Description
`ref`	React.Ref<HTMLTableSectionElement> \| undefined React.Ref<HTMLTableSectionElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`defaultChecked`	boolean \| undefined boolean \| undefined	`—`	Initial checked state for an uncontrolled control.
`defaultValue`	string \| number \| readonly string[] \| undefined string \| number \| readonly string[] \| undefined	`—`	Initial value for an uncontrolled component.
`className`	string \| undefined string \| undefined	`—`	Additional CSS classes merged with the component styles.
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	React.FocusEventHandler<HTMLTableSectionElement> \| undefined React.FocusEventHandler<HTMLTableSectionElement> \| undefined	`—`	Called when the control receives focus.
`onBlur`	React.FocusEventHandler<HTMLTableSectionElement> \| undefined React.FocusEventHandler<HTMLTableSectionElement> \| undefined	`—`	Called when the control loses focus.
`onChange`	React.ChangeEventHandler<HTMLTableSectionElement, Element> \| undefined React.ChangeEventHandler<HTMLTableSectionElement, Element> \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`onKeyDown`	React.KeyboardEventHandler<HTMLTableSectionElement> \| undefined React.KeyboardEventHandler<HTMLTableSectionElement> \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	React.MouseEventHandler<HTMLTableSectionElement> \| undefined React.MouseEventHandler<HTMLTableSectionElement> \| undefined	`—`	Called when the element is activated.

TableHead

TableHead properties
Prop	Type	Default	Description
`ref`	React.Ref<HTMLTableHeaderCellElement> \| undefined React.Ref<HTMLTableHeaderCellElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`defaultChecked`	boolean \| undefined boolean \| undefined	`—`	Initial checked state for an uncontrolled control.
`defaultValue`	string \| number \| readonly string[] \| undefined string \| number \| readonly string[] \| undefined	`—`	Initial value for an uncontrolled component.
`className`	string \| undefined string \| undefined	`—`	Additional CSS classes merged with the component styles.
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	React.FocusEventHandler<HTMLTableHeaderCellElement> \| undefined React.FocusEventHandler<HTMLTableHeaderCellElement> \| undefined	`—`	Called when the control receives focus.
`onBlur`	React.FocusEventHandler<HTMLTableHeaderCellElement> \| undefined React.FocusEventHandler<HTMLTableHeaderCellElement> \| undefined	`—`	Called when the control loses focus.
`onChange`	React.ChangeEventHandler<HTMLTableHeaderCellElement, Element> \| undefined React.ChangeEventHandler<HTMLTableHeaderCellElement, Element> \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`onKeyDown`	React.KeyboardEventHandler<HTMLTableHeaderCellElement> \| undefined React.KeyboardEventHandler<HTMLTableHeaderCellElement> \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	React.MouseEventHandler<HTMLTableHeaderCellElement> \| undefined React.MouseEventHandler<HTMLTableHeaderCellElement> \| undefined	`—`	Called when the element is activated.

TableRow

TableRow properties
Prop	Type	Default	Description
`ref`	React.Ref<HTMLTableRowElement> \| undefined React.Ref<HTMLTableRowElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`defaultChecked`	boolean \| undefined boolean \| undefined	`—`	Initial checked state for an uncontrolled control.
`defaultValue`	string \| number \| readonly string[] \| undefined string \| number \| readonly string[] \| undefined	`—`	Initial value for an uncontrolled component.
`className`	string \| undefined string \| undefined	`—`	Additional CSS classes merged with the component styles.
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	React.FocusEventHandler<HTMLTableRowElement> \| undefined React.FocusEventHandler<HTMLTableRowElement> \| undefined	`—`	Called when the control receives focus.
`onBlur`	React.FocusEventHandler<HTMLTableRowElement> \| undefined React.FocusEventHandler<HTMLTableRowElement> \| undefined	`—`	Called when the control loses focus.
`onChange`	React.ChangeEventHandler<HTMLTableRowElement, Element> \| undefined React.ChangeEventHandler<HTMLTableRowElement, Element> \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`onKeyDown`	React.KeyboardEventHandler<HTMLTableRowElement> \| undefined React.KeyboardEventHandler<HTMLTableRowElement> \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	React.MouseEventHandler<HTMLTableRowElement> \| undefined React.MouseEventHandler<HTMLTableRowElement> \| undefined	`—`	Called when the element is activated.

TableCell

TableCell properties
Prop	Type	Default	Description
`ref`	React.Ref<HTMLTableDataCellElement> \| undefined React.Ref<HTMLTableDataCellElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`defaultChecked`	boolean \| undefined boolean \| undefined	`—`	Initial checked state for an uncontrolled control.
`defaultValue`	string \| number \| readonly string[] \| undefined string \| number \| readonly string[] \| undefined	`—`	Initial value for an uncontrolled component.
`className`	string \| undefined string \| undefined	`—`	Additional CSS classes merged with the component styles.
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	React.FocusEventHandler<HTMLTableDataCellElement> \| undefined React.FocusEventHandler<HTMLTableDataCellElement> \| undefined	`—`	Called when the control receives focus.
`onBlur`	React.FocusEventHandler<HTMLTableDataCellElement> \| undefined React.FocusEventHandler<HTMLTableDataCellElement> \| undefined	`—`	Called when the control loses focus.
`onChange`	React.ChangeEventHandler<HTMLTableDataCellElement, Element> \| undefined React.ChangeEventHandler<HTMLTableDataCellElement, Element> \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`onKeyDown`	React.KeyboardEventHandler<HTMLTableDataCellElement> \| undefined React.KeyboardEventHandler<HTMLTableDataCellElement> \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	React.MouseEventHandler<HTMLTableDataCellElement> \| undefined React.MouseEventHandler<HTMLTableDataCellElement> \| undefined	`—`	Called when the element is activated.

TableCaption

TableCaption properties
Prop	Type	Default	Description
`ref`	React.Ref<HTMLElement> \| undefined React.Ref<HTMLElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`defaultChecked`	boolean \| undefined boolean \| undefined	`—`	Initial checked state for an uncontrolled control.
`defaultValue`	string \| number \| readonly string[] \| undefined string \| number \| readonly string[] \| undefined	`—`	Initial value for an uncontrolled component.
`className`	string \| undefined string \| undefined	`—`	Additional CSS classes merged with the component styles.
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	React.FocusEventHandler<HTMLElement> \| undefined React.FocusEventHandler<HTMLElement> \| undefined	`—`	Called when the control receives focus.
`onBlur`	React.FocusEventHandler<HTMLElement> \| undefined React.FocusEventHandler<HTMLElement> \| undefined	`—`	Called when the control loses focus.
`onChange`	React.ChangeEventHandler<HTMLElement, Element> \| undefined React.ChangeEventHandler<HTMLElement, Element> \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`onKeyDown`	React.KeyboardEventHandler<HTMLElement> \| undefined React.KeyboardEventHandler<HTMLElement> \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	React.MouseEventHandler<HTMLElement> \| undefined React.MouseEventHandler<HTMLElement> \| undefined	`—`	Called when the element is activated.

Usage notes

Give columns meaningful headings and add a caption for context. Use Data Table when you need a typed data-driven composition.