Filter Plugin

grid.filter.set(1, 'contains', 'Alice');
grid.filter.setColumn(
  2,
  [
    { operator: 'greaterThan', value: 18 },
    { operator: 'lessThan', value: 65 },
  ],
  'AND'
);
grid.filter.setQuick('engineering');
grid.filter.clearColumn(1);
grid.filter.clearQuick();
grid.filter.clear();

const state = grid.filter.getState();
const quick = grid.filter.getQuick();
const exports = grid.filter.getExports();

import type { ColumnDef } from '@zengrid/core';

const columns: ColumnDef[] = [
  { field: 'name', header: 'Name', width: 220, filterable: true },
  { field: 'department', header: 'Department', width: 180, filterable: true },
  { field: 'status', header: 'Status', width: 140, filterable: true },
];

grid.on('filter:change', ({ filterState, previousFilterState }) => {
  console.log({ filterState, previousFilterState });
});

grid.on('filter:export', ({ rest, graphql, sql }) => {
  console.log(rest, graphql, sql);
});

const grid = new Grid(container, {
  columns,
  rowCount: 100000,
  colCount: columns.length,
  rowHeight: 36,
  colWidth: columns.map((column) => column.width ?? 140),
  dataMode: 'backend',
  onDataRequest: async (request) => {
    const response = await fetch('/api/search', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(request.query),
      signal: request.signal,
    });

    return response.json();
  },
});