Data Table
Styled table primitives for structured tabular data. Compose with @tanstack/react-table for sorting, filtering, pagination, and row selection.
Simple table
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
| INV002 | Pending | PayPal | $150.00 |
| INV003 | Unpaid | Bank Transfer | $350.00 |
| INV004 | Paid | Credit Card | $450.00 |
| INV005 | Paid | PayPal | $550.00 |
| INV006 | Pending | Bank Transfer | $200.00 |
| INV007 | Unpaid | Credit Card | $300.00 |
| Total | $2,250.00 | ||
import {
Table, TableBody, TableCaption, TableCell,
TableFooter, TableHead, TableHeader, TableRow,
} from "@tidal-ds/react";
<Table>
<TableCaption>A list of your recent invoices.</TableCaption>
<TableHeader>
<TableRow>
<TableHead className="w-[100px]">Invoice</TableHead>
<TableHead>Status</TableHead>
<TableHead>Method</TableHead>
<TableHead className="text-right">Amount</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell className="font-medium">INV001</TableCell>
<TableCell>Paid</TableCell>
<TableCell>Credit Card</TableCell>
<TableCell className="text-right">$250.00</TableCell>
</TableRow>
</TableBody>
<TableFooter>
<TableRow>
<TableCell colSpan={3}>Total</TableCell>
<TableCell className="text-right">$2,250.00</TableCell>
</TableRow>
</TableFooter>
</Table>Full DataTable (TanStack)
| Status | ||||
|---|---|---|---|---|
| success | ken99@yahoo.com | $316.00 | ||
| success | abe45@gmail.com | $242.00 | ||
| processing | monserrat44@gmail.com | $837.00 | ||
| success | silas22@gmail.com | $874.00 | ||
| failed | carmella@hotmail.com | $721.00 | ||
| pending | derek@outlook.com | $129.00 | ||
| success | julia@gmail.com | $453.00 | ||
| processing | marcus@yahoo.com | $198.00 | ||
| failed | natalie@hotmail.com | $567.00 | ||
| pending | oliver@gmail.com | $342.00 |
0 of 10 row(s) selected.
import {
flexRender, getCoreRowModel, getFilteredRowModel,
getPaginationRowModel, getSortedRowModel, useReactTable,
} from "@tanstack/react-table";
import {
Table, TableBody, TableCell, TableHead,
TableHeader, TableRow, Badge, Button,
Checkbox, DropdownMenu, Input,
} from "@tidal-ds/react";
// Define columns with sorting, selection, badges, actions...
// See examples.tsx for the full implementation.Table primitives
| Component | Element | Notes |
|---|---|---|
| Table | <table> | w-full, caption-bottom, text-sm, wrapped in an overflow-auto div |
| TableHeader | <thead> | Bottom-bordered rows, bg-muted/40 |
| TableBody | <tbody> | Last row has no bottom border |
| TableFooter | <tfoot> | Top border, bg-secondary, font-medium |
| TableRow | <tr> | Bottom border, hover:bg-muted/50, data-[state=selected]:bg-muted |
| TableHead | <th> | h-10, px-3.5, text-muted-foreground, font-normal |
| TableCell | <td> | h-12, px-2.5, align-middle |
| TableCaption | <caption> | px-3.5 py-3.5, text-sm, text-muted-foreground |
Source
packages/react/src/components/table.tsx · Figma node 2819:30904