Set the table's wording, formats and density once for the whole application, at the core package's UmrissProvider.
import { UmrissProvider } from "@umriss-ui/table";
The table has no provider of its own: it reads the one of @umriss-ui/core (ADR-0016). German wording ships as @umriss-ui/core/wording/de (ADR-0019).
The table's texts and formats come from the core UmrissProvider: one language object sets them for the table and the date picker alike.
import { useState } from "react";
import { DatePicker, FormField, UmrissProvider, Stack } from "@umriss-ui/core";
import type { LanguageOptions } from "@umriss-ui/core";
import { ColumnMenu, Export, Search, Toolbar, useTable } from "@umriss-ui/table";
/* Outside the component: a provider that gets a new object on every render
recomputes on every render. */
const LANGUAGE: LanguageOptions = {
formats: {
date: (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`,
},
wording: {
columns: "View",
exportLabel: "Save as CSV",
tableSearchPlaceholder: "Search invoice …",
},
};
interface Invoice {
id: string;
supplier: string;
received: Date;
}
const INVOICES: Invoice[] = [
{ id: "INV-26-0318", supplier: "Brandlow Office Supply", received: new Date(2026, 2, 16) },
{ id: "INV-26-0317", supplier: "Kettering & Shaw Events", received: new Date(2026, 2, 13) },
{ id: "INV-26-0309", supplier: "Nimbrel Software", received: new Date(2026, 2, 9) },
];
function Invoices() {
const { Table, Column } = useTable(INVOICES, { rowKey: (i) => i.id });
return (
<Table ariaLabel="Invoices">
<Toolbar>
<Search />
<ColumnMenu />
<Export filename="invoices.csv" />
</Toolbar>
<Column value="id" label="Invoice" rowHeader />
<Column value="supplier" label="Supplier" />
<Column value="received" label="Received" format="date" />
</Table>
);
}
export default function Provider() {
const [from, setFrom] = useState<Date | null>(new Date(2026, 2, 9));
return (
<UmrissProvider language={LANGUAGE}>
<Stack gap={4}>
<Invoices />
<FormField label="Received from">
<DatePicker value={from} onChange={setFrom} />
</FormField>
</Stack>
</UmrissProvider>
);
}
The keys of First table, Input, ColumnMenu, Button and DatePicker 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. |
format | FormatFor<Z[K]> | — | A standard presentation by name: "percent", "count" or
{ decimals } for numbers, "date", "time" or "dateTime" for
points in time. Alignment, sorting, export and footer stay with the value. |
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. |