Table
Tables organize and display data in rows and columns with support for headers, footers, and various cell types.
Preview
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
| INV002 | Pending | PayPal | $150.00 |
| INV003 | Unpaid | Bank Transfer | $350.00 |
Usage
tsx
import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableCaption } from '@e-infra/design-system'
<Table>
<TableCaption>A list of recent transactions</TableCaption>
<TableHeader>
<TableRow>
<TableHead>Invoice</TableHead>
<TableHead>Status</TableHead>
<TableHead>Amount</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell className="font-medium">INV001</TableCell>
<TableCell>Paid</TableCell>
<TableCell className="text-right">$250.00</TableCell>
</TableRow>
</TableBody>
</Table>Components
| Component | Description |
|---|---|
Table | Container for the table element |
TableHeader | Header section container |
TableBody | Body section container |
TableFooter | Footer section container |
TableRow | Table row element |
TableHead | Header cell (th) |
TableCell | Data cell (td) |
TableCaption | Table caption |
Props
Table
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional CSS classes |
| ...props | React.ComponentProps | - | Native table props |
TableRow
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional CSS classes |
| ...props | React.ComponentProps | - | Native tr props |