Table

Semantic, responsive tables with soft row hover and an animated selection marker.

Data Display

Invoices issued in October.
Invoice	Customer	Status	Method	Amount
INV-2041	Northwind	Paid	Card	$1,250.00
INV-2042	Globex	Pending	Transfer	$480.00
INV-2043	Initech	Paid	Card	$2,900.00
INV-2044	Umbrella	Overdue	Transfer	$760.00
INV-2045	Hooli	Paid	Card	$1,840.00
Total				$7,230.00

Playground

Tweak the props, the preview and the code follow.

Invoice	Customer	Status	Amount
INV-2041	Northwind	Paid	€1,240
INV-2042	Lumen	Pending	€380
INV-2043	Parcel	Paid	€2,900
INV-2044	Fieldnote	Overdue	€610

<Table>
  <TableHeader>
    <TableRow>
      <TableHead><Checkbox aria-label="Select all" /></TableHead>
      <TableHead>Invoice</TableHead>
      <TableHead className="text-right">Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow data-state="selected">
      <TableCell><Checkbox checked /></TableCell>
      <TableCell>INV-2041</TableCell>
      <TableCell className="text-right">€1,240</TableCell>
    </TableRow>
  </TableBody>
</Table>

Installation

npx @plumsydev/plum-ui add table

Also pulls in badge automatically.

Usage

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

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Invoice</TableHead>
      <TableHead className="text-right">Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>INV-2041</TableCell>
      <TableCell className="text-right">$1,250.00</TableCell>
    </TableRow>
  </TableBody>
</Table>

Examples

Selectable rows

Set data-state="selected" on a row to highlight it and grow the accent bar.

Name	Email	Role
Léa Martin	lea@acme.com	Owner
Noah Kim	noah@acme.com	Admin
Sam Ortiz	sam@acme.com	Member
Ava Chen	ava@acme.com	Member

1 of 4 selected

Animated sorting

Wrap rows with motion.create(TableRow) and layout to animate reordering.


acme-api	961,200	41ms
acme-web	182,400	84ms
acme-docs	24,800	112ms
acme-admin	8,300	67ms

API Reference

TableRow

A styled tr.

Prop	Type	Default
`data-state` Highlights the row and reveals the accent bar.	`"selected"`	`—`

Notes

The table is wrapped in a horizontally scrollable container, so wide tables never break the layout on mobile.
For sorting, filtering and pagination logic, pair it with TanStack Table.

PreviousSwitch NextTabs