Pre-filter

Decide which rows a table has at all – by permission, by site, by tenant. The user never sees it, cannot lift it, and it is not part of the view.

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

Examples

Restrict which rows a table has

preFilter decides the rows at all, here by depot, elsewhere by permission; it is invisible, never reset, and not in the view.

import { useState } from "react";
import { Select, Stack } from "@umriss-ui/core";
import { Pagination, Search, Toolbar, useTable } from "@umriss-ui/table";

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

const SHIPMENTS: Shipment[] = [
  { id: "FP-1004210", depot: "North depot", tour: "T-01", customer: "Holloway Garden Supplies" },
  { id: "FP-1004223", depot: "Riverside depot", tour: "T-04", customer: "Oakridge Pharmacy" },
  { id: "FP-1004236", depot: "North depot", tour: "T-02", customer: "Brixley Cycles" },
  { id: "FP-1004249", depot: "Riverside depot", tour: "T-05", customer: "Tamsin's Bakery" },
  { id: "FP-1004262", depot: "North depot", tour: "T-01", customer: "Pellham Hardware" },
  { id: "FP-1004275", depot: "Riverside depot", tour: "T-04", customer: "Greywick Studio" },
  { id: "FP-1004288", depot: "North depot", tour: "T-03", customer: "Juniper Lane Florist" },
];

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

export default function PreFilter() {
  const [depot, setDepot] = useState("North depot");
  const { Table, Column } = useTable(SHIPMENTS, {
    rowKey: (s) => s.id,
    pageSize: 3,
    preFilter: (s) => s.depot === depot,
  });

  return (
    <Stack gap={3}>
      <Select size="sm" value={depot} onChange={(event) => setDepot(event.target.value)} aria-label="Depot">
        {DEPOTS.map((d) => (
          <option key={d} value={d}>
            {d}
          </option>
        ))}
      </Select>
      <Table ariaLabel="Shipments of the depot" empty="This depot has no shipments today.">
        <Toolbar>
          <Search placeholder="Shipment or customer" />
        </Toolbar>
        <Column value="id" label="Shipment" rowHeader />
        <Column value="tour" label="Tour" filter="list" />
        <Column value="customer" label="Customer" />
        <Pagination pageSizes={[3, 10]} />
      </Table>
    </Stack>
  );
}

When to use something else

Keyboard

The keys of First table, Input, Select and Button apply here.

Props on this page

From TableProps — the full table stands on First table.

NameTypeDefaultDescription
emptyReactNode—What stands in the body when there are no rows. Empty because of a filter the table shows itself – with the way back.
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.
pageSizenumber10How many rows a page holds.
preFilter(row: Z) => boolean—Which rows the table has at all – by permission, by tenant, by anything the user is not meant to undo. It is invisible: never a condition, never reset, never part of the view, and "43 of 1,204" counts only the rows it admits. It may stand in the call; a change leaves the page standing, and the model clamps it.

From FieldColumn — the full table stands on Column.

NameTypeDefaultDescription
valuerequiredK—A field of the row. Supplies the column's id at the same time.
filterFilterFor<Z[K]>—A filter in the column header: "list" offers the values that occur, "range" two bounds (numbers or points in time), a filter from columnFilter asks whatever it asks itself. Its condition stands in the table toolbar.

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.

From PaginationProps — the full table stands on Pagination.

NameTypeDefaultDescription
pageSizesreadonly number[][10, 25, 50]The selectable page sizes.

Every page of @umriss-ui/table

Getting started

Columns

Finding rows

Grouping

Rows

Around the table

Many rows

Editing

Limits and alarms

API index