Grid Class

import { Grid, type GridOptions } from '@zengrid/core';

const options: GridOptions = {
  rowCount: rows.length,
  colCount: columns.length,
  rowHeight: 36,
  colWidth: columns.map((column) => column.width ?? 140),
  columns,
};

const grid = new Grid(document.getElementById('grid')!, options);

grid.setData(rows);

const value = grid.getData(0, 1);
const mode = grid.getDataMode();
const status = grid.getDataStatus();

await grid.refreshData();
await grid.retryDataRequest();

grid.render();
grid.refresh();
grid.clearCache();
grid.updateCells([{ row: 0, col: 1 }]);
grid.updateOptions({ overscanRows: 12 });
grid.destroy();

grid.sort.toggle(1);
grid.sort.apply([{ column: 1, direction: 'asc' }]);
grid.sort.setState([{ column: 2, direction: 'desc' }]);
grid.sort.clear();

const state = grid.sort.getState();
const mode = grid.sort.getMode();
const columnSort = grid.sort.getColumnSort(1);

grid.filter.set(1, 'contains', 'search term');
grid.filter.setColumn(
  2,
  [
    { operator: 'greaterThan', value: 10 },
    { operator: 'lessThan', value: 100 },
  ],
  'AND'
);
grid.filter.setQuick('global search', [0, 1, 2]);
grid.filter.clearColumn(2);
grid.filter.clearQuick();
grid.filter.clear();

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

grid.pagination.goTo(2);
grid.pagination.next();
grid.pagination.previous();
grid.pagination.first();
grid.pagination.last();
grid.pagination.setPageSize(100);

const page = grid.pagination.getCurrentPage();
const pageSize = grid.pagination.getPageSize();
const totalPages = grid.pagination.getTotalPages();

grid.columns.resize(1, 260);
grid.columns.autoFit(1);
grid.columns.autoFitAll();
grid.columns.setConstraints(1, { minWidth: 120, maxWidth: 320 });

const state = grid.columns.getState();
grid.columns.applyState(state, {
  applyWidth: true,
  applyOrder: true,
  applyVisibility: true,
});

grid.scroll.toCell(500, 2);

const position = grid.scroll.getPosition();
const visibleRange = grid.scroll.getVisibleRange();

const snapshot = grid.state.getSnapshot();
grid.state.applySnapshot(snapshot);

const csv = grid.export.csv({ rows: 'filtered', columns: 'visible', includeHeaders: true });
const tsv = grid.export.tsv({ rows: 'all', columns: 'all', includeHeaders: true });

grid.registerRenderer('statusBadge', statusRenderer);
grid.registerHeaderRenderer('compact', compactHeaderRenderer);

grid.setTheme('dark');
grid.updateTheme({ colors: { accent: '#10b981' } });
grid.resetTheme();

const themes = Grid.getAvailableThemes();

grid.on('cell:click', ({ cell, value }) => {
  console.log(cell, value);
});

grid.off('cell:click', handler);

grid.usePlugin(customPlugin);

const pluginHost = grid.getPluginHost();
const api = grid.getGridApi();
const store = grid.getStore();