# DataTable

Cynco's data-table kit on TanStack Table: toolbar, heading, tray, header, body, virtualisation, pagination and column visibility.

```tsx
import { DataTable } from "@cynco-labs/ui";
```

## Usage

```tsx
import { ReceiptIcon } from "@phosphor-icons/react";
import { getCoreRowModel, useReactTable } from "@tanstack/react-table";
import { Button, DataTable, StatusChip } from "@cynco-labs/ui";

const data = [
	{ id: "INV-2026-0142", name: "Nusantara Logistik Bhd", amount: "RM 12,720.00", status: "Paid" },
	{
		id: "INV-2026-0141",
		name: "TechNova Solutions Sdn Bhd",
		amount: "RM 3,180.00",
		status: "Sent",
	},
	{ id: "INV-2026-0140", name: "Kedai Runcit Maju Jaya", amount: "RM 486.50", status: "Overdue" },
];

const tone = { Paid: "green", Sent: "blue", Overdue: "amber" };

const columns = [
	{ accessorKey: "name", header: "Customer" },
	{
		accessorKey: "id",
		header: "Invoice",
		cell: (c) => <span className="text-tiny-id text-tertiary-foreground">{c.getValue()}</span>,
	},
	{ accessorKey: "amount", header: "Amount" },
	{
		accessorKey: "status",
		header: "Status",
		cell: (c) => (
			<StatusChip tone={tone[c.getValue()]} glyph="check">
				{c.getValue()}
			</StatusChip>
		),
	},
];

export default function DataTableDemo() {
	const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() });
	return (
		<div>
			<DataTable.Toolbar>
				<div className="flex w-full justify-between items-center">
					<DataTable.Heading>
						<ReceiptIcon size={16} weight="fill" className="text-subtle" />
						Invoices
					</DataTable.Heading>
					<DataTable.Actions>
						<Button variant="primary">Create invoice</Button>
					</DataTable.Actions>
				</div>
			</DataTable.Toolbar>
			<DataTable.Provider
				config={{ table, numberOfColumns: columns.length, isLoading: false, rowClassName: "h-10" }}
			>
				<DataTable.Container>
					<DataTable.Content>
						<DataTable.Header />
						<DataTable.Body />
					</DataTable.Content>
				</DataTable.Container>
			</DataTable.Provider>
		</div>
	);
}
```

## Use

Every list page (invoices, customers, items).

## Props

A TanStack `table` instance (`useReactTable` + `getCoreRowModel` from `@tanstack/react-table`) passed via `DataTable.Provider config={{table, numberOfColumns, isLoading}}`; compose `Toolbar` › `Heading` + `Actions`, then `Container` › `Content` › `Header` + `Body`. Optional `onRowClick`, `getRowHref` + `linkComponent`, `enableSelection`, `virtualization`.

## Notes

Exported as `DataTable` so it does not clash with the `Table` primitive. Surfaces use the `table-*` tokens.

Category: Components · Data display. Source: `packages/ui/src/base/components/table/index.tsx`.