Components
Table
A structured layout for displaying tabular data.
Loading...
Installation
NPM packages are currently unstable and may cause issues. Use it at your own risk.
npm install @mijn-ui/react-tableUsage
import {
Table,
TableBody,
TableCaption,
TableCell,
TableHeader,
TableHeaderCell,
TableRow,
} from "@mijn-ui/react-table"<Table>
<TableCaption>A list of your recent invoices.</TableCaption>
<TableHeader>
<TableRow>
<TableHeaderCell className="w-[100px]">Invoice</TableHeaderCell>
<TableHeaderCell>Status</TableHeaderCell>
<TableHeaderCell>Method</TableHeaderCell>
<TableHeaderCell className="text-right">Amount</TableHeaderCell>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell className="font-medium">INV001</TableCell>
<TableCell>Paid</TableCell>
<TableCell>Credit Card</TableCell>
<TableCell className="text-right">$250.00</TableCell>
</TableRow>
</TableBody>
</Table>Table Style Slots
| Slot Name | Targeted Component | Purpose |
|---|---|---|
base | Table | Styles the root table component. |
header | TableHeader | Styles the table header. |
body | TableBody | Styles the table body. |
footer | TableFooter | Styles the table footer. |
row | TableRow | Styles table rows. |
headerCell | TableHeaderCell | Styles individual header cells. |
cell | TableCell | Styles individual cells. |
caption | TableCaption | Styles the table caption. |