Presets

A column written once and used in many tables: as a preset spread into a column, or as a component that brings its own presentation.

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

Examples

Share a column between tables

column<P>() makes a preset bound to a property, not to a row kind; spread it into any table whose rows have that field.

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

/* The compiler checks the spread: a row without a numeric `amount` is
   refused. With more than one field, name the field too -
   `column<{ amount: number; id: string }, "amount">(…)`. */
const amount = column<{ amount: number }>({ value: "amount", label: "Amount (€)", format: { decimals: 2 }, aggregate: "sum" });

interface Invoice {
  id: string;
  amount: number;
}

interface Budget {
  costCentre: string;
  amount: number;
}

const INVOICES: Invoice[] = [
  { id: "INV-26-0318", amount: 1951.24 },
  { id: "INV-26-0309", amount: 7288 },
];

const BUDGETS: Budget[] = [
  { costCentre: "Marketing", amount: 68_000 },
  { costCentre: "IT", amount: 83_000 },
];

function Invoices() {
  const { Table, Column } = useTable(INVOICES, { rowKey: (i) => i.id });
  return (
    <Table ariaLabel="Invoices">
      <Column value="id" label="Invoice" rowHeader />
      <Column {...amount} />
    </Table>
  );
}

function Budgets() {
  const { Table, Column } = useTable(BUDGETS, { rowKey: (b) => b.costCentre });
  return (
    <Table ariaLabel="Monthly budgets">
      <Column value="costCentre" label="Cost centre" rowHeader />
      <Column {...amount} label="Monthly budget (€)" />
    </Table>
  );
}

export default function Presets() {
  return (
    <Stack gap={4}>
      <Invoices />
      <Budgets />
    </Stack>
  );
}

Wrap a column in a component

A column that brings its presentation becomes a component; it takes the table as of, typed with a row kind, and uses its Column.

import { Badge } from "@umriss-ui/core";
import { useTable } from "@umriss-ui/table";
import type { Table } from "@umriss-ui/table";

/* A wrapper generic over its rows does not compile - TypeScript does not
   resolve the overloads against an open row type - and one without `of`
   compiles but is unchecked. */

interface Incident {
  id: string;
  severity: "SEV1" | "SEV2" | "SEV3";
}

const TONE = { SEV1: "danger", SEV2: "warning", SEV3: "neutral" } as const;

const INCIDENTS: Incident[] = [
  { id: "INC-1048", severity: "SEV1" },
  { id: "INC-1047", severity: "SEV3" },
  { id: "INC-1046", severity: "SEV2" },
];

function SeverityColumn({ of }: { of: Table<Incident> }) {
  return (
    <of.Column value="severity" label="Severity">
      {(severity) => <Badge tone={TONE[severity]}>{severity}</Badge>}
    </of.Column>
  );
}

export default function Wrapper() {
  const t = useTable(INCIDENTS, { rowKey: (i) => i.id });
  const { Table, Column } = t;

  return (
    <Table ariaLabel="Incidents">
      <Column value="id" label="Incident" rowHeader />
      <SeverityColumn of={t} />
    </Table>
  );
}

Keyboard

The keys of First table apply here.

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