ascii.cnlibs.com
GithubX

Table

A responsive table component.

metric
today
7d avg
requests
128,402
119,880
errors
12
18
p95 latency
84ms
91ms
totals
128,414
119,898
Traffic for payments-api, last 24h.

## installation

pnpm dlx shadcn@latest add https://ascii.cnlibs.com/r/table.json

## usage

import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "@/components/ui/table";
<Table widths={[14, 10, 10]}>
  <TableHeader>
    <TableRow>
      <TableHead>metric</TableHead>
      <TableHead align="right">today</TableHead>
      <TableHead align="right">7d avg</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    {rows.map((row) => (
      <TableRow key={row.metric}>
        <TableCell>{row.metric}</TableCell>
        <TableCell align="right">{row.today}</TableCell>
        <TableCell align="right">{row.avg}</TableCell>
      </TableRow>
    ))}
  </TableBody>
  <TableFooter>
    <TableRow>
      <TableCell>totals</TableCell>
      <TableCell align="right">128,414</TableCell>
      <TableCell align="right">119,898</TableCell>
    </TableRow>
  </TableFooter>
</Table>
<TableCaption>Traffic for payments-api, last 24h.</TableCaption>