# Provider

> Package `@umriss-ui/table`, version 0.40.0. Demo page: <https://romanhaendler.github.io/umriss-ui/table/provider/>. Every page in one line: [llms.txt](https://romanhaendler.github.io/umriss-ui/table/llms.txt); every page in full: [llms-full.txt](https://romanhaendler.github.io/umriss-ui/table/llms-full.txt).

Set the table's wording, formats and density once for the whole application, at the core package's `UmrissProvider`.

```ts
import { UmrissProvider } from "@umriss-ui/table";
```

Demo page: https://romanhaendler.github.io/umriss-ui/table/provider/

The table has no provider of its own: it reads the one of @umriss-ui/core ([ADR-0016](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0016-the-table-is-a-package-that-depends-on-ui.md)). German wording ships as `@umriss-ui/core/wording/de` ([ADR-0019](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0019-two-wordings-ship-english-is-the-default.md)).

## Examples

### Set wording and formats once

The table's texts and formats come from the core `UmrissProvider`: one `language` object sets them for the table and the date picker alike.

```tsx
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>
  );
}
```

## Keyboard

The keys of [First table](https://romanhaendler.github.io/umriss-ui/table/first-table/#keyboard-first-table), [Input](https://romanhaendler.github.io/umriss-ui/core/input/#keyboard-input), [ColumnMenu](https://romanhaendler.github.io/umriss-ui/table/columnmenu/#keyboard-columnmenu), [Button](https://romanhaendler.github.io/umriss-ui/core/button/#keyboard-button) and [DatePicker](https://romanhaendler.github.io/umriss-ui/core/datepicker/#keyboard-datepicker) apply here.

## Props on this page

From `TableProps` — the full table stands on [First table](https://romanhaendler.github.io/umriss-ui/table/first-table/#type-TableProps).

| Prop | Type | Default | Description |
|---|---|---|---|
| [`children`](https://romanhaendler.github.io/umriss-ui/table/first-table/#TableProps-children) | `ReactNode` | — | Columns, `RowDetail`, `RowActions` and the unbound parts. |

#### Accessibility

| Prop | Type | Default | Description |
|---|---|---|---|
| [`ariaLabel`](https://romanhaendler.github.io/umriss-ui/table/first-table/#TableProps-ariaLabel) | `string` | — | Accessible name of the table (not of the outer frame). |

From `TableOptions` — the full table stands on [First table](https://romanhaendler.github.io/umriss-ui/table/first-table/#type-TableOptions).

| Prop | Type | Default | Description |
|---|---|---|---|
| [`rowKey`](https://romanhaendler.github.io/umriss-ui/table/first-table/#TableOptions-rowKey) *required* | `(row: Z) => string` | — | A stable key per row – the basis of selection and expansion. |

From `FieldColumn` — the full table stands on [Column](https://romanhaendler.github.io/umriss-ui/table/column/#type-FieldColumn).

| Prop | Type | Default | Description |
|---|---|---|---|
| [`value`](https://romanhaendler.github.io/umriss-ui/table/column/#FieldColumn-value) *required* | `K` | — | A field of the row. Supplies the column's `id` at the same time. |
| [`format`](https://romanhaendler.github.io/umriss-ui/table/column/#FieldColumn-format) | [`FormatFor`](https://romanhaendler.github.io/umriss-ui/table/column/#type-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](https://romanhaendler.github.io/umriss-ui/table/column/#type-ColumnBase).

| Prop | Type | Default | Description |
|---|---|---|---|
| [`label`](https://romanhaendler.github.io/umriss-ui/table/column/#ColumnBase-label) *required* | `string` | — | Names the column in its header, in the column menu and in the header row of the export. |
| [`rowHeader`](https://romanhaendler.github.io/umriss-ui/table/column/#ColumnBase-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. |

From `ToolbarProps` — the full table stands on [Toolbar](https://romanhaendler.github.io/umriss-ui/table/toolbar/#type-ToolbarProps).

| Prop | Type | Default | Description |
|---|---|---|---|
| [`children`](https://romanhaendler.github.io/umriss-ui/table/toolbar/#ToolbarProps-children) | `ReactNode` | — | Search, column menu, export – on the left in the table toolbar, before the conditions. |

From `ExportProps` — the full table stands on [Export](https://romanhaendler.github.io/umriss-ui/table/export/#type-ExportProps).

| Prop | Type | Default | Description |
|---|---|---|---|
| [`filename`](https://romanhaendler.github.io/umriss-ui/table/export/#ExportProps-filename) | `string` | the wording's "table.csv" | File name of the download. |