Grid Options

Reference for the current GridOptions configuration surface.

GridOptions configures a grid instance. The container is not part of GridOptions; pass it as the first Grid constructor argument.

Minimal Options

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

Required core options:

rowCount: number
colCount: number
rowHeight: number | number[]
colWidth: number | number[]

Columns

const columns: ColumnDef[] = [
  { field: 'id', header: 'ID', width: 80, sortable: true },
  { field: 'name', header: 'Name', width: 220, editable: true, filterable: true },
  { field: 'status', header: { text: 'Status', type: 'filterable' }, width: 140 },
];

ℹ Info

Keep colCount aligned with columns.length. The grid still uses colCount for rendering and plugin setup.

Selection

const grid = new Grid(container, {
  rowCount: rows.length,
  colCount: columns.length,
  rowHeight: 36,
  colWidth: columns.map((column) => column.width ?? 140),
  columns,
  enableSelection: true,
  enableMultiSelection: true,
  selectionType: 'range',
});

selectionType can be cell, row, column, or range.

Virtualization

const grid = new Grid(container, {
  rowCount: rows.length,
  colCount: columns.length,
  rowHeight: 36,
  colWidth: columns.map((column) => column.width ?? 140),
  columns,
  overscanRows: 10,
  overscanCols: 5,
  enableCellPooling: true,
  autoResize: true,
});

Backend Data

const grid = new Grid(container, {
  rowCount: 100000,
  colCount: columns.length,
  rowHeight: 36,
  colWidth: columns.map((column) => column.width ?? 140),
  columns,
  dataMode: 'backend',
  onDataRequest: async (request) => fetchRows(request),
});

dataMode can be frontend, backend, or auto.

Pagination

const grid = new Grid(container, {
  rowCount: rows.length,
  colCount: columns.length,
  rowHeight: 36,
  colWidth: columns.map((column) => column.width ?? 140),
  columns,
  pagination: {
    enabled: true,
    pageSize: 50,
    pageSizes: [25, 50, 100],
  },
});

Column Behavior

const grid = new Grid(container, {
  rowCount: rows.length,
  colCount: columns.length,
  rowHeight: 36,
  colWidth: columns.map((column) => column.width ?? 140),
  columns,
  enableColumnResize: true,
  columnResize: {
    defaultMinWidth: 60,
    autoFitSampleSize: 100,
    showHandles: true,
  },
  enableColumnDrag: true,
  columnDrag: {
    dragThreshold: 5,
    showGhost: true,
    showDropIndicator: true,
  },
});

Row Height And Overflow

const grid = new Grid(container, {
  rowCount: rows.length,
  colCount: columns.length,
  rowHeight: 36,
  colWidth: columns.map((column) => column.width ?? 140),
  columns,
  rowHeightMode: 'fixed',
  cellOverflow: { mode: 'truncate' },
});

Themes

const grid = new Grid(container, {
  rowCount: rows.length,
  colCount: columns.length,
  rowHeight: 36,
  colWidth: columns.map((column) => column.width ?? 140),
  columns,
  theme: 'dark',
  autoTheme: false,
});

Data Is Loaded Separately

Frontend data is loaded with setData() after construction.

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

⚠ Warning

Older snippets may show a data callback in GridOptions. The current public docs should use setData() for frontend rows or onDataRequest for backend rows.