Selection

Tick rows to act on them together (also called row selection or multi-select).

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

“Select all” selects what search and filters leave, on every page.

Examples

Select rows

selectable adds the selection column; “select all” takes what the search leaves. Search “Oak”, select all, clear the search.

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

interface Shipment {
  id: string;
  customer: string;
  tour: string;
}

const SHIPMENTS: Shipment[] = [
  { id: "FP-1004210", customer: "Holloway Garden Supplies", tour: "T-01" },
  { id: "FP-1004223", customer: "Oakridge Pharmacy", tour: "T-01" },
  { id: "FP-1004236", customer: "Brixley Cycles", tour: "T-02" },
  { id: "FP-1004249", customer: "Oakridge Pharmacy", tour: "T-02" },
  { id: "FP-1004262", customer: "Pellham Hardware", tour: "T-03" },
  { id: "FP-1004275", customer: "Oakridge Pharmacy", tour: "T-03" },
];

export default function Selection() {
  const t = useTable(SHIPMENTS, { rowKey: (s) => s.id });
  const { Table, Column } = t;
  const inTheSet = t.filtered.filter((s) => t.selection.isSelected(s.id)).length;

  return (
    <Stack gap={3}>
      <Table selectable ariaLabel="Shipments">
        <Toolbar>
          <Search placeholder="Search customer" />
        </Toolbar>
        <Column value="id" label="Shipment" rowHeader />
        <Column value="customer" label="Customer" />
        <Column value="tour" label="Tour" />
      </Table>
      <Text size="xs" tone="muted">
        {t.selection.count} selected, {inTheSet} of them in the filtered set.
      </Text>
    </Stack>
  );
}

Hold the selection yourself

Make it with useTableSelection and pass it to useTable as selection: the application counts it, fills it and clears it from controls of its own.

import { Button, Stack, Text } from "@umriss-ui/core";
import { useTable, useTableSelection } from "@umriss-ui/table";

interface Shipment {
  id: string;
  customer: string;
  tour: string;
}

const SHIPMENTS: Shipment[] = [
  { id: "FP-1004210", customer: "Holloway Garden Supplies", tour: "T-01" },
  { id: "FP-1004223", customer: "Oakridge Pharmacy", tour: "T-01" },
  { id: "FP-1004236", customer: "Brixley Cycles", tour: "T-02" },
  { id: "FP-1004249", customer: "Oakridge Pharmacy", tour: "T-02" },
  { id: "FP-1004262", customer: "Pellham Hardware", tour: "T-03" },
];

const IDS = SHIPMENTS.map((s) => s.id);
const OAKRIDGE = SHIPMENTS.filter((s) => s.customer === "Oakridge Pharmacy").map((s) => s.id);

export default function HoldTheSelectionYourself() {
  const selection = useTableSelection(IDS);
  const { Table, Column } = useTable(SHIPMENTS, { rowKey: (s) => s.id, selection });

  return (
    <Stack gap={3}>
      <Stack direction="row" gap={2} align="center" wrap>
        <Button size="sm" variant="secondary" onClick={() => OAKRIDGE.filter((id) => !selection.isSelected(id)).forEach(selection.toggle)}>
          Select Oakridge Pharmacy
        </Button>
        <Button size="sm" variant="secondary" onClick={selection.clear} disabled={selection.count === 0}>
          Clear
        </Button>
        <Text size="xs" tone="muted">
          {selection.count} of {SHIPMENTS.length} to load
        </Text>
      </Stack>
      <Table selectable ariaLabel="Shipments">
        <Column value="id" label="Shipment" rowHeader />
        <Column value="customer" label="Customer" />
        <Column value="tour" label="Tour" />
      </Table>
    </Stack>
  );
}

When to use something else

Keyboard

The keys of First table, Checkbox and Input apply here.

Props on this page

From TableProps — the full table stands on First table.

NameTypeDefaultDescription
selectableboolean—Adds the selection column. "All" means: the filtered set.
childrenReactNode—Columns, RowDetail, RowActions and the unbound parts.

Accessibility

NameTypeDefaultDescription
ariaLabelstring—Accessible name of the table (not of the outer frame).

From TableOptions — the full table stands on First table.

NameTypeDefaultDescription
rowKeyrequired(row: Z) => string—A stable key per row – the basis of selection and expansion.
selectionTableSelection<string>—A selection from outside instead of its own – when the application holds it.

From TableSnapshot — the full table stands on First table.

NameTypeDefaultDescription
filteredrequiredreadonly Z[]—The filtered set: what the pre-filter admits and search and filters leave, across all pages.
selectionrequiredTableSelection<string>—The selection – its own or the one handed in through selection.

From FieldColumn — the full table stands on Column.

NameTypeDefaultDescription
valuerequiredK—A field of the row. Supplies the column's id at the same time.

From ColumnBase — the full table stands on Column.

NameTypeDefaultDescription
labelrequiredstring—Names the column in its header, in the column menu and in the header row of the export.
rowHeaderboolean—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 SearchProps — the full table stands on Search.

NameTypeDefaultDescription
placeholderstringthe wording's "Search …"The placeholder in the field.

From ToolbarProps — the full table stands on Toolbar.

NameTypeDefaultDescription
childrenReactNode—Search, column menu, export – on the left in the table toolbar, before the conditions.

Known limits

What umriss deliberately does not build, and why: ADR-0032.

Every page of @umriss-ui/table

Getting started

Columns

Finding rows

Grouping

Rows

Around the table

Many rows

Editing

Limits and alarms

API index