Table

Customer	Date/Time	Location	Total	Status
Alex Cooper	Feb 17, 2024 08:48 AM	123 Main Street, Anytown, USA	$1042.25	Paid
Cameron Williamson	Feb 17, 2024 08:48 AM	456 Elm Avenue, Smallville, CA	$1042.25	Pending
Lindsay Walton	Feb 17, 2024 08:48 AM	789 Maple Lane, Pleasantville, NY	$1042.25	Paid
Leonard Krasner	Feb 17, 2024 08:48 AM	890 Birch Boulevard, Riverside, WA	$1042.25	Returned

Installation

NPM packages are currently unstable and may cause issues. Use it at your own risk.

npm install @mijn-ui/react-table

Usage

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.

Installation

Usage

Table Style Slots

On this page