Skip to main content
The GridOptions interface is the main configuration object for AG Grid. It controls all aspects of the grid’s behavior, from data binding to UI customization.

​
Overview

GridOptions is the central configuration point for your grid instance. You provide it when creating the grid, and can update many properties dynamically at runtime. 
import { GridOptions } from 'ag-grid-community';

const gridOptions: GridOptions = {
  columnDefs: [...],
  rowData: [...],
  // ... other options
};

​
Core Configuration

​
Column Definitions

​
columnDefs
(ColDef | ColGroupDef)[]
Array of column and column group definitions that define the grid’s columns.
columnDefs: [
  { field: 'athlete', headerName: 'Athlete Name' },
  { field: 'age', type: 'number' },
  { field: 'country' }
]
​
defaultColDef
ColDef
Default column definition applied to all columns. Properties in individual column definitions take precedence.
defaultColDef: {
  sortable: true,
  filter: true,
  resizable: true,
  flex: 1
}
​
defaultColGroupDef
Partial<ColGroupDef>
Default column group definition. All column group definitions inherit these properties.
defaultColGroupDef: {
  marryChildren: true
}
​
columnTypes
ColTypeDefs
Map of custom column types for reusable column configurations.
columnTypes: {
  numberColumn: { filter: 'agNumberColumnFilter', width: 100 },
  dateColumn: { filter: 'agDateColumnFilter', valueFormatter: dateFormatter }
}

​
Row Data

​
rowData
TData[]
The data to display in the grid. Each array item represents one row.
rowData: [
  { athlete: 'Michael Phelps', age: 23, country: 'United States' },
  { athlete: 'Usain Bolt', age: 22, country: 'Jamaica' }
]
​
getRowId
(params: GetRowIdParams) => string
Callback to provide unique IDs for rows. Essential for data updates and transactions.
getRowId: (params) => params.data.id

​
Row Model

​
rowModelType
'clientSide' | 'infinite' | 'viewport' | 'serverSide'
default:"'clientSide'"
Determines how the grid manages row data:
  • clientSide: All data loaded into the grid
  • infinite: Lazy loading with infinite scroll
  • serverSide: Server-side operations (grouping, filtering, etc.)
  • viewport: Only render visible rows

​
Display Options

​
domLayout
'normal' | 'autoHeight' | 'print'
default:"'normal'"
Controls how the grid sizes itself:
  • normal: Grid fills the container with scrollbars
  • autoHeight: Grid expands to fit all rows (no vertical scroll)
  • print: All rows rendered for printing
​
rowHeight
number
Height of rows in pixels. If not specified, uses theme default.
rowHeight: 50
​
headerHeight
number
Height in pixels for the column header row.
headerHeight: 40

​
Editing

​
editType
'fullRow'
Set to 'fullRow' to enable full row editing (all cells editable simultaneously).
editType: 'fullRow'
​
singleClickEdit
boolean
default:"false"
Enable single-click editing for editable cells.
singleClickEdit: true
​
stopEditingWhenCellsLoseFocus
boolean
default:"false"
Stop editing when cells lose focus.
stopEditingWhenCellsLoseFocus: true

​
Selection

As of v32.2, row selection uses a new API. See the migration guide for details.
​
rowSelection
RowSelectionOptions | 'single' | 'multiple'
Configure row selection behavior.
// Simple configuration
rowSelection: 'multiple'

// Advanced configuration
rowSelection: {
  mode: 'multiRow',
  checkboxes: true,
  headerCheckbox: true,
  enableClickSelection: true
}

​
Theming

​
theme
Theme | string
Apply a theme to the grid. Can be a theme object or theme name.
import { themeQuartz } from 'ag-grid-community';

theme: themeQuartz

​
API Access

​
Getting Grid Options

Access individual grid options at runtime: 
const pageSize = api.getGridOption('paginationPageSize');
const columnDefs = api.getGridOption('columnDefs');

​
Updating Grid Options

// Update a single option
api.setGridOption('paginationPageSize', 50);
Some properties marked as @initial can only be set during grid creation and cannot be updated later.

​
Common Patterns

​
Basic Grid Setup

const gridOptions: GridOptions = {
  // Column definitions
  columnDefs: [
    { field: 'make' },
    { field: 'model' },
    { field: 'price', type: 'number' }
  ],
  
  // Default column properties
  defaultColDef: {
    flex: 1,
    minWidth: 100,
    filter: true,
    sortable: true
  },
  
  // Data
  rowData: fetchData(),
  
  // Enable features
  pagination: true,
  paginationPageSize: 20
};

​
Enterprise Features

const gridOptions: GridOptions = {
  columnDefs: [...],
  rowData: [...],
  
  // Row grouping
  rowGroupPanelShow: 'always',
  groupDefaultExpanded: 1,
  
  // Aggregation
  aggFuncs: {
    avg: (params) => {
      const sum = params.values.reduce((a, b) => a + b, 0);
      return sum / params.values.length;
    }
  },
  
  // Side bar with columns and filters
  sideBar: {
    toolPanels: ['columns', 'filters']
  }
};

​
Server-Side Operations

const gridOptions: GridOptions = {
  columnDefs: [...],
  
  // Server-side row model
  rowModelType: 'serverSide',
  
  // Provide datasource
  serverSideDatasource: {
    getRows: (params) => {
      // Fetch data from server
      fetch('/api/data', {
        method: 'POST',
        body: JSON.stringify(params.request)
      })
        .then(response => response.json())
        .then(data => {
          params.success({
            rowData: data.rows,
            rowCount: data.lastRow
          });
        })
        .catch(error => params.fail());
    }
  },
  
  // Server-side features
  serverSideEnableClientSideSort: false,
  serverSideInfiniteScroll: true
};

​
Type Safety

Provide type information for your row data: 
interface Athlete {
  athlete: string;
  age: number;
  country: string;
  year: number;
  sport: string;
}

const gridOptions: GridOptions<Athlete> = {
  columnDefs: [
    { field: 'athlete' },  // TypeScript knows these fields
    { field: 'age' },
    { field: 'country' }
  ],
  rowData: athletes,  // Must be Athlete[]
  
  // Callbacks are type-safe
  getRowId: (params) => params.data.athlete,  // params.data is Athlete
};

​
Best Practices

  1. Use defaultColDef - Avoid repetition by setting common column properties once
  2. Provide getRowId - Essential for efficient data updates and transactions
  3. Batch updates - Use updateGridOptions() instead of multiple setGridOption() calls
  4. Type your data - Use TypeScript generics for better IDE support and type safety
  5. Module awareness - Check @agModule tags to ensure required modules are registered