Components
Table

Table

A responsive table component.

A list of your tools.
BarcodeToolManufacturerTypePrice
HD128794HammerStanley
Hand Tool
$25.00
HD128798ScrewdriverCraftsman
Hand Tool
$15.00
HD128792PliersKlein Tools
Hand Tool
$35.00
HD128793LevelDeWalt
Hand Tool
$45.00
HD128782Tape measureMilwaukee
Hand Tool
$15.00
PT763124Circular sawMakita
Power Tool
$200.00
PT763128DrillRyobi
Power Tool
$300.00

Usage

import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from '~/components/table';
import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from '~/components/table';
<Table>
  <TableCaption>A list of tools.</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead className="w-[100px]">Barcode</TableHead>
      <TableHead>Name</TableHead>
      <TableHead>Manufacturer</TableHead>
      <TableHead className="text-right">Price</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell className="font-medium">HD128794</TableCell>
      <TableCell>Hammer</TableCell>
      <TableCell>Stanley</TableCell>
      <TableCell className="text-right">$25.00</TableCell>
    </TableRow>
  </TableBody>
</Table>
<Table>
  <TableCaption>A list of tools.</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead className="w-[100px]">Barcode</TableHead>
      <TableHead>Name</TableHead>
      <TableHead>Manufacturer</TableHead>
      <TableHead className="text-right">Price</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell className="font-medium">HD128794</TableCell>
      <TableCell>Hammer</TableCell>
      <TableCell>Stanley</TableCell>
      <TableCell className="text-right">$25.00</TableCell>
    </TableRow>
  </TableBody>
</Table>