Data display

Table

A data table: semantic <table> markup with the kit's styling, in a container that scrolls horizontally on small screens. Compose it from TableHeader, TableBody, TableRow, TableHead and TableCell.

Component	Group
Pixel button	Signature	2.0
Command palette	Overlay	3.2
Select	Form	3.9

demos/table.tsx

import { Badge } from "pixelbits/badge";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "pixelbits/table";
import { useState } from "react";

const rows = [
  ["Pixel button", "Signature", 2.0],
  ["Command palette", "Overlay", 3.2],
  ["Select", "Form", 3.9],
] as const;

export default function Demo() {
  const [asc, setAsc] = useState(true);
  const sorted = [...rows].sort((a, b) => (asc ? a[2] - b[2] : b[2] - a[2]));
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Component</TableHead>
          <TableHead>Group</TableHead>
          <TableHead
            numeric
            sort={asc ? "ascending" : "descending"}
            onSort={() => setAsc(!asc)}
          >
            kB
          </TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {sorted.map((r) => (
          <TableRow key={r[0]}>
            <TableCell>{r[0]}</TableCell>
            <TableCell>
              <Badge>{r[1]}</Badge>
            </TableCell>
            <TableCell numeric>{r[2].toFixed(1)}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}

Installation

npm: import

import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "pixelbits/table";

shadcn: copy the source

npx shadcn add https://pixelbits.ali-moradi-develop.com/r/table.json

API

<Table>

Example

<Table>
  <TableHeader><TableRow><TableHead>Component</TableHead><TableHead numeric>kB</TableHead></TableRow></TableHeader>
  <TableBody><TableRow><TableCell>Button</TableCell><TableCell numeric>2.0</TableCell></TableRow></TableBody>
</Table>

Prop	Type	Default	Description
density	"compact" \| "comfortable"	"comfortable"	Row height: `"compact"` for dense data, `"comfortable"` for reading.
wrapperClassName	string	—	Classes for the scroll container around the table.

Also accepts every prop of TableHTMLAttributes<HTMLTableElement>.

<TableHeader>

The header row group (<thead>).

<TableBody>

The body (<tbody>).

<TableRow>

A row (<tr>). Rows highlight on hover.

Prop	Type	Default	Description
selected	boolean	false	Highlight the row as selected (also sets `aria-selected`).

Also accepts every prop of HTMLAttributes<HTMLTableRowElement>.

<TableHead>

A column header (<th scope="col">), optionally sortable.

Prop	Type	Default	Description
numeric	boolean	false	Right-align (end-align in RTL) for numbers.
sort	"ascending" \| "descending" \| "none"	—	Makes the header a sort button and announces the order with `aria-sort`. `"none"` means sortable but not sorted.
onSort	() => void	—	Called when the sort button is pressed.
children	ReactNode	—	The header text.

Also accepts every prop of ThHTMLAttributes<HTMLTableCellElement>.

<TableCell>

A data cell (<td>).

Prop	Type	Default	Description
numeric	boolean	false	Right-align (end-align in RTL) and use tabular mono digits.

Also accepts every prop of TdHTMLAttributes<HTMLTableCellElement>.