dotUI

Table

A table displays data in rows and columns and enables a user to navigate and select its contents.

Overview

Examples

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>

Installation

npm

pnpm

yarn

bun

pnpm dlx shadcn@latest add @dotui/table

Usage

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

Playground

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

selectionMode

<Dynamic(Table) aria-label="Files" selectionMode="none">
  <Unknown>
    <Dynamic(TableColumn) isRowHeader>Name</Dynamic(TableColumn)>
    <Dynamic(TableColumn)>Type</Dynamic(TableColumn)>
    <Dynamic(TableColumn)>Date Modified</Dynamic(TableColumn)>
  </Unknown>
  <Unknown>
    <Unknown>
      <Dynamic(TableCell)>Games</Dynamic(TableCell)>
      <Dynamic(TableCell)>File folder</Dynamic(TableCell)>
      <Dynamic(TableCell)>6/7/2020</Dynamic(TableCell)>
    </Unknown>
    <Unknown>
      <Dynamic(TableCell)>Program Files</Dynamic(TableCell)>
      <Dynamic(TableCell)>File folder</Dynamic(TableCell)>
      <Dynamic(TableCell)>4/7/2021</Dynamic(TableCell)>
    </Unknown>
    <Unknown>
      <Dynamic(TableCell)>bootmgr</Dynamic(TableCell)>
      <Dynamic(TableCell)>System file</Dynamic(TableCell)>
      <Dynamic(TableCell)>11/20/2010</Dynamic(TableCell)>
    </Unknown>
  </Unknown>
</Dynamic(Table)>

API Reference

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

TableHeader

A header within a Table, containing the table columns.

Prop	Type	Default

	`union`	`—`
	`Iterable<T>`	`—`
	`readonly any[]`	`—`

TableColumn

A column within a Table.

Prop	Type	Default
	`boolean`	`—`
	`Key`	`—`
	`boolean`	`—`
	`boolean`	`—`
	`string`	`—`
	`ColumnSize \| null`	`—`
	`ColumnSize \| null`	`—`
	`ColumnStaticSize \| null`	`—`
	`ColumnStaticSize \| null`	`—`
	`ReactNode \| function`	`—`

TableBody

The body of a Table, containing the table rows.

Prop	Type	Default
	`boolean`	`—`

	`ReactNode \| function`	`—`
	`Iterable<T>`	`—`
	`function`	`—`
	`ReactNode \| function`	`—`
	`readonly any[]`	`—`

TableRow

A row within a Table.

Prop	Type	Default
	`string`	`—`
	`T`	`—`
	`boolean`	`—`
	`Key`	`—`

	`union`	`—`
	`Iterable<T>`	`—`
	`readonly any[]`	`—`

TableCell

A cell within a table row.

Prop	Type	Default
	`Key`	`—`
	`string`	`—`
	`number`	`—`
	`ReactNode \| function`	`—`

dotUI

Table

Installation

Usage

Playground

selectionMode

API Reference

Table

TableHeader

TableColumn

TableBody

TableRow

TableCell

On this page

On this page

dotUI

Product

Community

Support