Filterable Grid

Grid with column filters, quick filter, and backend-friendly filter exports.

This example uses ColumnDef.filterable and the grid.filter API.

Enable Filtering

filterable-grid.ts
import { Grid, type ColumnDef } from '@zengrid/core';
import '@zengrid/core/dist/styles.css';


const columns: ColumnDef[] = [
  { field: 'id', header: 'ID', width: 60 },
  { field: 'name', header: 'Name', width: 200, filterable: true },
  { field: 'email', header: 'Email', width: 260, filterable: true },
  { field: 'role', header: 'Role', width: 150, filterable: true },
  { field: 'status', header: 'Status', width: 120, filterable: true },
];


const rows = [
  [1, 'Alice Smith', 'alice@example.com', 'Admin', 'Active'],
  [2, 'Bob Jones', 'bob@example.com', 'Editor', 'Inactive'],
  [3, 'Charlie Brown', 'charlie@example.com', 'Viewer', 'Active'],
];


const grid = new Grid(document.getElementById('grid')!, {
  columns,
  rowCount: rows.length,
  colCount: columns.length,
  rowHeight: 40,
  colWidth: columns.map((column) => column.width ?? 140),
});


grid.setData(rows);
grid.render();

Column Filters

column-filters.ts
grid.filter.set(4, 'equals', 'Active');
grid.filter.set(1, 'contains', 'Alice');


grid.filter.setColumn(
  3,
  [
    { operator: 'equals', value: 'Admin' },
    { operator: 'equals', value: 'Editor' },
  ],
  'OR'
);


const activeFilters = grid.filter.getState();
grid.filter.clearColumn(4);
grid.filter.clear();
💡 Tip

Common operators include equals, notEquals, contains, startsWith, endsWith, greaterThan, lessThan, blank, notBlank, in, and regex.

Quick Filter

quick-filter.ts
grid.filter.setQuick('alice');
grid.filter.setQuick('admin', [1, 3]);


const quick = grid.filter.getQuick();
grid.filter.clearQuick();

Filter Exports

grid.filter.getExports() returns backend-friendly formats when the active filter state can be projected.

filter-export.ts
grid.filter.set(4, 'equals', 'Active');
grid.filter.set(1, 'contains', 'Smith');


const exports = grid.filter.getExports();


if (exports) {
  console.log('REST:', exports.rest);
  console.log('GraphQL:', exports.graphql);
  console.log('SQL:', exports.sql);
}
âš  Warning

Always validate and parameterize filter input on the server before using exported filters in database queries.

Filter Events

filter-events.ts
grid.on('filter:change', ({ filterState, previousFilterState }) => {
  console.log('Previous:', previousFilterState);
  console.log('Current:', filterState);
});


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

Backend Filtering

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


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

Next Steps