Table

A responsive table component.

Status	Email	Amount
Success	ken99@example.com	$316.00
Success	abe45@example.com	$242.00
Processing	monserrat44@example.com	$837.00
Failed	carmella@example.com	$721.00

tsx

1
2
3
4
5
6
7<Table
  head={["Status", "Email", "Amount"]}
  rows={[
    ["Success", "ken99@example.com", "$316.00"],
    ["Success", "abe45@example.com", "$242.00"],
  ]}
/>

Table — <table> HTML natif stylé shadcn. Composé de Table + TableHeader + TableBody + TableRow + TableHead (th) + TableCell (td) + optionnellement TableFooter + TableCaption.

Pour du filtrage / pagination / sorting côté serveur, utiliser DataTable qui étend Table avec toolbar.

Installation

Terminal

$ bext ui add table

Usage

tsx

1
2
3
4
5
6
7
8
9
10import { Table } from "@bext-stack/ui/primitives"

// Raccourci
<Table
  head={["Status", "Email", "Amount"]}
  rows={[
    ["Success", "a@ex.com", "$316"],
    ["Failed", "b@ex.com", "$242"],
  ]}
/>

Anatomy

<Table>
  ├── <TableCaption>...</TableCaption>          // optionnel
  ├── <TableHeader>
  │   └── <TableRow>
  │       └── <TableHead>Column</TableHead>
  ├── <TableBody>
  │   └── <TableRow>
  │       └── <TableCell>value</TableCell>
  └── <TableFooter>...</TableFooter>            // optionnel

API Reference

Table

Prop	Type	Default	Description
head	string[]	—	Raccourci — génère TableHeader depuis un array de labels.
rows	string[][]	—	Raccourci — génère TableBody depuis une matrix de cells.
className	string	—	undefined

TableHeader / TableBody / TableFooter

Prop	Type	Default	Description
children	ReactNode	—	undefined

TableRow

Prop	Type	Default	Description
className	string	—	hover:bg-muted/50 par défaut.

TableHead

Prop	Type	Default	Description
children	ReactNode	—		stylé h-10 px-4 text-left align-middle font-medium.

TableCell

Prop	Type	Default	Description
children	ReactNode	—		p-4 align-middle.

Accessibility

Utiliser TableCaption pour décrire la table aux AT. Ajouter scope="col" aux TableHead pour lier lignes ↔ colonnes.

Try it live Open in play

Edit this example live in the bext playground — it compiles and runs entirely in your browser.

src/app/page.tsx 1 file · react · runs in your browser

// A table presents tabular data in rows and columns, with a header
// row and a subtle divider between rows.
const ROWS = [
  { invoice: "INV001", status: "Paid", method: "Credit Card", amount: "$250.00" },
  { invoice: "INV002", status: "Pending", method: "PayPal", amount: "$150.00" },
  { invoice: "INV003", status: "Unpaid", method: "Bank Transfer", amount: "$350.00" },
];
const th = { textAlign: "left", padding: "10px 14px", fontSize: 13, fontWeight: 600, color: "#64748b" };
const td = { padding: "12px 14px", fontSize: 14, color: "#0a0a0a", borderTop: "1px solid #e2e8f0" };

export default function Page() {
  return (
    <main style={{ maxWidth: 640, margin: "0 auto", padding: "48px 20px", fontFamily: "Inter, system-ui, sans-serif" }}>
      <h1 style={{ letterSpacing: "-0.02em", marginBottom: 4 }}>Table</h1>
      <p style={{ color: "#64748b", marginTop: 0 }}>A responsive table for displaying data.</p>
      <div style={{ marginTop: 22, border: "1px solid #e2e8f0", borderRadius: 12, overflow: "hidden", background: "#fff" }}>

The React idiom — same UI, for comparison.

← Switch Tabs →

On This Page