Skip to content

Filtering

SeizenTable supports advanced filtering through the FilterPlugin from @izumisy/seizen-table-plugins.

Try It

Click the filter icon in the side panel to open the filter builder. You can also use the search bar to do a global search.

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 { FilterPlugin } from "@izumisy/seizen-table-plugins/filter";

function MyTable() {
  const table = useSeizenTable({
    data,
    columns,
    plugins: [FilterPlugin.configure({ width: 320 })],
  });

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

The plugin adds:

A side panel with filter builder UI
A global search bar in the header slot
Context menu items for quick filtering from cells

Defining Filterable Columns

Specify filter types in column meta to enable filtering:

const columns: ColumnDef<Person>[] = [
  {
    accessorKey: "name",
    header: "Name",
    meta: { filterType: "string" },
  },
  {
    accessorKey: "age",
    header: "Age",
    meta: { filterType: "number" },
  },
  {
    accessorKey: "status",
    header: "Status",
    meta: {
      filterType: "enum",
      filterEnumValues: ["active", "inactive", "pending"],
    },
  },
  {
    accessorKey: "createdAt",
    header: "Created",
    meta: { filterType: "date" },
  },
];

Filter Types & Operators

Type	Operators
`string`	Contains, Equals, Starts with, Ends with, Is empty, Is not empty
`number`	`=` `≠` `>` `≥` `<` `≤`
`date`	`=` Before, After
`enum`	Is, Is not

Configuration Options

Option	Type	Default	Description
`width`	`number`	`320`	Width of the side panel
`disableGlobalSearch`	`boolean`	`false`	Disable global search in header slot

Right-click on any cell to add a filter with that cell’s value pre-filled. This provides a fast way to filter data based on existing values.