Table

v0.2.4
Stable

A bare data table: describe `columns` once (a `title` plus a `dataIndex` or a custom `render`), pass `data`, get a `<table>` back. No sorting, pagination or empty state — add those around it.

pnpm add @behivetech/atoms.table

You are viewing Table v0.2.4, snapshotted 2026-11-09. The latest is v0.2.5. Go to the latest →

A bare data table: describe columns once (a title plus a dataIndex or a custom render), pass data, get a <table> back. No sorting, pagination or empty state — add those around it.

Usage

1import { Table } from "@behivetech/atoms.table";
2

3function Example() {
4  const columns = [
5    { key: "name", title: "Name", dataIndex: "name" },
6    { key: "status", title: "Status", dataIndex: "status" },
7  ];
8  const data = [
9    { id: "1", name: "Hero banner", status: "Published" },
10    { id: "2", name: "Pricing table", status: "Draft" },
11  ];
12  return <Table columns={columns} data={data} rowKey={(row) => row.id} />;
13}

Examples

Open all 3 →
Basic Table
1interface Invoice {
2  id: string;
3  customer: string;
4  amount: number;
5  status: "paid" | "overdue";
6}
7

8const invoices: Invoice[] = [
9  { id: "inv-1", customer: "Acme Co", amount: 240, status: "paid" },
10  { id: "inv-2", customer: "Globex", amount: 90, status: "overdue" },
11  { id: "inv-3", customer: "Initech", amount: 512, status: "paid" },
12];
13

14const basicColumns: TableColumn<Invoice>[] = [
15  { key: "customer", title: "Customer", dataIndex: "customer" },
16  { key: "amount", title: "Amount", dataIndex: "amount" },
17];
18

19const BasicTable = () => (
20  <Table columns={basicColumns} data={invoices} rowKey={(row) => row.id} />
21);
22

23render(<BasicTable />);
Table With Custom Cells
1interface Invoice {
2  id: string;
3  customer: string;
4  amount: number;
5  status: "paid" | "overdue";
6}
7

8const invoices: Invoice[] = [
9  { id: "inv-1", customer: "Acme Co", amount: 240, status: "paid" },
10  { id: "inv-2", customer: "Globex", amount: 90, status: "overdue" },
11  { id: "inv-3", customer: "Initech", amount: 512, status: "paid" },
12];
13

14const richColumns: TableColumn<Invoice>[] = [
15  { key: "customer", title: "Customer", dataIndex: "customer" },
16  {
17    key: "amount",
18    title: "Amount",
19    dataIndex: "amount",
20    render: (value) => `$${value}`,
21  },
22  {
23    key: "status",
24    title: "Status",
25    render: (_value, row) =>
26      row.status === "overdue" ? "⚠️ overdue" : "✓ paid",
27  },
28];
29

30const TableWithCustomCells = () => (
31  <Table columns={richColumns} data={invoices} rowKey={(row) => row.id} />
32);
33

34render(<TableWithCustomCells />);

Properties

Table props

PropTypeDefaultDescription
columns*TableColumn<TRow>[]—Column definitions, rendered left to right
data*TRow[]—Rows to render, in the order given — Table does not sort, paginate, or filter
rowKey*(row: TRow) => string—Returns a stable, unique key for a row, used as its React key
classNamestring—Additional class names to merge with the component root element