Table

Installation

Install the component via the CLI in one command.

npx shadcn@latest add @intentui/table

Composed components

Manual installation

Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.

npm install react-aria-components @heroicons/react tailwind-merge

Anatomy

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

<Table aria-label="Bands">
  <TableHeader>
    <TableColumn>#</TableColumn>
    <TableColumn isRowHeader>Name</TableColumn>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>1</TableCell>
      <TableCell>Nirvana</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>2</TableCell>
      <TableCell>The Beatles</TableCell>
    </TableRow>
  </TableBody>
</Table>

Examples

Searchable

In the latest React Aria release, tables can now be made searchable since Autocomplete supports all collection types, including Table This allows users to filter table rows directly with their input.

This example comes from a tweet by Devon here.

Expandable rows

Tables can have expandable rows to show additional details. This is useful for displaying more information without clutter ing the main table view.

Bulk actions

Tables may require bulk actions for handling multiple entries at once.

Drag and drop

Similar to GridList, tables can also support drag and drop functionality.

Sorting

Tables can be made sortable. Activate sorting by clicking on a column header.

Resizable

Tables can be made resizable. To enable resizing, set the allowResize prop to true. And to make a column resizable, set the isResizable prop to true on the column.

Infinite scrolling

Tables can handle large datasets efficiently with infinite scrolling. This allows for loading more data as the user scrolls down, improving performance and user experience.

Links

To create a clickable link within a table row, use the href prop.

<TableRow href='/collections/table-example'/>

Bleed

Use the bleed prop to make the table stretch to the edges of its container. This is especially useful in layouts like sidebars, where you want the table to align with the container's outer padding.

<Table bleed className="[--gutter:--spacing(6)] sm:[--gutter:--spacing(4)]" aria-label="..."/>

With card

When placing a table inside a card, you can use bleed and adjust the --spacing variable to align with the card’s padding, allowing the table to span the full width.

See the full demo at Sidebar 15.

Component API

Table

The Table component displays data in rows and columns.

TableBody

The TableBody component renders table rows.

TableCell

The TableCell component renders one table cell.

TableColumn

The TableColumn component defines a table column.

TableHeader

The TableHeader component groups table columns.

TableRow

The TableRow component renders one table row.

See the React Aria for the full API reference.