Table

Hairline rows, mono uppercase headers, tabular numbers right-aligned. Hover lights one row at a time.

Preview

import { Table, Avatar, Badge, type TableColumn } from "@/components/br/primitives";

const columns: TableColumn<Row>[] = [
  {
    key: "user", label: "Client", kind: "user",
    render: (r) => (
      <>
        <Avatar fallback={initials(r.name)} accent={r.status === "active"} />
        <div className="meta">
          <span className="name">{r.name}</span>
          <span className="email">{r.email}</span>
        </div>
      </>
    ),
  },
  { key: "mrr", label: "MRR", numeric: true,
    render: (r) => <>€{r.mrr.toLocaleString()}</> },
];

<Table title="Clients" columns={columns} rows={rows} />

Props

Notes

kind="user" turns the cell into a flex row (Avatar + .meta block). kind="actions" right-aligns + tightens for icon buttons. numeric right-aligns + applies tabular-nums.