Column

One value per row, read from a field or computed. Everything the table does with a column (sort, search, export, total) works on that value, never on what the cell shows.

import { useTable } from "@umriss-ui/table";

Without a presentation the value type decides: text on the left, numbers right-aligned with tabular figures, points in time as date and time, truth values as a word.

A computed value needs an id. One column is the row header: it names the row, cannot be hidden, and the row's checkbox and actions are read out with it.

A computed value (like sortValue, groupValue and rowKey) may be written inline: a new function with the same source text counts as the same one, and nothing is recomputed. A closure that reads an outer variable which has changed reads as unchanged; give the function a new text, or carry the variable in the row data.

Examples

Read a value from a field

value names a field of the row, and the compiler offers only the fields there are; the field name is the column's id as well.

import { useTable } from "@umriss-ui/table";

interface Vehicle {
  plate: string;
  type: string;
  capacity: number;
}

const VEHICLES: Vehicle[] = [
  { plate: "FP 214 K", type: "van", capacity: 1200 },
  { plate: "FP 377 K", type: "e-van", capacity: 900 },
  { plate: "FP 118 R", type: "truck", capacity: 7500 },
];

export default function ValueFromField() {
  const { Table, Column } = useTable(VEHICLES, { rowKey: (v) => v.plate });

  return (
    <Table ariaLabel="Vehicles">
      <Column value="plate" label="Plate" rowHeader />
      <Column value="type" label="Type" />
      <Column value="capacity" label="Payload (kg)" />
    </Table>
  );
}

Compute a value from the row

When value is a function the column needs an id; the computed value sorts, formats and exports like any other.

import { useTable } from "@umriss-ui/table";

interface Line {
  description: string;
  quantity: number;
  unitPrice: number;
}

const LINES: Line[] = [
  { description: "Desk lamps, LED", quantity: 24, unitPrice: 48.9 },
  { description: "Printer paper, box of 5 reams", quantity: 40, unitPrice: 21.5 },
  { description: "Delivery", quantity: 1, unitPrice: 35 },
];

export default function ComputedValue() {
  const { Table, Column } = useTable(LINES, { rowKey: (l) => l.description });

  return (
    <Table ariaLabel="Invoice lines">
      <Column value="description" label="Description" rowHeader />
      <Column value="quantity" label="Quantity" />
      <Column value="unitPrice" label="Unit price (€)" format={{ decimals: 2 }} />
      <Column id="net" label="Net (€)" value={(l) => l.quantity * l.unitPrice} format={{ decimals: 2 }} />
    </Table>
  );
}

Let the value type decide

Without children the value decides: text left, numbers right with tabular figures, dates as date and time, booleans as a word.

import { useTable } from "@umriss-ui/table";

interface Service {
  name: string;
  requests: number;
  deployed: Date;
  pages: boolean;
  openIncidents: number | null;
}

const SERVICES: Service[] = [
  { name: "Checkout", requests: 1840.5, deployed: new Date(2026, 2, 17, 9, 5), pages: true, openIncidents: 1 },
  { name: "Reporting", requests: 18, deployed: new Date(2026, 2, 16, 14, 30), pages: false, openIncidents: null },
];

export default function Defaults() {
  const { Table, Column } = useTable(SERVICES, { rowKey: (s) => s.name });

  return (
    <Table ariaLabel="Defaults per value type">
      <Column value="name" label="Text" rowHeader />
      <Column value="requests" label="Number" />
      <Column value="deployed" label="Point in time" />
      <Column value="pages" label="Truth value" />
      <Column value="openIncidents" label="Absent" />
    </Table>
  );
}

Name the row

rowHeader makes a column the row's name: it cannot be hidden, and the row's checkbox and actions are read out with it.

import { useState } from "react";
import { Stack, Text } from "@umriss-ui/core";
import { ColumnMenu, Toolbar, useTable } from "@umriss-ui/table";

interface Incident {
  id: string;
  title: string;
}

const INCIDENTS: Incident[] = [
  { id: "INC-1048", title: "Checkout slow, card payments time out" },
  { id: "INC-1047", title: "Webhook deliveries delayed" },
  { id: "INC-1046", title: "Thumbnails missing for new uploads" },
];

export default function RowHeader() {
  const [last, setLast] = useState("Nothing opened yet.");
  const { Table, Column, RowActions, Action } = useTable(INCIDENTS, { rowKey: (i) => i.id });

  return (
    <Stack gap={3}>
      <Table selectable ariaLabel="Incidents">
        <Toolbar>
          <ColumnMenu />
        </Toolbar>
        <Column value="id" label="Incident" rowHeader />
        <Column value="title" label="Title" />
        <RowActions>
          <Action onSelect={(i) => setLast(`${i.id} opened`)}>Open</Action>
        </RowActions>
      </Table>
      <Text size="sm" tone="secondary" role="status">
        {last}
      </Text>
    </Stack>
  );
}

When to use something else

• Restricting a column to some of its values → Filter
• A group key that should not be a column → Grouping
• A measured value read against a limit set → VerdictColumn

Keyboard

The keys of First table, ColumnMenu, RowActions and Checkbox apply here.

Accessibility

The label is the column header's text, and so what a screen reader says for every cell under it. The rowHeader column's cells are row headers: a reader names the row by them, and the row's checkbox and actions are named after them - “Select INC-1048”, “Open: INC-1048”. Without one, each of those says only its own word.

API

type FormatFor<W> = [Present<W>] extends [number]
  ? NumberFormat
  : [Present<W>] extends [Date]
    ? DateFormat
    : never;

type FilterFor<W> =
  | (IsDisplayable<W> extends true ? "list" : never)
  | ([Present<W>] extends [number] ? "range" : [Present<W>] extends [Date] ? "range" : never)
  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- the condition belongs to the filter; at the column only the value counts
  | ColumnFilter<Present<W>, any>;

type GroupFor<W> = [Present<W>] extends [Date] ? DatePeriod : never;

type EditFor<W, Z> =
  | ([Present<W>] extends [string] ? "text" | "select" : never)
  | ([Present<W>] extends [number] ? "number" | "select" : never)
  | ([Present<W>] extends [Date] ? "date" : never)
  | ((editor: CellEditorProps<W, Z>) => ReactNode);

type Present<W> = Exclude<W, Absent>;

type Presentation<W, Z> = (value: Present<W>, row: Z) => ReactNode;

type Pin = "start" | "end";

type Absent = null | undefined;

type NumberFormat = "percent" | "count" | { decimals: number };

type DateFormat = "date" | "time" | "dateTime";

type IsDisplayable<W> = [Present<W>] extends [never]
  ? false
  : [Present<W>] extends [Displayable]
    ? true
    : false;

type DatePeriod = "day" | "week" | "month" | "year";

type Displayable = string | number | boolean | Date;

Every page of @umriss-ui/table

Getting started

• Installation
• First table
• Provider

Columns

• Column
• Formats
• Width and pinning
• Presets

Finding rows

• Sorting
• Search
• Filter
• Pre-filter

Grouping

• Grouping
• Tree rows
• Aggregate

Rows

• Selection
• Row appearance
• RowDetail
• RowActions

Around the table

• Toolbar
• Toolbar controls
• ColumnMenu
• Export
• View

Many rows

• Pagination
• Virtualisation
• Benchmark
• Server mode

Editing

• Grid mode
• Edits

Limits and alarms

• VerdictColumn

API index

• API index