Table - Stera UI

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

Installation

pnpm dlx stera-ui add table

Usage

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

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Invoice #001</TableCell>
      <TableCell>Paid</TableCell>
    </TableRow>
  </TableBody>
</Table>

With Footer

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
Total			$1,750.00

TableFooter renders a sticky-style summary row at the bottom of the table.

API Reference

Subcomponents

Component	Description
`TableHeader`	`<thead>` wrapper
`TableBody`	`<tbody>` wrapper
`TableFooter`	`<tfoot>` wrapper
`TableRow`	`<tr>` element
`TableHead`	`<th>` column header cell
`TableCell`	`<td>` data cell
`TableCaption`	Accessible caption rendered below the table