Table

A responsive table for tabular data.

$ pnpm dlx shadcn@latest add https://dashral.com/r/table.json

A list of your recent invoices.
Invoice	Status	Method	Amount
INV-001	Paid	Credit card	$250
INV-002	Pending	PayPal	$150
INV-003	Unpaid	Bank transfer	$350
Total			$750

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/table.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/table

Usage

example.tsx

1import { Table, TableHeader, TableBody, TableHead, TableRow, TableCell, TableCaption } from "@/components/dashral/table"
2
3<Table>
4  <TableCaption>Recent invoices</TableCaption>
5  <TableHeader>
6    <TableRow>
7      <TableHead>Invoice</TableHead>
8      <TableHead className="text-right">Amount</TableHead>
9    </TableRow>
10  </TableHeader>
11  <TableBody>
12    {invoices.map((invoice) => (
13      <TableRow key={invoice.id}>
14        <TableCell>{invoice.id}</TableCell>
15        <TableCell className="text-right tabular-nums">{invoice.amount}</TableCell>
16      </TableRow>
17    ))}
18  </TableBody>
19</Table>

Examples

Recent orders

Avatars, status badges and a menu of actions on each row; the row lights up under the pointer.

Order	Customer	Product	Status	Date	Amount
#1042	Olivia Martinolivia@acme.com	Retro 35mm Film Camera	Paid	Oct 16	$159.00
#1041	Liam Johnsonliam@acme.com	Pour-over Coffee Set	Shipped	Oct 15	$64.50
#1040	Budi Santosobudi@nusantara.id	Mechanical Keyboard	Processing	Oct 15	$219.00
#1039	Sofia Davissofia@acme.com	Linen Desk Mat	Refunded	Oct 14	$39.00

Bulk actions

Tick rows (or click them) and a bar with actions for the selection appears; archiving can be undone.

5 accounts · tick rows to act on several at once

Company	Plan	Seats	Renews
Acme Inc.	Team	24	Nov 2, 2026
PT Nusantara	Pro	8	Nov 9, 2026
Globex	Free	3	—
Initech	Pro	12	Dec 1, 2026
Umbrella Co.	Team	40	Dec 14, 2026

API reference

Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption

Styled table elements; the table scrolls sideways when it doesn't fit.

Also takes every prop of <table>(opens in a new tab).

Accessibility

Real table semantics: use TableHead for headers and a TableCaption (visually hidden is fine) to name the table.