Two packages, no stylesheet to import, and one hook that turns an array of rows into a table.
import { useTable } from "@umriss-ui/table";
npm install @umriss-ui/table @umriss-ui/core
The command brings the core package along, a peer dependency: the table reads its provider, its formats and its wording (ADR-0016). React 19 or newer is a peer as well and stays the application's own.
There is no stylesheet to import. The table loads its own, and the core package loads the tokens it reads; both lie in cascade layers, so the application's CSS wins. @umriss-ui/table/styles.css stays exported for setups that link stylesheets by hand.
A table is read by default: a native table, where every control is one Tab away and a screen reader keeps its table keys. Grid mode makes it one Tab stop whose cells the arrow keys walk, and it is the mode for editing. Switch it on only where people work in the cells (ADR-0034).
useTable binds the row kind once; its Column offers exactly the fields a person has, and rowKey names each row.
import { useTable } from "@umriss-ui/table";
interface Person {
id: string;
name: string;
role: string;
team: string;
capacity: number;
}
const PEOPLE: Person[] = [
{ id: "maya", name: "Maya Lindgren", role: "Product manager", team: "Web", capacity: 32 },
{ id: "arjun", name: "Arjun Mehta", role: "Developer", team: "Web", capacity: 40 },
{ id: "noah", name: "Noah Fischer", role: "Designer", team: "Web", capacity: 24 },
{ id: "hana", name: "Hana Sato", role: "Developer", team: "Apps", capacity: 40 },
{ id: "david", name: "David Kowalski", role: "QA engineer", team: "Apps", capacity: 20 },
];
export default function FirstTable() {
const { Table, Column } = useTable(PEOPLE, { rowKey: (p) => p.id });
return (
<Table ariaLabel="Team">
<Column value="name" label="Name" rowHeader />
<Column value="role" label="Role" />
<Column value="team" label="Team" />
<Column value="capacity" label="Hours a week" />
</Table>
);
}
The keys of First table apply here.
From TableProps — the full table stands on First table.
| Name | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Columns, RowDetail, RowActions and the unbound parts. |
| Name | Type | Default | Description |
|---|---|---|---|
ariaLabel | string | — | Accessible name of the table (not of the outer frame). |
From TableOptions — the full table stands on First table.
| Name | Type | Default | Description |
|---|---|---|---|
rowKeyrequired | (row: Z) => string | — | A stable key per row – the basis of selection and expansion. |
From FieldColumn — the full table stands on Column.
| Name | Type | Default | Description |
|---|---|---|---|
valuerequired | K | — | A field of the row. Supplies the column's id at the same time. |
From ColumnBase — the full table stands on Column.
| Name | Type | Default | Description |
|---|---|---|---|
labelrequired | string | — | Names the column in its header, in the column menu and in the header row of the export. |
rowHeader | boolean | — | This column names the row: row header cells, never hideable, the column
stickyRowHeader pins, and the name by which the row's selection, expander and
actions are read out. At most one per table. |