Search and filters

A table can offer a quick search, a small filter bar, and an advanced filter builder at the same time. Declare column types so the controls offer meaningful operators.

Configuration example

Start from the React quick start or Vue quick start. The following file extends their product catalog. Pass this configuration through getTableConfig in React or config in Vue.

import { defineTableConfig } from "@/components/ui/yayaw-table/config/helpers";
import { productConfig } from "./product-config";

export const filteringConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    enableColumnFilters: true,
    enableAdvancedFilters: true,
    showFilterBar: true,
    filterBarColumns: ["status"],
    showClearFilters: true,
    searchDebounceMs: 250,
  },
});

import { defineTableConfig } from "@/components/ui/yayaw-table-vue/config";
import { productConfig } from "./product-config";

export const filteringConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    enableColumnFilters: true,
    enableAdvancedFilters: true,
    showFilterBar: true,
    filterBarColumns: ["status"],
    showClearFilters: true,
    searchDebounceMs: 250,
  },
});

Choose the right control

Search handles free text. The optional filter bar highlights frequently used static-option or boolean columns. Column menus provide focused filters. The advanced builder supports typed operators and an AND/OR join between rules: with two or more rules, both editions offer “Match all conditions / any condition”, saved with views and in the URL. Disabling one control does not authorize the backend to ignore the filters that arrive.

Keep value types intact

Select values are stable IDs, not their translated labels. A multi-select stores an array. Numbers and booleans must stay numeric and boolean: the string "false" is not the boolean false. Date filters pick days: a date rule's values are calendar days written YYYY-MM-DD (one day, or the first and last days of between, both included), whether the column holds dates or timestamps; see Date rules. The shared matchesContractFilter helper demonstrates operator semantics in the quick start. Translate the same semantics into your database query.

Try the complete flow

In the catalog recipe, filter to Active, search for “desk”, then clear the filters. Switching to Gallery keeps the query. Check AND and OR with at least two rules and verify counts before and after pagination.

Keep frequent filters directly accessible

Expose Status in the quick filter bar. On compact screens the view filter panel contains these configured shortcuts. The list action must apply filters before pagination.

Copy this complete configuration beside product-config.ts. Use () => exampleConfig as React’s getTableConfig, or :config="exampleConfig" in Vue.

import { defineTableConfig } from "@/components/ui/yayaw-table/config/helpers";
import { productConfig } from "./product-config";

export const exampleConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    enableColumnFilters: true,
    showFilterBar: true,
    filterBarColumns: ["status"],
    enableAdvancedFilters: false,
  },
});

import { defineTableConfig } from "@/components/ui/yayaw-table-vue/config";
import { productConfig } from "./product-config";

export const exampleConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    enableColumnFilters: true,
    showFilterBar: true,
    filterBarColumns: ["status"],
    enableAdvancedFilters: false,
  },
});

Offer composed filter rules

Enable the advanced editor without a permanent quick bar. Enter a complete numeric value before applying it; the query adapter handles typed rules and AND/OR joins.

Copy this complete configuration beside product-config.ts. Use () => exampleConfig as React’s getTableConfig, or :config="exampleConfig" in Vue.

import { defineTableConfig } from "@/components/ui/yayaw-table/config/helpers";
import { productConfig } from "./product-config";

export const exampleConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    enableColumnFilters: true,
    enableAdvancedFilters: true,
    showFilterBar: false,
    searchDebounceMs: 250,
  },
});

import { defineTableConfig } from "@/components/ui/yayaw-table-vue/config";
import { productConfig } from "./product-config";

export const exampleConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    enableColumnFilters: true,
    enableAdvancedFilters: true,
    showFilterBar: false,
    searchDebounceMs: 250,
  },
});

Facets beside the records

table.facets shows a panel of facets beside the records, in every display mode but the Form view. Each column it lists shows its values with their number of records, and a click filters the table:

table: {
  facets: {
    columns: ["category", { id: "tags", limit: 12 }],
    position: "left", // or "right"
    defaultOpen: true, // phones open the panel as a sheet from the toolbar
  },
}

• Columns: select, tag and status columns, multi-select and tags columns, booleans (Yes and No) and a file tree's parent column (its folders, with "Root"). A column is an id or { id, label?, limit?, sort?, showEmpty? }. The panel also takes limit (8 values before "Show N more" and a search), showCounts (default true), showZero (default false) and width (256px, from 180 to 480).

• Filtering: a click writes the rule the filter menus write: isAnyOf, or contains for lists; "No value" writes isEmpty on its own. The rules join the others with AND. A selection is ordinary filter state: it goes in the URL (<tableId>-advancedFilters), is saved with views and is listed in the filter menus, and a table with facets shows the advanced filter menu. While the view joins its rules with OR, the panel says so and leaves them alone.

• Counts: the table asks actions.aggregate as a chart does (groupBy: [{ columnId }], metrics: [{ fn: "count" }]) with the view's search and filters, without the facet's own rule, so a facet keeps offering its other values. Without aggregate, counts come from the rows list returns (2,000 at most, with a notice beyond), or from the table's own rows (Vue data). A tags column counts each tag once per record.

• Keyboard and phones: "Clear" per facet and "Clear all"; arrow keys, Home and End move between values, Space and Enter toggle one. The toolbar button ([data-facets-toggle], aria-pressed, with a badge while facets filter the view) shows and hides the panel; phones open it as a sheet. Facets need column filters (enableColumnFilters not false).

Facet labels have built-in English and French, chosen from the table's locale, and read facets.<key> translations.

Filter by folder

A table whose rows form a file tree filters its parent column with a folder picker in the filter menus, in every view: the root, or one or more folders (their direct content). The rule is isAnyOf with the folder ids, or isEmpty for the root, and reads "In" and the folder's name. A facet on the parent column lists the same folders with their numbers of records. table.filetree.folderFilter: false turns the picker off; see Folders in the other views.