NAMCHE UI

Table

A plain HTML table with hairline rows and the system's type scale.

NameKeyScopeLast used
sirdar-productionnmk_live_7f2aFull access2 min ago
machermo-cinmk_live_9c1eRead only1 hour ago
sandbox-evalnmk_test_4b08Read only3 days ago
legacy-ingestnmk_live_2d55Full accessRevoked

Install

pnpm dlx shadcn@latest add @namche/table

Usage

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead className="text-right">Last used</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>sirdar-production</TableCell>
      <TableCell className="text-right">2 min ago</TableCell>
    </TableRow>
  </TableBody>
</Table>

Table wraps itself in a scrollable container, so a wide table on a narrow viewport scrolls horizontally instead of breaking the page layout. Rows get a hover background and a data-[state=selected] background for selection UIs; TableFooter is available for a totals row and picks up the same muted background as CardFooter.

On this page