Data Table

Styled table primitives for structured, multi-column tabular data where rows share the same fields and users scan or compare across columns. Reach for a table when the dataset has a fixed schema and may need sorting, filtering, or selection — not for simple stacked key/value pairs (use a description list) or a list of cards. The base components are a pure visual layer with no built-in logic: compose them with @tanstack/react-table for sorting, filtering, pagination, and row selection (the “DataTable” pattern). Inside rows, prefer dense controls — sm (28px) Buttons, Checkboxes, and Inputs — to keep row height tight, and use a secondary Badge for status cells so the chip reads as metadata rather than an action.

Simple table

A list of your recent invoices.
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 "@liquidai/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 "@liquidai/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-secondary/40
TableBody	<tbody>	Last row has no bottom border
TableFooter	<tfoot>	Top border, bg-secondary, font-medium
TableRow	<tr>	Bottom border, hover:bg-secondary/50, data-[state=selected]:bg-secondary
TableHead	<th>	h-10, px-3, text-muted-foreground, font-normal
TableCell	<td>	h-12, px-3, 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