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

import Table from "@/components/ui/table/Table.astro";
import TableHeader from "@/components/ui/table/TableHeader.astro";
import TableBody from "@/components/ui/table/TableBody.astro";
import TableFooter from "@/components/ui/table/TableFooter.astro";
import TableRow from "@/components/ui/table/TableRow.astro";
import TableHead from "@/components/ui/table/TableHead.astro";
import TableCell from "@/components/ui/table/TableCell.astro";
import TableCaption from "@/components/ui/table/TableCaption.astro";

Usage

import {
Table,
TableHeader,
TableBody,
TableRow,
TableHead,
TableCell,
} from "@/components/ui/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>

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.

Installation

Usage

Examples

With caption

With footer

With badges

Anatomy

Props