Components
Table
A structured layout for displaying tabular data.
| Customer | Date/Time | Total | Status | |
|---|---|---|---|---|
| Alex Cooper | Feb 17, 2024 08:48 AM | $1042.25 | Paid | |
| Cameron Williamson | Feb 17, 2024 08:48 AM | $1042.25 | Pending | |
| Lindsay Walton | Feb 17, 2024 08:48 AM | $1042.25 | Paid | |
| Leonard Krasner | Feb 17, 2024 08:48 AM | $1042.25 | Returned |
Installation
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>API Reference
Standard element attributes are forwarded to the underlying component in addition to the props below.
| Prop | Type | Default | Description |
|---|---|---|---|
unstyled | boolean | false | Opt out of the default styles to fully customize the component. |
classNames | object | — | Override classes per slot (see Style Slots below). |
className | string | — | Additional classes for the root element. |
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. |