React Table Component

0 of 5 selected
		Status
INV-001	Acme Corp	Paid	$250.00
INV-002	Globex	Pending	$1,500.00
INV-003	Initech	Overdue	$350.00
INV-004	Umbrella	Paid	$450.00
INV-005	Hooli	Pending	$550.00

Installation

pnpm add krz-ui

Usage

import { Table } from "krz-ui";

<Table
  data={invoices}
  rowKey={(row) => row.id}
  selectable
  columns={[
    { key: "id", header: "Invoice", sortable: true },
    { key: "status", header: "Status", cell: (row) => <Badge>{row.status}</Badge> },
    { key: "amount", header: "Amount", sortable: true, align: "right" },
  ]}
/>

API Reference

Prop	Type	Description
`columns`	`TableColumn[]`	key, header, cell, sortable, sortValue, align and width.
`data / rowKey`	`T[] / (row) => string`	Rows and a unique key for each.
`sort / defaultSort / onSortChange`	`TableSort \| null`	Controlled sort disables built-in sorting (e.g. sort on the server).
`selectable`	`boolean`	Adds a checkbox column.
`selectedKeys / onSelectionChange`	`string[]`	Controlled selection.
`striped / compact`	`boolean`	Visual density.
`emptyState / caption`	`ReactNode`	Shown when there's no data / under the table.
`onRowClick`	`(row) => void`	Makes rows clickable.
`className / style / ref`	`—`	All go to the outer element. See Customization.
`classNames`	`{ table?, caption?, head?, headerCell?, sortButton?, body?, row?, cell?, empty?, select? }`	Extra classes for inner parts.