Railbase
GPTClaude

Table

A semantic data table with header, body, and footer parts.

Updated

Default
<Table class="max-w-lg">
  <TableHeader>
    <TableRow><TableHead>Invoice</TableHead><TableHead>Status</TableHead><TableHead class="text-right">Amount</TableHead></TableRow>
  </TableHeader>
  <TableBody>
    <TableRow><TableCell>INV001</TableCell><TableCell>Paid</TableCell><TableCell class="text-right">$250.00</TableCell></TableRow>
    <TableRow><TableCell>INV002</TableCell><TableCell>Pending</TableCell><TableCell class="text-right">$150.00</TableCell></TableRow>
  </TableBody>
</Table>

A semantic data table with header, body, and footer parts.

Installation

railbase ui add table

Usage

import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@/lib/ui/table";

<Table>
  <TableHeader>
    <TableRow><TableHead>Name</TableHead><TableHead>Email</TableHead></TableRow>
  </TableHeader>
  <TableBody>
    <TableRow><TableCell>Ada</TableCell><TableCell>ada@x.com</TableCell></TableRow>
  </TableBody>
</Table>

Anatomy

Exported parts: Table · TableHeader · TableBody · TableFooter · TableRow · TableHead · TableCell · TableCaption

← PreviousSwitchNext →Tabs