Data table

Sorts and presents structured records. Column headers expose aria-sort.

Preview


Strategy	2
Identity	4
Digital	6

In action

Sort

Phase	Weeks
Identity	4
Strategy	2

When to use

Use it for

Rows from data with sortable columns and an empty state.
render for cells that are not plain values; sortValue for custom sort keys.

Not for

Hand-written rows; use Table.
Pagination, selection, or editing; compose those around it.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { DataTable } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/data-table.

2. Vendor the source

npx @noorddev/vlak-cli add data-table

The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/data-table.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { DataTable } from "@noorddev/vlak-react";

<DataTable
  columns={[
    { key: "phase", header: "Phase", sortable: true },
    { key: "weeks", header: "Weeks", sortable: true },
    { key: "owner", header: "Owner", render: (row) => row.owner.name },
  ]}
  rows={rows}
  rowKey={(row) => row.id}
  emptyLabel="No phases yet."
/>

Props

DataTable (function)

Sortable rows over the plain rs-table.

Keyboard

Keys	Does
`Tab`	Moves between the sort buttons
`Enter, Space`	Sorts ascending, then descending, then clears

Accessibility

Sortable headers hold a native <button>; the <th> carries aria-sort while sorted.
The empty state is plain text under the table.

Markup

<table class="rs-table"><thead><tr><th><button class="rs-datatable-sort">Phase</button></th><th>Weeks</th></tr></thead><tbody><tr><td>Identity</td><td>4</td></tr><tr><td>Strategy</td><td>2</td></tr></tbody></table>

Classes

.rs-datatable-sort.rs-datatable-empty.rs-datatable-sort-icon.rs-datatable-sort-icon-on.rs-datatable-table.rs-datatable-td.rs-datatable-td-alt.rs-datatable-th

Depends on

/table