Table

Presents structured values in rows and columns. 1px row rules; total rows use 2px rules.

Preview

Phase	Weeks
Strategy	2
Identity	4

In action

Plan

The job

Phases in weeks. Hairline rows, no zebra hue.

Phase	Weeks
Strategy	2
Identity	4

When to use

Use it for

Static tabular data with a last column of numbers.
total on the closing row and its cells for 2px rules.

Not for

Sorting and empty states; use DataTable.
Layout; use the grid.

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 { Table, TableBody, TableHead, TableRow, TableTd, TableTh } from "@noorddev/vlak-react";

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

2. Vendor the source

npx @noorddev/vlak-cli add table

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

3. Through shadcn

npx shadcn add https://vlak.dev/r/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 { Table, TableBody, TableHead, TableRow, TableTd, TableTh } from "@noorddev/vlak-react";

<Table>
  <TableHead>
    <TableRow>
      <TableTh scope="col">Phase</TableTh>
      <TableTh scope="col">Weeks</TableTh>
    </TableRow>
  </TableHead>
  <TableBody>
    <TableRow>
      <TableTd>Strategy</TableTd>
      <TableTd>2</TableTd>
    </TableRow>
    <TableRow total>
      <TableTd total>Total</TableTd>
      <TableTd total>6</TableTd>
    </TableRow>
  </TableBody>
</Table>

Props

Table

Open grid, 1px row rules, last column right-aligned.

Also accepts TableHTMLAttributes<HTMLTableElement>.

TableBody

Also accepts HTMLAttributes<HTMLTableSectionElement>.

TableHead

Also accepts HTMLAttributes<HTMLTableSectionElement>.

TableRow

Prop	Type	Default	Description
`total`	`boolean`		2px rules, ink cells.

Also accepts HTMLAttributes<HTMLTableRowElement>.

TableTd

Prop	Type	Default	Description
`total`	`boolean`

Also accepts TdHTMLAttributes<HTMLTableCellElement>.

TableTh

Also accepts ThHTMLAttributes<HTMLTableCellElement>.

Accessibility

A native <table>; use TableTh with scope for headers and add a <caption> when the table needs a name.
The ref on Table is forwarded to the <table>.

Markup

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

Classes

.rs-table.rs-total-row.rs-table-row.rs-table-td.rs-table-th.rs-table-total-cell