Table

Name	Status	Role
Alice	Active	Admin
Bob	Inactive	User

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Status</TableHead>
      <TableHead>Role</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Alice</TableCell>
      <TableCell>Active</TableCell>
      <TableCell>Admin</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Bob</TableCell>
      <TableCell>Inactive</TableCell>
      <TableCell>User</TableCell>
    </TableRow>
  </TableBody>
</Table>

Installation

npx bearnie add table

Usage

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

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Column</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Data</TableCell>
    </TableRow>
  </TableBody>
</Table>

Examples

With caption

A list of recent invoices.
Invoice	Status	Amount
INV001	Paid	$250.00
INV002	Pending	$150.00

<Table>
  <TableCaption>A list of recent invoices.</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Invoice</TableHead>
      <TableHead>Status</TableHead>
      <TableHead class="text-right">Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell class="font-medium">INV001</TableCell>
      <TableCell>Paid</TableCell>
      <TableCell class="text-right">$250.00</TableCell>
    </TableRow>
    <TableRow>
      <TableCell class="font-medium">INV002</TableCell>
      <TableCell>Pending</TableCell>
      <TableCell class="text-right">$150.00</TableCell>
    </TableRow>
  </TableBody>
</Table>

Item	Price
Product A	$100.00
Product B	$50.00
Total	$150.00

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Item</TableHead>
      <TableHead class="text-right">Price</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Product A</TableCell>
      <TableCell class="text-right">$100.00</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Product B</TableCell>
      <TableCell class="text-right">$50.00</TableCell>
    </TableRow>
  </TableBody>
  <TableFooter>
    <TableRow>
      <TableCell>Total</TableCell>
      <TableCell class="text-right">$150.00</TableCell>
    </TableRow>
  </TableFooter>
</Table>

With badges

Name	Status	Role
Alice Johnson	Active	Admin
Bob Smith	Inactive	User

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Status</TableHead>
      <TableHead>Role</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell class="font-medium">Alice Johnson</TableCell>
      <TableCell><Badge variant="success">Active</Badge></TableCell>
      <TableCell>Admin</TableCell>
    </TableRow>
    <TableRow>
      <TableCell class="font-medium">Bob Smith</TableCell>
      <TableCell><Badge variant="secondary">Inactive</Badge></TableCell>
      <TableCell>User</TableCell>
    </TableRow>
  </TableBody>
</Table>

Sortable

Add sortable to a TableHead to make its column sortable. Clicking cycles ascending and descending. Values that look like numbers (including $1,200.50 or 45%) sort numerically, everything else alphabetically.

		Status
Charlie	$1,200.50	Paid
Alice	$250.00	Paid
Bob	$875.00	Pending

<Table>
  <TableHeader>
    <TableRow>
      <TableHead sortable>Name</TableHead>
      <TableHead sortable>Amount</TableHead>
      <TableHead>Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Charlie</TableCell>
      <TableCell>$1,200.50</TableCell>
      <TableCell>Paid</TableCell>
    </TableRow>
    ...
  </TableBody>
</Table>

Anatomy

Table - The root table element
TableHeader - Container for header rows
TableBody - Container for body rows
TableFooter - Container for footer rows
TableRow - A single table row
TableHead - Header cell
TableCell - Body/footer cell
TableCaption - Table caption text

Props

All Table components accept class for additional CSS classes. They are structural components wrapping native HTML table elements.

TableHead

Prop	Type	Default	Description
sortable	boolean	false	Render a sort button; clicking sorts the column ascending/descending