Table

Composed from its parts — header, row, cell, empty state — with sorting, sticky heads and zebra rows.

Source: 1 file
Dependencies: none
Playground: no

Examples

Every variant of the shipped component, live. Switch the layout to read them as a table or one at a time, and open Code for the file behind them.

Data table

		Status
AE Amelia Evans amelia@glazegrain.com	Glaze & Grain	Active
AT Ava Thompson ava@apexlogic.io	Apex Logic	New
BT Benjamin Taylor ben@echomedia.co	Echo Media	Active
CC Charlotte Campbell charlotte@aura.health	Aura Wellness	Inactive
EC Emma Collins emma@terrapulse.com	TerraPulse	Active

<Checkbox indeterminate onCheckedChange={…} /> · bulk action bar

Installation

One package for the whole library — run this once and every component on this site is importable. Adding the tokens to your stylesheet is the other half; the installation guide covers it.

npm install kipui

import {
  Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableEmpty,
} from "kipui";

Peer dependencies

react 19

react-dom 19

tailwindcss 4

Bundled dependencies

None beyond the peers above.

Usage

table-example.tsx

import {
  Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableEmpty,
} from "kipui";

<Table hoverable gridLines>
  <TableHeader>
    <TableRow>
      <TableHead sortable sortDirection="asc">Name</TableHead>
      <TableHead align="right">Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Amelia Evans</TableCell>
      <TableCell align="right">$1,204</TableCell>
    </TableRow>
  </TableBody>
</Table>

`stickyHeader` needs a max height on the scroll container — pass it through `containerClassName`.
`TableEmpty` spans the full width and is what you render instead of a body, not inside one.
`sortDirection` takes `false` for columns that aren't the current sort key; that is what clears `aria-sort`.

API reference

Transcribed from the component's own types. Props with no default are required.

Table

Prop	Default	Description
stripedboolean	false	Zebra rows.
hoverableboolean	false	Row highlight on hover.
denseboolean	false	Tighter cell padding.
stickyHeaderboolean	false	Header stays put while the container scrolls.
borderedboolean	true	Border and rounding on the scroll container.
gridLinesboolean	false	Vertical rules between columns.
containerClassNamestring	required	Classes for the scroll container — max height, rounding.

TableHead

Prop	Default	Description
align"left" \| "center" \| "right"	"left"	Cell alignment.
sortableboolean	false	Renders the label as a sort button with a caret.
sortDirection"asc" \| "desc" \| false	false	Active direction; drives `aria-sort`.
onSort() => void	required	Called when a `sortable` head is activated. You own the sorting.