GridOptions

Complete reference for the AG Grid GridOptions interface and configuration properties

The GridOptions interface is the primary configuration object for AG Grid. It contains all the properties that control the grid’s behavior, appearance, and functionality.

Overview

GridOptions can be provided when creating the grid:

const gridOptions = {
  columnDefs: [...],
  rowData: [...],
  pagination: true,
  paginationPageSize: 20,
  // ... other options
};

const gridApi = createGrid(gridDiv, gridOptions);

Core Properties

Row Data

rowData · TData[]

Data to be displayed in the grid as rows. Each item in the array represents a row.

const gridOptions = {
  rowData: [
    { name: 'Alice', age: 25, country: 'USA' },
    { name: 'Bob', age: 30, country: 'UK' }
  ]
};

Column Definitions

columnDefs · (ColDef<TData> | ColGroupDef<TData>)[] | null

Array of Column / Column Group definitions.

const gridOptions = {
  columnDefs: [
    { field: 'name', headerName: 'Full Name' },
    { field: 'age', type: 'numericColumn' },
    { field: 'country' }
  ]
};

See Column Definitions for detailed documentation.

defaultColDef · ColDef<TData>

A default column definition. Items defined in the actual column definitions get precedence.

const gridOptions = {
  defaultColDef: {
    sortable: true,
    filter: true,
    resizable: true,
    minWidth: 100
  }
};

defaultColGroupDef · Partial<ColGroupDef<TData>>

A default column group definition. All column group definitions will use these properties. Items defined in the actual column group definition get precedence.

Initial: This property cannot be updated after the grid is created.

const gridOptions = {
  defaultColGroupDef: {
    marryChildren: true
  }
};

Pagination

pagination · boolean · default: "false"

Set whether pagination is enabled.

Module: PaginationModule

const gridOptions = {
  pagination: true,
  paginationPageSize: 50
};

paginationPageSize · number · default: "100"

How many rows to load per page. If paginationAutoPageSize is specified, this property is ignored.

Module: PaginationModule

const gridOptions = {
  pagination: true,
  paginationPageSize: 25
};

paginationPageSizeSelector · number[] | boolean · default: "true"

Determines if the page size selector is shown in the pagination panel or not. Set to an array of values to show the page size selector with custom list of possible page sizes. Set to true to show the page size selector with the default page sizes [20, 50, 100]. Set to false to hide the page size selector.

Module: PaginationModule Initial: This property cannot be updated after the grid is created.

const gridOptions = {
  pagination: true,
  paginationPageSizeSelector: [10, 25, 50, 100]
};

paginationAutoPageSize · boolean · default: "false"

Set to true so that the number of rows to load per page is automatically adjusted by the grid so each page shows enough rows to just fill the area designated for the grid. If false, paginationPageSize is used.

Module: PaginationModule

const gridOptions = {
  pagination: true,
  paginationAutoPageSize: true
};

Row Selection

rowSelection · RowSelectionOptions · default: "undefined"

Configure row selection behavior. Replaces the deprecated individual selection properties.

Module: RowSelectionModule

const gridOptions = {
  rowSelection: {
    mode: 'multiRow',
    checkboxes: true,
    headerCheckbox: true,
    enableClickSelection: true
  }
};

Sorting

sortingOrder · SortDirection[]

Array defining the order in which sorting occurs (if sorting is enabled). Values can be 'asc', 'desc' or null. For example: sortingOrder: ['asc', 'desc'].

const gridOptions = {
  sortingOrder: ['asc', 'desc', null]
};

multiSortKey · 'ctrl' | 'shift' · default: "'ctrl'"

Set to 'shift' to use the Shift key for multi-sorting instead of Ctrl.

const gridOptions = {
  multiSortKey: 'shift'
};

Editing

editType · EditStrategyType

Set to 'fullRow' to enable Full Row Editing. Otherwise leave blank to edit one cell at a time.

Module: TextEditorModule / LargeTextEditorModule / NumberEditorModule / DateEditorModule / CheckboxEditorModule / CustomEditorModule / SelectEditorModule / RichSelectModule

const gridOptions = {
  editType: 'fullRow'
};

singleClickEdit · boolean · default: "false"

Set to true to enable Single Click Editing for cells, to start editing with a single click.

Module: TextEditorModule / LargeTextEditorModule / NumberEditorModule / DateEditorModule / CheckboxEditorModule / CustomEditorModule / SelectEditorModule / RichSelectModule

const gridOptions = {
  singleClickEdit: true
};

stopEditingWhenCellsLoseFocus · boolean · default: "false"

Set this to true to stop cell editing when grid loses focus. The default is that the grid stays editing until focus goes onto another cell.

Module: TextEditorModule / LargeTextEditorModule / NumberEditorModule / DateEditorModule / CheckboxEditorModule / CustomEditorModule / SelectEditorModule / RichSelectModule Initial: This property cannot be updated after the grid is created.

const gridOptions = {
  stopEditingWhenCellsLoseFocus: true
};

undoRedoCellEditing · boolean

Set to true to enable Undo / Redo while editing.

Module: UndoRedoEditModule Initial: This property cannot be updated after the grid is created.

const gridOptions = {
  undoRedoCellEditing: true,
  undoRedoCellEditingLimit: 20
};

Filtering

quickFilterText · string

Rows are filtered using this text as a Quick Filter. Only supported for Client-Side Row Model.

Module: QuickFilterModule

const gridOptions = {
  quickFilterText: 'search term'
};

enableAdvancedFilter · boolean · default: "false"

Set to true to enable the Advanced Filter.

Module: AdvancedFilterModule

const gridOptions = {
  enableAdvancedFilter: true
};

Row Grouping & Aggregation

groupDefaultExpanded · number · default: "0"

If grouping, set to the number of levels to expand by default, e.g. 0 for none, 1 for first level only, etc. Set to -1 to expand everything.

Module: RowGroupingModule

const gridOptions = {
  groupDefaultExpanded: 1
};

aggFuncs · IAggFuncs<TData>

A map of ‘function name’ to ‘function’ for custom aggregation functions.

Module: RowGroupingModule / PivotModule / TreeDataModule / ServerSideRowModelModule Initial: This property cannot be updated after the grid is created.

const gridOptions = {
  aggFuncs: {
    mySum: (params) => {
      let sum = 0;
      params.values.forEach(value => sum += value);
      return sum;
    }
  }
};

Styling & Theming

theme · Theme

The theme to use for the grid. Can be a built-in theme name or a custom theme object.

const gridOptions = {
  theme: 'ag-theme-quartz'
};

rowHeight · number

The height in pixels for each row. If not specified, it uses the theme value.

const gridOptions = {
  rowHeight: 50
};

headerHeight · number

The height in pixels for the row containing the column label header. If not specified, it uses the theme value of header-height.

const gridOptions = {
  headerHeight: 60
};

animateRows · boolean · default: "true"

Set to false to disable Row Animation which is enabled by default.

const gridOptions = {
  animateRows: false
};

Performance

rowBuffer · number · default: "10"

The number of rows rendered outside the viewable area the grid renders. Having a buffer means the grid will have rows ready to show as the user slowly scrolls vertically.

const gridOptions = {
  rowBuffer: 20
};

suppressColumnVirtualisation · boolean · default: "false"

Set to true so that the grid doesn’t virtualise the columns. For example, if you have 100 columns, but only 10 visible due to scrolling, all 100 will always be rendered. It is not recommended to set this to true as it may cause performance issues.

Initial: This property cannot be updated after the grid is created.

const gridOptions = {
  suppressColumnVirtualisation: false
};

suppressRowVirtualisation · boolean · default: "false"

Set to true so that the grid doesn’t virtualise the rows. For example, if you have 100 rows, but only 10 visible due to scrolling, all 100 will always be rendered. It is not recommended to set this to true as it may cause performance issues.

Initial: This property cannot be updated after the grid is created.

const gridOptions = {
  suppressRowVirtualisation: false
};

Callbacks

onGridReady · (event: GridReadyEvent<TData>) => void

Called once when the grid is ready to use. Use this to access the Grid API.

const gridOptions = {
  onGridReady: (event) => {
    console.log('Grid is ready');
    const gridApi = event.api;
  }
};

onRowClicked · (event: RowClickedEvent<TData>) => void

Called when a row is clicked.

const gridOptions = {
  onRowClicked: (event) => {
    console.log('Row clicked:', event.data);
  }
};

onCellValueChanged · (event: CellValueChangedEvent<TData>) => void

Called when a cell value is changed.

const gridOptions = {
  onCellValueChanged: (event) => {
    console.log('Cell changed:', {
      column: event.column.getId(),
      oldValue: event.oldValue,
      newValue: event.newValue
    });
  }
};

Context

context · any

Provides a context object that is provided to different callbacks the grid uses. Used for passing additional information to the callbacks used by your application.

Initial: This property cannot be updated after the grid is created.

const gridOptions = {
  context: {
    userId: '12345',
    permissions: ['read', 'write']
  }
};

Related APIs

GridApi

Interact with the grid programmatically

Column Definitions

Configure individual columns

Grid Events

Listen to grid lifecycle events