# Pre-filter

> Package `@umriss-ui/table`, version 0.40.0. Demo page: <https://romanhaendler.github.io/umriss-ui/table/pre-filter/>. Every page in one line: [llms.txt](https://romanhaendler.github.io/umriss-ui/table/llms.txt); every page in full: [llms-full.txt](https://romanhaendler.github.io/umriss-ui/table/llms-full.txt).

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.

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

Demo page: https://romanhaendler.github.io/umriss-ui/table/pre-filter/

## 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.

```tsx
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

- A restriction the user sees and can lift → Filter

## Keyboard

The keys of [First table](https://romanhaendler.github.io/umriss-ui/table/first-table/#keyboard-first-table), [Input](https://romanhaendler.github.io/umriss-ui/core/input/#keyboard-input), [Select](https://romanhaendler.github.io/umriss-ui/core/select/#keyboard-select) and [Button](https://romanhaendler.github.io/umriss-ui/core/button/#keyboard-button) apply here.

## Props on this page

From `TableProps` — the full table stands on [First table](https://romanhaendler.github.io/umriss-ui/table/first-table/#type-TableProps).

| Prop | Type | Default | Description |
|---|---|---|---|
| [`empty`](https://romanhaendler.github.io/umriss-ui/table/first-table/#TableProps-empty) | `ReactNode` | — | What stands in the body when there are no rows. Empty because of a filter the table shows itself – with the way back. |
| [`children`](https://romanhaendler.github.io/umriss-ui/table/first-table/#TableProps-children) | `ReactNode` | — | Columns, `RowDetail`, `RowActions` and the unbound parts. |

#### Accessibility

| Prop | Type | Default | Description |
|---|---|---|---|
| [`ariaLabel`](https://romanhaendler.github.io/umriss-ui/table/first-table/#TableProps-ariaLabel) | `string` | — | Accessible name of the table (not of the outer frame). |

From `TableOptions` — the full table stands on [First table](https://romanhaendler.github.io/umriss-ui/table/first-table/#type-TableOptions).

| Prop | Type | Default | Description |
|---|---|---|---|
| [`rowKey`](https://romanhaendler.github.io/umriss-ui/table/first-table/#TableOptions-rowKey) *required* | `(row: Z) => string` | — | A stable key per row – the basis of selection and expansion. |
| [`pageSize`](https://romanhaendler.github.io/umriss-ui/table/first-table/#TableOptions-pageSize) | `number` | `10` | How many rows a page holds. |
| [`preFilter`](https://romanhaendler.github.io/umriss-ui/table/first-table/#TableOptions-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](https://romanhaendler.github.io/umriss-ui/table/column/#type-FieldColumn).

| Prop | Type | Default | Description |
|---|---|---|---|
| [`value`](https://romanhaendler.github.io/umriss-ui/table/column/#FieldColumn-value) *required* | `K` | — | A field of the row. Supplies the column's `id` at the same time. |
| [`filter`](https://romanhaendler.github.io/umriss-ui/table/column/#FieldColumn-filter) | [`FilterFor`](https://romanhaendler.github.io/umriss-ui/table/column/#type-FilterFor)`<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](https://romanhaendler.github.io/umriss-ui/table/column/#type-ColumnBase).

| Prop | Type | Default | Description |
|---|---|---|---|
| [`label`](https://romanhaendler.github.io/umriss-ui/table/column/#ColumnBase-label) *required* | `string` | — | Names the column in its header, in the column menu and in the header row of the export. |
| [`rowHeader`](https://romanhaendler.github.io/umriss-ui/table/column/#ColumnBase-rowHeader) | `boolean` | — | 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](https://romanhaendler.github.io/umriss-ui/table/search/#type-SearchProps).

| Prop | Type | Default | Description |
|---|---|---|---|
| [`placeholder`](https://romanhaendler.github.io/umriss-ui/table/search/#SearchProps-placeholder) | `string` | the wording's "Search …" | The placeholder in the field. |

From `ToolbarProps` — the full table stands on [Toolbar](https://romanhaendler.github.io/umriss-ui/table/toolbar/#type-ToolbarProps).

| Prop | Type | Default | Description |
|---|---|---|---|
| [`children`](https://romanhaendler.github.io/umriss-ui/table/toolbar/#ToolbarProps-children) | `ReactNode` | — | Search, column menu, export – on the left in the table toolbar, before the conditions. |

From `PaginationProps` — the full table stands on [Pagination](https://romanhaendler.github.io/umriss-ui/table/pagination/#type-PaginationProps).

| Prop | Type | Default | Description |
|---|---|---|---|
| [`pageSizes`](https://romanhaendler.github.io/umriss-ui/table/pagination/#PaginationProps-pageSizes) | `readonly number[]` | `[10, 25, 50]` | The selectable page sizes. |