A table displays data in rows and columns and enables a user to navigate and select its contents.
Name | Type | Date Modified |
|---|---|---|
| Games | File folder | 6/7/2020 |
| Program Files | File folder | 4/7/2021 |
| bootmgr | System file | 11/20/2010 |
<Table aria-label="Files">
<TableHeader>
<TableColumn isRowHeader>Name</TableColumn>
<TableColumn>Type</TableColumn>
<TableColumn>Date Modified</TableColumn>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>Games</TableCell>
<TableCell>File folder</TableCell>
<TableCell>6/7/2020</TableCell>
</TableRow>
<TableRow>
<TableCell>Program Files</TableCell>
<TableCell>File folder</TableCell>
<TableCell>4/7/2021</TableCell>
</TableRow>
<TableRow>
<TableCell>bootmgr</TableCell>
<TableCell>System file</TableCell>
<TableCell>11/20/2010</TableCell>
</TableRow>
</TableBody>
</Table>npx shadcn@latest add @dotui/tableUse tables to display data in rows and columns with support for selection, sorting, and more.
import {
Table,
TableBody,
TableCell,
TableColumn,
TableHeader,
TableRow,
} from "@/components/ui/table";<Table aria-label="Files">
<TableHeader>
<TableColumn isRowHeader>Name</TableColumn>
<TableColumn>Type</TableColumn>
<TableColumn>Date Modified</TableColumn>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>Games</TableCell>
<TableCell>File folder</TableCell>
<TableCell>6/7/2020</TableCell>
</TableRow>
</TableBody>
</Table>Use the controls below to experiment with different table props and see the live preview and code update.
Name | Type | Date Modified |
|---|---|---|
| Games | File folder | 6/7/2020 |
| Program Files | File folder | 4/7/2021 |
| bootmgr | System file | 11/20/2010 |
The type of selection that is allowed in the collection.
SelectionMode<Table aria-label="Files" selectionMode="none">
<TableHeader>
<TableColumn isRowHeader>Name</TableColumn>
<TableColumn>Type</TableColumn>
<TableColumn>Date Modified</TableColumn>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>Games</TableCell>
<TableCell>File folder</TableCell>
<TableCell>6/7/2020</TableCell>
</TableRow>
<TableRow>
<TableCell>Program Files</TableCell>
<TableCell>File folder</TableCell>
<TableCell>4/7/2021</TableCell>
</TableRow>
<TableRow>
<TableCell>bootmgr</TableCell>
<TableCell>System file</TableCell>
<TableCell>11/20/2010</TableCell>
</TableRow>
</TableBody>
</Table>A table displays data in rows and columns and enables a user to navigate its contents via directional navigation keys, and optionally supports row selection and sorting.
| Prop | Type | Default | |
|---|---|---|---|
boolean | — | ||
ReactNode | — | ||
DragAndDropHooks<object> | — | ||
SortDescriptor | — | ||
SelectionMode | — | ||
SelectionBehavior | "toggle" | ||
Iterable<Key> | "all" | — | ||
Iterable<Key> | "all" | — | ||
function | — | ||
Iterable<Key> | — | ||
DisabledBehavior | "selection" | ||
boolean | — | ||
boolean | — | ||
"none" | "clearSelection" | 'clearSelection' | ||
A header within a Table, containing the table columns.
| Prop | Type | Default | |
|---|---|---|---|
union | — | ||
Iterable<T> | — | ||
readonly any[] | — | ||
A column within a Table.
| Prop | Type | Default | |
|---|---|---|---|
boolean | — | ||
Key | — | ||
boolean | — | ||
boolean | — | ||
string | — | ||
ColumnSize | null | — | ||
ColumnSize | null | — | ||
ColumnStaticSize | null | — | ||
ColumnStaticSize | null | — | ||
ReactNode | function | — | ||
The body of a Table, containing the table rows.
| Prop | Type | Default | |
|---|---|---|---|
boolean | — | ||
ReactNode | function | — | ||
Iterable<T> | — | ||
function | — | ||
ReactNode | function | — | ||
readonly any[] | — | ||
A row within a Table.
| Prop | Type | Default | |
|---|---|---|---|
string | — | ||
T | — | ||
boolean | — | ||
Key | — | ||
union | — | ||
Iterable<T> | — | ||
readonly any[] | — | ||
A cell within a table row.
| Prop | Type | Default | |
|---|---|---|---|
Key | — | ||
string | — | ||
number | — | ||
ReactNode | function | — | ||
Last updated on 1/13/2026
Bringing singularity to the web.
Built with passion by @mehdibha.