Grid mode

Make the table one Tab stop whose cells the arrow keys walk, as in a spreadsheet. It is the mode for editing; keep it off for tables that are only read.

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

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 changes that on request only (ADR-0034).

Examples

Work cell by cell

grid makes the table one Tab stop whose cells the arrows walk; Enter reaches a cell's controls. Keep it off for tables that are only read.

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

interface Service {
  id: string;
  name: string;
  team: string;
  requests: number;
  state: string;
}

const SERVICES: Service[] = [
  { id: "checkout", name: "Checkout", team: "Payments", requests: 1840, state: "Degraded" },
  { id: "billing", name: "Billing", team: "Payments", requests: 620, state: "Healthy" },
  { id: "sign-in", name: "Sign-in", team: "Identity", requests: 2210, state: "Healthy" },
  { id: "search", name: "Search", team: "Discovery", requests: 3105, state: "Healthy" },
  { id: "webhooks", name: "Webhooks", team: "Integrations", requests: 410, state: "Delayed" },
];

export default function GridMode() {
  const { Table, Column, RowActions, Action } = useTable(SERVICES, { rowKey: (s) => s.id });
  return (
    <Table grid selectable ariaLabel="Services">
      <Column value="name" label="Service" rowHeader />
      <Column value="team" label="Team" />
      <Column value="requests" label="Requests a minute" format="count" aggregate="sum" />
      <Column value="state" label="State" />
      <RowActions>
        <Action onSelect={() => undefined}>Dashboard</Action>
      </RowActions>
    </Table>
  );
}

Combine grid mode with groups, pinning and many rows

Grid mode keeps everything else: a group header is a line the arrows walk, and in a virtual window the keys reach unrendered rows.

import { useMemo, useState } from "react";
import { useTable } from "@umriss-ui/table";

interface Parcel {
  id: string;
  parcel: string;
  depot: string;
  weight: number;
  declared: number;
  note: string;
}

const DEPOTS = ["North depot", "Riverside depot", "East Gate depot"] as const;

/* A linear congruential generator: the same seed yields the same rows. */
function generate(count: number): Parcel[] {
  let seed = 20260924;
  const next = () => {
    seed = (seed * 1103515245 + 12345) % 2147483648;
    return seed / 2147483648;
  };
  return Array.from({ length: count }, (_, i) => ({
    id: `x${i}`,
    parcel: `FP-${String(1_004_210 + i)}`,
    depot: DEPOTS[Math.floor(next() * DEPOTS.length)]!,
    weight: Math.round(next() * 300) / 10,
    declared: Math.round(next() * 50_000) / 100,
    note: "",
  }));
}

export default function TheWholeGrid() {
  const generated = useMemo(() => generate(2000), []);
  const [parcels, setParcels] = useState(generated);
  const { Table, Column } = useTable(parcels, {
    rowKey: (p) => p.id,
    defaultGrouping: "depot",
    defaultSort: { column: "parcel", direction: "asc" },
    virtual: true,
  });
  return (
    <Table
      grid
      selectable
      stickyHeader
      maxHeight="360px"
      ariaLabel="Parcels by depot"
      onCellEdit={({ rowKey, columnId, value }) =>
        setParcels((all) => all.map((p) => (p.id === rowKey ? { ...p, [columnId]: value } : p)))
      }
    >
      <Column value="parcel" label="Parcel" rowHeader pin="start" width={130} />
      <Column value="depot" label="Depot" />
      <Column
        value="weight"
        label="Weight (kg)"
        format={{ decimals: 1 }}
        edit="number"
        validate={(value) => (value === null || value <= 0 || value > 31.5 ? "Between 0 and 31.5 kg" : undefined)}
        width={140}
      />
      <Column value="declared" label="Declared value (€)" format={{ decimals: 2 }} aggregate="sum" width={170} />
      <Column value="note" label="Note" edit="text" width={260} />
    </Table>
  );
}

Keyboard

Key	Action
Tab	Enters and leaves the grid, which is one stop.
← → ↑ ↓	Moves the active cell.
Home / End	The first or last cell of the row.
Ctrl + Home / Ctrl + End	The first cell of the head, the last cell of the footer.
Page Up / Page Down	Moves by the rows in view.
Click	Opens the editor of a cell that edits; a select shows its list, a day its calendar.
Enter / F2	Starts an edit, or reaches the cell's own controls.
Escape	Cancels an edit, or goes back from a control to its cell.
Ctrl / Cmd + C	Copies the selected rows, or the active cell; its cell flashes. In an open editor with nothing marked it copies the field's value.
Space	Selects the row of the active cell.

Props on this page

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