Filtering

const columns: ColumnDef[] = [
  { field: 'name', header: 'Name', width: 220, filterable: true },
  { field: 'age', header: 'Age', width: 100, filterable: true },
  { field: 'email', header: 'Email', width: 260, filterable: true },
  { field: 'status', header: 'Status', width: 140, filterable: true },
];

grid.filter.set(0, 'contains', 'John');
grid.filter.set(3, 'in', ['active', 'pending']);
grid.filter.setColumn(
  1,
  [
    { operator: 'greaterThan', value: 18 },
    { operator: 'lessThan', value: 65 },
  ],
  'AND'
);

grid.filter.setQuick('john', [0, 2]);
grid.filter.clearQuick();
grid.filter.clear();

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

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

grid.on('filter:afterFilter', ({ rowsVisible, rowsHidden }) => {
  console.log({ rowsVisible, rowsHidden });
});

const exports = grid.filter.getExports();

if (exports) {
  console.log(exports.rest);
  console.log(exports.graphql);
  console.log(exports.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) => fetchRows(request),
});