Preset Filter

SeizenTable supports preset filter buttons and global search through the PresetFilterPlugin from @izumisy/seizen-table-plugins.

Try It

Click on the preset buttons to quickly filter data, or use the search bar to search across all columns.

Installation

npm
pnpm

npm install @izumisy/seizen-table-plugins

pnpm add @izumisy/seizen-table-plugins

Basic Usage

import { useSeizenTable, SeizenTable } from "@izumisy/seizen-table";
import { PresetFilterPlugin } from "@izumisy/seizen-table-plugins/preset-filter";

function MyTable() {
  const table = useSeizenTable({
    data,
    columns,
    plugins: [
      PresetFilterPlugin.configure({
        presets: [
          {
            id: "active",
            label: "Active",
            filters: [
              { columnKey: "status", operator: "equals", value: "active" },
            ],
          },
          {
            id: "high-value",
            label: "High Value",
            filters: [
              { columnKey: "amount", operator: "gte", value: "1000" },
            ],
          },
        ],
      }),
    ],
  });

  return <SeizenTable table={table} />;
}

The plugin adds:

A header bar with preset filter buttons on the left
A global search bar on the right side
An “All” button to clear all filters

Preset Definition

Each preset has the following structure:

interface Preset {
  id: string;       // Unique identifier
  label: string;    // Button display text
  filters: FilterCondition[];
}

interface FilterCondition {
  columnKey: string;        // Column accessor key
  operator: FilterOperator; // Filter operator
  value?: string;           // Filter value (optional for is_empty/is_not_empty)
}

Multiple Filter Conditions

You can combine multiple filter conditions in a single preset. Conditions are combined with AND logic:

PresetFilterPlugin.configure({
  presets: [
    {
      id: "active-engineers",
      label: "Active Engineers",
      filters: [
        { columnKey: "status", operator: "equals", value: "active" },
        { columnKey: "department", operator: "equals", value: "Engineering" },
      ],
    },
  ],
})

Filter Operators

Type	Operators
String	`contains`, `not_contains`, `equals`, `not_equals`, `starts_with`, `ends_with`, `is_empty`, `is_not_empty`
Number	`eq`, `neq`, `gt`, `gte`, `lt`, `lte`
Date	`before`, `after`, `on`
Enum	`is`, `is_not`

Configuration Options

Option	Type	Default	Description
`presets`	`Preset[]`	Required	Array of preset filter definitions
`allLabel`	`string`	`"All"`	Label for the “All” button that clears filters
`enableGlobalSearch`	`boolean`	`true`	Enable the global search bar
`searchPlaceholder`	`string`	`"Search..."`	Placeholder text for the search input
`searchDebounceMs`	`number`	`300`	Debounce delay for search in milliseconds

Combining with FilterPlugin

PresetFilterPlugin works great alongside FilterPlugin for a complete filtering experience. When using both, disable global search on FilterPlugin to avoid duplication:

import { FilterPlugin } from "@izumisy/seizen-table-plugins/filter";
import { PresetFilterPlugin } from "@izumisy/seizen-table-plugins/preset-filter";

const table = useSeizenTable({
  data,
  columns,
  plugins: [
    PresetFilterPlugin.configure({
      presets: [
        { id: "active", label: "Active", filters: [...] },
      ],
    }),
    FilterPlugin.configure({
      width: 320,
      disableGlobalSearch: true, // Use PresetFilter's search bar instead
    }),
  ],
});