Table
A responsive table component.
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
| INV002 | Pending | PayPal | $150.00 |
| INV003 | Unpaid | Bank Transfer | $350.00 |
import {Table,TableBody,TableCaption,TableCell,TableHead,TableHeader,TableRow,} from "@murasakijs/ui";const invoices = [{ invoice: "INV001", status: "Paid", method: "Credit Card", amount: "$250.00",},{ invoice: "INV002", status: "Pending", method: "PayPal", amount: "$150.00",},{ invoice: "INV003", status: "Unpaid", method: "Bank Transfer", amount: "$350.00",},];export function TableDemo() {return ( <Table> <TableCaption>A list of your recent invoices.</TableCaption> <TableHeader> <TableRow> <TableHead className="w-[100px]">Invoice</TableHead> <TableHead>Status</TableHead> <TableHead>Method</TableHead> <TableHead className="text-right">Amount</TableHead> </TableRow> </TableHeader> <TableBody> {invoices.map((invoice) => ( <TableRow key={invoice.invoice}> <TableCell className="font-medium">{invoice.invoice}</TableCell> <TableCell>{invoice.status}</TableCell> <TableCell>{invoice.method}</TableCell> <TableCell className="text-right">{invoice.amount}</TableCell> </TableRow> ))} </TableBody> </Table>);}Usage
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@murasakijs/ui";<Table>
<TableHeader>
<TableRow>
<TableHead>Name</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>Row 1</TableCell>
</TableRow>
</TableBody>
</Table>API Reference
Subcomponents
| Component | Renders |
|---|---|
Table | <table>, wrapped in an overflow-auto <div> for horizontal scrolling. |
TableHeader | <thead> |
TableBody | <tbody> |
TableFooter | <tfoot> |
TableRow | <tr> |
TableHead | <th> |
TableCell | <td> |
TableCaption | <caption> |
Each subcomponent extends the matching native HTML table element's attributes.