Framework:Javascript Data GridAngular Data GridReact Data GridVue Data Grid

JavaScript Data Grid: Grid Options

All of these grid options are available through the GridOptions interface.

Accessories

statusBar
{ statusPanels: StatusPanelDef[]; }
Specifies the status bar components to use in the status bar. See Status Bar.
statusBar: { statusPanels: StatusPanelDef[]; };

interface StatusPanelDef {
  statusPanel?: any;
  align?: string;
  key?: string;
  statusPanelParams?: any;
}
sideBar
SideBarDef | string | string[] | boolean | null
Specifies the side bar components. See Side Bar.
sideBar: SideBarDef | string | string[] | boolean | null;

interface SideBarDef {
  // A list of all the panels to place in the side bar. The panels will be displayed in the provided order from top to bottom. 
  toolPanels?: (ToolPanelDef | string)[];
  // The panel (identified by ID) to open by default. If none specified, the side bar is initially displayed closed. 
  defaultToolPanel?: string;
  // To hide the side bar by default, set this to `true`. If left undefined the side bar will be shown. 
  hiddenByDefault?: boolean;
  // Sets the side bar position relative to the grid. 
  position?: 'left' | 'right';
}

interface ToolPanelDef {
  // The unique ID for this panel. Used in the API and elsewhere to refer to the panel. 
  id: string;
  // The key used for localisation for displaying the label. The label is displayed in the tab button. 
  labelKey: string;
  // The default label if `labelKey` is missing or does not map to valid text through localisation. 
  labelDefault: string;
  // The min width of the tool panel. Default: `100` 
  minWidth?: number;
  // The max width of the tool panel. Default: `undefined` 
  maxWidth?: number;
  // The initial width of the tool panel. Default: `$side-bar-panel-width (theme variable)` 
  width?: number;
  // The key of the icon to be used as a graphical aid beside the label in the side bar. 
  iconKey: string;
  // The tool panel component to use as the panel.
  // The provided panels use components `agColumnsToolPanel` and `agFiltersToolPanel`.
  // To provide your own custom panel component, you reference it here. 
  toolPanel?: any;
  // Customise the parameters provided to the `toolPanel` component. 
  toolPanelParams?: any;
}
getContextMenuItems
Function
For customising the context menu. See Context Menu.
getContextMenuItems = (
    params: GetContextMenuItemsParams
) => (string | MenuItemDef)[];

interface GetContextMenuItemsParams {
  // Names of the items that would be provided by default. 
  defaultItems: string[] | undefined;
  // The column, if a cell was clicked, otherwise null. 
  column: Column | null;
  // The row node, if a cell was clicked, otherwise null. 
  node: RowNode | null;
  // The value, if a cell was clicked, otherwise null. 
  value: any;
  // The grid api. 
  api: GridApi;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}

interface MenuItemDef {
  // If this item is a sub menu, contains a list of menu item definitions 
  subMenu?: (MenuItemDef | string)[];
  // Name of the menu item 
  name: string;
  // It the item should be enabled / disabled 
  disabled?: boolean;
  // Shortcut (just display text, saying the shortcut here does nothing) 
  shortcut?: string;
  // Function that gets executed when item is chosen 
  action?: () => void;
  // Set to true to provide a check beside the option 
  checked?: boolean;
  // The icon to display, either a DOM element or HTML string 
  icon?: HTMLElement | string;
  // CSS classes to apply to the menu item 
  cssClasses?: string[];
  // Tooltip for the menu item 
  tooltip?: string;
}
suppressContextMenu
boolean
Set to true to not show the context menu. Use if you don't want to use the default 'right click' context menu. See Context Menu.
Default: false
preventDefaultOnContextMenu
boolean
When using suppressContextMenu, you can use the onCellContextMenu function to provide your own code to handle cell contextmenu events. This flag is useful to prevent the browser from showing its default context menu.
Default: false
allowContextMenuWithControlKey
boolean
Allows context menu to show, even when Ctrl key is held down.
Default: false
getMainMenuItems
Function
For customising the main 'column header' menu. See Column Menu.
getMainMenuItems = (
    params: GetMainMenuItemsParams
) => (string | MenuItemDef)[];

interface GetMainMenuItemsParams {
  // The column that was clicked 
  column: Column;
  // List of the items that would be displayed by default 
  defaultItems: string[];
  // The grid api. 
  api: GridApi;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}

interface MenuItemDef {
  // If this item is a sub menu, contains a list of menu item definitions 
  subMenu?: (MenuItemDef | string)[];
  // Name of the menu item 
  name: string;
  // It the item should be enabled / disabled 
  disabled?: boolean;
  // Shortcut (just display text, saying the shortcut here does nothing) 
  shortcut?: string;
  // Function that gets executed when item is chosen 
  action?: () => void;
  // Set to true to provide a check beside the option 
  checked?: boolean;
  // The icon to display, either a DOM element or HTML string 
  icon?: HTMLElement | string;
  // CSS classes to apply to the menu item 
  cssClasses?: string[];
  // Tooltip for the menu item 
  tooltip?: string;
}
suppressMenuHide
boolean
Set to true to always show the column menu button, rather than only showing when the mouse is over the column header. See Column Menu.
Default: false
popupParent
DOM element to use as the popup parent for grid popups (context menu, column menu etc). See Popup Parent.
postProcessPopup
Function
Allows user to process popups after they are created. Applications can use this if they want to, for example, reposition the popup.
postProcessPopup = (
    params: PostProcessPopupParams
) => void;

interface PostProcessPopupParams {
  // If popup is for a column, this gives the Column 
  column?: Column | null;
  // If popup is for a row, this gives the RowNode 
  rowNode?: RowNode | null;
  // The popup we are showing 
  ePopup: HTMLElement;
  // The different types are:
  // 'contextMenu', 'columnMenu', 'aggFuncSelect', 'popupCellEditor' 
  type: string;
  // If the popup is as a result of a button click (eg menu button),
  // this is the component that the user clicked 
  eventSource?: HTMLElement | null;
  // If the popup is as a result of a click or touch,
  // this is the event - eg user showing context menu 
  mouseEvent?: MouseEvent | Touch | null;
  // The grid api. 
  api: GridApi;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}

Clipboard

See Clipboard for more information.

copyHeadersToClipboard
boolean
Set to true to also include headers when copying to clipboard using Ctrl+C clipboard.
Default: false
copyGroupHeadersToClipboard
boolean
Set to true to also include group headers when copying to clipboard using Ctrl+C clipboard.
Default: false
clipboardDelimiter
string
Specify the delimiter to use when copying to clipboard.
Default: \t
suppressCopyRowsToClipboard
boolean
Set to true to copy the cell range or focused cell to the clipboard and never the selected rows.
Default: false
suppressCopySingleCellRanges
boolean
Set to true to copy rows instead of ranges when a range with only a single cell is selected.
Default: false
suppressLastEmptyLineOnPaste
boolean
Set to true to work around a bug with Excel (Windows) that adds an extra empty line at the end of ranges copied to the clipboard.
Default: false
suppressClipboardPaste
boolean
Set to true to turn off paste operations within the grid.
suppressClipboardApi
boolean
Set to true to stop the grid trying to use the Clipboard API, if it is blocked, and immediately fallback to the workaround.
processCellForClipboard
Function
Allows you to process cells for the clipboard. Handy if for example you have Date objects that need to have a particular format if importing into Excel.
processCellForClipboard = (
    params: ProcessCellForExportParams
) => any;

interface ProcessCellForExportParams {
  value: any;
  accumulatedRowIndex?: number;
  node?: RowNode | null;
  column: Column;
  type: string;
  // The grid api. 
  api: GridApi;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}
processHeaderForClipboard
Function
Allows you to process header values for the clipboard.
processHeaderForClipboard = (
    params: ProcessHeaderForExportParams
) => any;

interface ProcessHeaderForExportParams {
  column: Column;
  // The grid api. 
  api: GridApi;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}
processGroupHeaderForClipboard
Function
Allows you to process group header values for the clipboard.
processGroupHeaderForClipboard = (
    params: ProcessGroupHeaderForExportParams
) => any;

interface ProcessGroupHeaderForExportParams {
  columnGroup: ColumnGroup;
  // The grid api. 
  api: GridApi;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}
processCellFromClipboard
Function
Allows you to process cells from the clipboard. Handy if for example you have number fields, and want to block non-numbers from getting into the grid.
processCellFromClipboard = (
    params: ProcessCellForExportParams
) => any;

interface ProcessCellForExportParams {
  value: any;
  accumulatedRowIndex?: number;
  node?: RowNode | null;
  column: Column;
  type: string;
  // The grid api. 
  api: GridApi;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}
sendToClipboard
Function
Allows you to get the data that would otherwise go to the clipboard. To be used when you want to control the 'copy to clipboard' operation yourself.
sendToClipboard = (
    params: SendToClipboardParams
) => void;

interface SendToClipboardParams {
  data: string;
  // The grid api. 
  api: GridApi;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}
processDataFromClipboard
Function
Allows complete control of the paste operation, including cancelling the operation (so nothing happens) or replacing the data with other data.
processDataFromClipboard = (
    params: ProcessDataFromClipboardParams
) => string[][] | null;

interface ProcessDataFromClipboardParams {
  // 2D array of all cells from the clipboard 
  data: string[][];
  // The grid api. 
  api: GridApi;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}

Column Definitions

See Column / Column Group definitions for more information

columnDefs
(ColDef | ColGroupDef)[] | null
Array of Column / Column Group definitions.
defaultColDef
A default column definition. Items defined in the actual column definitions get precedence. See Default Column Definition.
defaultColGroupDef
Partial<ColGroupDef>
A default column group definition. All column group definitions will use these properties. Items defined in the actual column group definition get precedence. See Default Column Group Definition.
columnTypes
{ [key: string]: ColDef; }
An object map of custom column types which contain groups of properties that column definitions can inherit by referencing in their type property. See Custom Column Types.
maintainColumnOrder
boolean
Keeps the order of Columns maintained after new Column Definitions are updated. See Maintain Column Order.
Default: false
suppressFieldDotNotation
boolean
If true, then dots in field names (e.g. 'address.firstLine') are not treated as deep references. Allows you to use dots in your field name if you prefer. See Accessing Row Data Values.
Default: false

Column Headers

See Column Headers for more information.

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.
groupHeaderHeight
number
The height in pixels for the rows containing header column groups. If not specified, it uses headerHeight.
floatingFiltersHeight
number
The height in pixels for the row containing the floating filters. If not specified, it uses the theme value of header-height.
pivotHeaderHeight
number
The height in pixels for the row containing the columns when in pivot mode. If not specified, it uses headerHeight.
pivotGroupHeaderHeight
number
The height in pixels for the row containing header column groups when in pivot mode. If not specified, it uses groupHeaderHeight.

Column Moving

See Column Moving for more information.

allowDragFromColumnsToolPanel
boolean
Allow reordering and pinning columns by dragging columns from the Columns Tool Panel to the grid. See Columns Tool Panel.
Default: false
suppressMovableColumns
boolean
Set to true to suppress column moving, i.e. to make the columns fixed position.
Default: false
suppressColumnMoveAnimation
boolean
If true, the ag-column-moving class is not added to the grid while columns are moving. In the default themes, this results in no animation when moving columns.
Default: false
suppressDragLeaveHidesColumns
boolean
If true, when you drag a column out of the grid (e.g. to the group zone) the column is not hidden.
Default: false

Column Sizing

See Column Sizing for more information.

colResizeDefault
string
Set to 'shift' to have shift-resize as the default resize operation (same as user holding down Shift while resizing).
Options: 'shift'
suppressAutoSize
boolean
Suppresses auto-sizing columns for columns. In other words, double clicking a column's header's edge will not auto-size. See Auto-sizing Columns.
Default: false
autoSizePadding
number
Number of pixels to add to a column width after the auto-sizing calculation. Set this if you want to add extra room to accommodate (for example) sort icons, or some other dynamic nature of the header. See Auto-sizing Columns.
Default: 4
skipHeaderOnAutoSize
boolean
Set this to true to skip the headerName when autoSize is called by default. See Resizing Example.
Default: false

Components

See Components for more information.

components
{ [p: string]: any; }
A map of component names to components.

Editing

See Cell Editing for more information.

editType
string
Set to 'fullRow' to enable Full Row Editing. Otherwise leave blank to edit one cell at a time. See Full Row Editing.
Options: 'fullRow'
singleClickEdit
boolean
Set to true to enable Single Click Editing for cells, to start editing with a single click. See Single Click Editing.
Default: false
suppressClickEdit
boolean
Set to true so that neither single nor double click starts editing. See Single Click, Double Click, No Click Editing.
Default: false
stopEditingWhenCellsLoseFocus
boolean
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. For inline (non-popup) editors only. See Stop cell editing.
Default: false
enterMovesDown
boolean
Set to true along with enterMovesDownAfterEdit to have Excel-style behaviour for the Enter key, i.e. pressing the Enter key will move down to the cell beneath as described here.
Default: false
enterMovesDownAfterEdit
boolean
Set to true along with enterMovesDown to have Excel-style behaviour for the Enter key, i.e. pressing the Enter key will move down to the cell beneath as described here.
Default: false
undoRedoCellEditing
boolean
Set to true to enable Undo / Redo while editing. See Undo / Redo Edits.
undoRedoCellEditingLimit
number
Set the size of the undo / redo stack.
Default: 10
readOnlyEdit
boolean
Set to true so stop the grid updating data after and edit. When this is set, it is intended the application will update the data, eg in an external immutable store, and then pass the new dataset to the grid. See Read Only Edit.

Export

See Export for more information.

defaultCsvExportParams
A default configuration object used to export to CSV. See CSV Export.
suppressCsvExport
boolean
Prevents the user from exporting the grid to CSV.
Default: false
defaultExcelExportParams
A default configuration object used to export to Excel. See Excel Export.
suppressExcelExport
boolean
Prevents the user from exporting the grid to Excel.
Default: false
excelStyles
A list (array) of Excel styles to be used when exporting to Excel with styles. See Excel Export Styles.
excelStyles: ExcelStyle[];

interface ExcelStyle {
  id: string;
  alignment?: ExcelAlignment;
  borders?: ExcelBorders;
  dataType?: ExcelDataType;
  font?: ExcelFont;
  interior?: ExcelInterior;
  numberFormat?: ExcelNumberFormat;
  protection?: ExcelProtection;
}

Filtering

See Filtering for more information.

quickFilterText
string
Rows are filtered using this text as a quick filter. See Quick Filter.
cacheQuickFilter
boolean
Set to true to turn on the quick filter cache, used to improve performance when using the quick filter. See Quick Filter Cache.
Default: false
isExternalFilterPresent
Function
Grid calls this method to know if an external filter is present. See External Filter.
isExternalFilterPresent = (
    params: IsExternalFilterPresentParams
) => boolean;

interface IsExternalFilterPresentParams {
  // The grid api. 
  api: GridApi;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}
doesExternalFilterPass
Function
Should return true if external filter passes, otherwise false. See External Filter.
doesExternalFilterPass = (node: RowNode) => boolean;
excludeChildrenWhenTreeDataFiltering
boolean
Set to true to override the default tree data filtering behaviour to instead exclude child nodes from filter results. See Tree Data Filtering.
Default: false

Integrated Charts

See Integrated Charts for more information.

enableCharts
boolean
Set to true to Enable Charts. See Enabling User Created Charts.
Default: false
getChartToolbarItems
Function
Callback to be used to customise the chart toolbar items. See Configuring Toolbar Items.
getChartToolbarItems = (
    params: GetChartToolbarItemsParams
) => ChartMenuOptions[];

interface GetChartToolbarItemsParams {
  defaultItems?: ChartMenuOptions[];
  // The grid api. 
  api: GridApi;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}

type ChartMenuOptions = 
      'chartSettings' 
    | 'chartData' 
    | 'chartFormat' 
    | 'chartLink' 
    | 'chartUnlink' 
    | 'chartDownload'
createChartContainer
Function
Callback to enable displaying the chart in an alternative chart container. See Configuring Toolbar Items.
createChartContainer = (params: ChartRefParams) => void;

interface ChartRefParams {
  // The grid api. 
  api: GridApi;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
  // The id of the created chart. 
  chartId: string;
  // The chart instance that is produced by AG Charts which can be used to interact with the chart directly. 
  chart: any;
  // The chart DOM element, which the application is responsible for placing into the DOM. 
  chartElement: HTMLElement;
  // The application is responsible for calling this when the chart is no longer needed. 
  destroyChart: () => void;
}
chartThemes
string[]
The list of chart themes to be used. See Provided Themes.
Default: ['ag-default', 'ag-material', 'ag-pastel', 'ag-vivid', 'ag-solar']
customChartThemes
{ [name: string]: AgChartTheme }
A map containing custom chart themes. See Custom Chart Themes.
customChartThemes: { [name: string]: AgChartTheme };

interface AgChartTheme {
  // The name of the theme to base your theme on. Your custom theme will inherit all of the configuration from
  // the base theme, allowing you to override just the settings you wish to change using the `overrides` config (see
  // below). 
  baseTheme?: AgChartThemeName;
  // The palette to use. If specified, this replaces the palette from the base theme. 
  palette?: AgChartThemePalette;
  // Configuration from this object is merged over the defaults specified in the base theme. 
  overrides?: AgChartThemeOverrides;
}

interface AgChartThemePalette {
  // The array of fills to be used. 
  fills: string[];
  // The array of strokes to be used. 
  strokes: string[];
}
chartThemeOverrides
Chart theme overrides applied to all themes. See Overriding Existing Themes.

Keyboard Navigation

See Keyboard Navigation for more information.

navigateToNextHeader
Function
Allows overriding the default behaviour for when user hits navigation (arrow) key when a header is focused. Return the next Header position to navigate to or null to stay on current header.
navigateToNextHeader = (
    params: NavigateToNextHeaderParams
) => (HeaderPosition | null);

interface NavigateToNextHeaderParams {
  // The key for the arrow key pressed,
  // left = 'ArrowLeft', up = 'ArrowUp', right = 'ArrowRight', down = 'ArrowDown' 
  key: string;
  // The header that currently has focus 
  previousHeaderPosition: HeaderPosition | null;
  // The header the grid would normally pick as the next header for this navigation 
  nextHeaderPosition: HeaderPosition | null;
  // The number of header rows present in the grid 
  headerRowCount: number;
  event: KeyboardEvent;
  // The grid api. 
  api: GridApi;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}

interface HeaderPosition {
  // A number from 0 to n, where n is the last header row the grid is rendering 
  headerRowIndex: number;
  // The grid column or column group 
  column: Column | ColumnGroup;
}
tabToNextHeader
Function
Allows overriding the default behaviour for when user hits Tab key when a header is focused.
tabToNextHeader = (
    params: TabToNextHeaderParams
) => (HeaderPosition | null);

interface TabToNextHeaderParams {
  // True if the Shift key is also down 
  backwards: boolean;
  // The header that currently has focus 
  previousHeaderPosition: HeaderPosition | null;
  // The header the grid would normally pick as the next header for this navigation 
  nextHeaderPosition: HeaderPosition | null;
  // The number of header rows present in the grid 
  headerRowCount: number;
  // The grid api. 
  api: GridApi;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}

interface HeaderPosition {
  // A number from 0 to n, where n is the last header row the grid is rendering 
  headerRowIndex: number;
  // The grid column or column group 
  column: Column | ColumnGroup;
}
navigateToNextCell
Function
Allows overriding the default behaviour for when user hits navigation (arrow) key when a cell is focused. Return the next Cell position to navigate to or null to stay on current cell.
navigateToNextCell = (
    params: NavigateToNextCellParams
) => (CellPosition | null);

interface NavigateToNextCellParams {
  // The keycode for the arrow key pressed:
  // left = 'ArrowLeft', up = 'ArrowUp', right = 'ArrowRight', down = 'ArrowDown' 
  key: string;
  // The cell that currently has focus 
  previousCellPosition: CellPosition;
  // The cell the grid would normally pick as the next cell for navigation 
  nextCellPosition: CellPosition | null;
  event: KeyboardEvent | null;
  // The grid api. 
  api: GridApi;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}

interface CellPosition {
  // The grid column 
  column: Column;
  // A positive number from 0 to n, where n is the last row the grid is rendering
  // or -1 if you want to navigate to the grid header 
  rowIndex: number;
  // Either 'top', 'bottom' or null (for not pinned) 
  rowPinned: string | null;
}
tabToNextCell
Function
Allows overriding the default behaviour for when user hits Tab key when a cell is focused.
tabToNextCell = (
    params: TabToNextCellParams
) => (CellPosition | null);

interface TabToNextCellParams {
  // True if the Shift key is also down 
  backwards: boolean;
  // True if the current cell is editing
  // (you may want to skip cells that are not editable, as the grid will enter the next cell in editing mode also if tabbing) 
  editing: boolean;
  // The cell that currently has focus 
  previousCellPosition: CellPosition;
  // The cell the grid would normally pick as the next cell for navigation. 
  nextCellPosition: CellPosition | null;
  // The grid api. 
  api: GridApi;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}

interface CellPosition {
  // The grid column 
  column: Column;
  // A positive number from 0 to n, where n is the last row the grid is rendering
  // or -1 if you want to navigate to the grid header 
  rowIndex: number;
  // Either 'top', 'bottom' or null (for not pinned) 
  rowPinned: string | null;
}

Loading Cell Renderers

See loadingCellRenderer for more information.

loadingCellRenderer
any
Provide your own loading cell renderer to use when data is loading via a DataSource. See Loading Cell Renderer.
loadingCellRendererParams
any
Params to be passed to the loadingCellRenderer component.
loadingCellRendererSelector
Function
Callback to select which loading cell renderer to be used when data is loading via a DataSource. See Loading Cell Renderer Selector.
loadingCellRendererSelector = (
    params: ILoadingCellRendererParams
) => LoadingCellRendererSelectorResult | undefined;

interface ILoadingCellRendererParams {
  // Value to be rendered. 
  value: any;
  // Formatted value to be rendered. 
  valueFormatted: any;
  // True if this is a full width row. 
  fullWidth?: boolean;
  // Pinned state of the cell. 
  pinned?: string | null;
  // The row's data. 
  data: any;
  // The row node. 
  node: RowNode;
  // The current index of the row (this changes after filter and sort). 
  rowIndex: number;
  // The cell's column definition. 
  colDef?: ColDef;
  // The cell's column. 
  column?: Column;
  // The grid's cell, a DOM div element. 
  eGridCell: HTMLElement;
  // The parent DOM item for the cell renderer, same as eGridCell unless using checkbox selection. 
  eParentOfValue: HTMLElement;
  // Convenience function to get most recent up to date value. 
  getValue?: () => any;
  // Convenience function to set the value. 
  setValue?: (value: any) => void;
  // Convenience function to format a value using the column's formatter. 
  formatValue?: (value: any) => any;
  // Convenience function to refresh the cell. 
  refreshCell?: () => void;
  // registerRowDragger:
  // @param rowDraggerElement The HTMLElement to be used as Row Dragger
  // @param dragStartPixels The amount of pixels required to start the drag (Default: 4)
  // @param value The value to be displayed while dragging. Note: Only relevant with Full Width Rows.
  // @param suppressVisibilityChange Set to `true` to prevent the Grid from hiding the Row Dragger when it is disabled.
  registerRowDragger: (rowDraggerElement: HTMLElement, dragStartPixels?: number, value?: string, suppressVisibilityChange?: boolean) => void;
  // The grid api. 
  api: GridApi;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}

interface LoadingCellRendererSelectorResult {
  // Equivalent of setting `loadingCellRenderer` 
  component?: any;
  // Equivalent of setting `loadingCellRendererParams` 
  params?: any;
}

Localisation

See Localisation for more information.

localeText
{ [key: string]: string }
A map of key->value pairs for localising text within the grid.
getLocaleText
Function
A callback for localising text within the grid.
getLocaleText = (
    params: GetLocaleTextParams
) => string;

interface GetLocaleTextParams {
  key: string;
  defaultValue: string;
  variableValues?: string[];
  // The grid api. 
  api: GridApi;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}

Master Detail

See Master Detail for more information.

masterDetail
boolean
Set to true to enable Master Detail.
Default: false
isRowMaster
Function
Callback to be used with Master Detail to determine if a row should be a master row. If false is returned no detail row will exist for this row.
isRowMaster = (dataItem: any) => boolean;
detailCellRenderer
any
Provide a custom detailCellRenderer to use when a master row is expanded. See Custom Detail.
detailCellRendererParams
any
Specifies the params to be used by the Detail Cell Renderer. Can also be a function that provides the params to enable dynamic definitions of the params. See Detail Grids.
detailRowHeight
number
Set fixed height in pixels for each detail row. See Fixed Height.
detailRowAutoHeight
boolean
Set to true to have the detail grid dynamically change it's height to fit it's rows. See Auto Height.
embedFullWidthRows
boolean
Set to true to have the detail grid embedded in the master grid's container and so link their horizontal scrolling. See Syncing Detail Scrolling with Master.
keepDetailRows
boolean
Set to true to keep detail rows for when they are displayed again.
Default: false
keepDetailRowsCount
number
Sets the number of details rows to keep.
Default: 10

Miscellaneous

api
The Grid Api for interacting with the grid. Set by the grid on init, set to null on destroy. See Grid Api.
columnApi
The Column Api for interacting with the grid columns. Set by the grid on init, set to null on destroy. See Column Api.
alignedGrids
A list of grids to treat as Aligned Grids. If grids are aligned then the columns and horizontal scrolling will be kept in sync. See Aligned Grids.
context
any
Provides a context object that is provided to different callbacks the grid uses. Used for passing additional information to the callbacks by your application. See Context.
tabIndex
number
Change this value to set the tabIndex order of the Grid within your application.
Default: 0
rowBuffer
number
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.
Default: 10
valueCache
boolean
Set to true to turn on the value cache. See Value Cache.
Default: false
valueCacheNeverExpires
boolean
Set to true to configure the value cache to not expire after data updates. See Value Cache.
Default: false
enableCellExpressions
boolean
Set to true to allow cell expressions. See Cell Expressions.
Default: false
getDocument
Allows overriding what document is used. Currently used by Drag and Drop (may extend to other places in the future). Use this when you want the grid to use a different document than the one available on the global scope. This can happen if docking out components (something which Electron supports)
getDocument = () => Document;
suppressParentsInRowNodes
boolean
If true, row nodes do not have their parents set. The grid doesn't use the parent reference, but it is included to help the client code navigate the node tree if it wants by providing bi-direction navigation up and down the tree. If this is a problem (e.g. if you need to convert the tree to JSON, which does not allow cyclic dependencies) then set this to true.
Default: false
suppressTouch
boolean
Disables touch support (but does not remove the browser's efforts to simulate mouse events on touch). See Touch Support.
Default: false
suppressFocusAfterRefresh
boolean
Set to true to not set focus back on the grid after a refresh. This can avoid issues where you want to keep the focus on another part of the browser.
Default: false
suppressAsyncEvents
boolean
Disables the asynchronous nature of the events introduced in v10, and makes them synchronous. This property only exists for the purpose of supporting legacy code which has a dependency on synchronous events from earlier versions (v9 or earlier) of AG Grid. It is strongly recommended that you do not change this property unless you have legacy issues.
Default: false
suppressBrowserResizeObserver
boolean
The grid will check for ResizeObserver and use it if it exists in the browser, otherwise it will use the grid's alternative implementation. Some users reported issues with Chrome's ResizeObserver. Use this property to always use the grid's alternative implementation should such problems exist.
Default: false
suppressPropertyNamesCheck
boolean
Disables showing a warning message in the console if using a gridOptions or colDef property that doesn't exist.
Default: false
suppressChangeDetection
boolean
Disables change detection.
Default: false
debug
boolean
Set this to true to enable debug information from the grid and related components. Will result in additional logging being output, but very useful when investigating problems.
Default: false

Overlays

See Overlays for more information.

overlayLoadingTemplate
string
Provide a template for 'loading' overlay.
loadingOverlayComponent
any
Provide a custom loading overlay component. See Loading Overlay Component.
loadingOverlayComponentParams
any
Customise the parameters provided to the loading overlay component.
suppressLoadingOverlay
boolean
Disables the 'loading' overlay.
Default: false
overlayNoRowsTemplate
string
Provide a template for 'no rows' overlay.
noRowsOverlayComponent
any
Provide a custom no rows overlay component. See No Rows Overlay Component.
noRowsOverlayComponentParams
any
Customise the parameters provided to the no rows overlay component.
suppressNoRowsOverlay
boolean
Disables the 'no rows' overlay.
Default: false

Pagination

See Row Pagination for more information.

pagination
boolean
Set whether pagination is enabled.
Default: false
paginationPageSize
number
How many rows to load per page. If paginationAutoPageSize is specified, this property is ignored. See Customising Pagination.
Default: 100
paginationNumberFormatter
Function
Allows user to format the numbers in the pagination panel, i.e. 'row count' and 'page number' labels. This is for pagination panel only, to format numbers inside the grid's cells (i.e. your data), then use valueFormatter in the column definitions.
paginationNumberFormatter = (
    params: PaginationNumberFormatterParams
) => string;

interface PaginationNumberFormatterParams {
  value: number;
  // The grid api. 
  api: GridApi;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}
paginationAutoPageSize
boolean
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. See Auto Page Size.
Default: false
paginateChildRows
boolean
Set to true to have pages split children of groups when using Row Grouping or detail rows with Master Detail. See Pagination & Child Rows.
Default: false
suppressPaginationPanel
boolean
If true, the default grid controls for navigation are hidden. This is useful if pagination=true and you want to provide your own pagination controls. Otherwise, when pagination=true the grid automatically shows the necessary controls at the bottom so that the user can navigate through the different pages. See Custom Pagination Controls.
Default: false

Pivot and Aggregation

See Pivot and Aggregation for more information

pivotMode
boolean
Set to true to enable pivot mode.
Default: false
pivotPanelShow
string
When to show the 'pivot panel' (where you drag rows to pivot) at the top. Note that the pivot panel will never show if pivotMode is off.
Default: never
Options: 'never', 'always', 'onlyWhenPivoting'
pivotColumnGroupTotals
string
When set and the grid is in pivot mode, automatically calculated totals will appear within the Pivot Column Groups, in the position specified. See Pivot Column Group Totals.
Options: 'before', 'after'
pivotRowTotals
string
When set and the grid is in pivot mode, automatically calculated totals will appear for each value column in the position specified. See Pivot Row Totals.
Options: 'before', 'after'
pivotSuppressAutoColumn
boolean
If true, the grid will not swap in the grouping column when pivoting. Useful if pivoting using Server Side Row Model or Viewport Row Model and you want full control of all columns including the group column.
processSecondaryColDef
Function
Callback to be used with pivoting, to allow changing the second column definition.
processSecondaryColDef = (colDef: ColDef) => void;
processSecondaryColGroupDef
Function
Callback to be used with pivoting, to allow changing the second column group definition.
processSecondaryColGroupDef = (
    colGroupDef: ColGroupDef
) => void;
suppressExpandablePivotGroups
boolean
When enabled, pivot column groups will appear 'fixed', without the ability to expand and collapse the column groups. See Fixed Pivot Column Groups.
Default: false
functionsReadOnly
boolean
If true, then row group, pivot and value aggregation will be read-only from the GUI. The grid will display what values are used for each, but will not allow the user to change the selection. See Read Only Functions.
Default: false
aggFuncs
{ [key: string]: IAggFunc; }
A map of 'function name' to 'function' for custom aggregation functions. See Custom Aggregation Functions.
aggFuncs: { [key: string]: IAggFunc; };

interface IAggFunc {
    (params: IAggFuncParams) : any
}

interface IAggFuncParams {
  // Values to aggregate 
  values: any[];
  // Column the aggregation function is working on 
  column: Column;
  // ColDef of the aggregation column 
  colDef: ColDef;
  // The parent RowNode, where the aggregation result will be shown 
  rowNode: RowNode;
  // data (if any) of the parent RowNode 
  data: any;
  // The grid api. 
  api: GridApi;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}
getGroupRowAgg
Function
Callback to use when you need access to more then the current column for aggregation. See Custom Full Row Aggregation.
getGroupRowAgg = (
    params: GetGroupRowAggParams
) => any;

interface GetGroupRowAggParams {
  nodes: RowNode[];
  // The grid api. 
  api: GridApi;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}
suppressAggFuncInHeader
boolean
When true, column headers won't include the aggFunc name, e.g. 'sum(Bank Balance)' will just be 'Bank Balance'.
Default: false
suppressAggAtRootLevel
boolean
When true, the aggregations won't be computed for the root node of the grid. See Big Data Small Transactions.
Default: false
aggregateOnlyChangedColumns
boolean
When using change detection, only the updated column will be re-aggregated. See Change Detection.
Default: false
suppressAggFilteredOnly
boolean
Set to true so that aggregations are not impacted by filtering. See Custom Aggregation Functions.
Default: false
groupAggFiltering
boolean | IsRowFilterable
Set to determine whether filters should be applied on aggregated group values.
Default: false
groupAggFiltering: boolean | IsRowFilterable;

interface IsRowFilterable {
    (params: GetGroupAggFilteringParams) : boolean
}

interface GetGroupAggFilteringParams {
  node: RowNode;
  // The grid api. 
  api: GridApi;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}
removePivotHeaderRowWhenSingleValueColumn
boolean
Set to true to omit the value Column header when there is only a single value column. See Hiding Repeated Value Column Labels.
Default: false

Rendering

animateRows
boolean
Set to true to enable Row Animation. See Row Animation.
Default: false
enableCellChangeFlash
boolean
Set to true to have cells flash after data changes. See Flashing Data Changes.
Default: false
cellFlashDelay
number
To be used in combination with enableCellChangeFlash, this configuration will set the delay in milliseconds of how long a cell should remain in its "flashed" state.
Default: 500
cellFadeDelay
number
To be used in combination with enableCellChangeFlash, this configuration will set the delay in milliseconds of how long the "flashed" state animation takes to fade away after the timer set by cellFlashDelay has completed.
Default: 1000
allowShowChangeAfterFilter
boolean
Set to true to have cells flash after data changes even when the change is due to filtering. See Flashing Data Changes.
Default: false
domLayout
'normal' | 'autoHeight' | 'print'
Switch between layout options. See Printing and Auto Height.
Default: normal
Options: 'normal', 'autoHeight', 'print'
ensureDomOrder
boolean
When true, the order of rows and columns in the DOM are consistent with what is on screen. See Accessibility - Row and Column Order.
Default: false
getBusinessKeyForNode
Function
Return a business key for the node. If implemented, each row in the DOM will have an attribute row-id='abc' where abc is what you return as the business key. This is useful for automated testing, as it provides a way for your tool to identify rows based on unique business keys.
getBusinessKeyForNode = (node: RowNode) => string;
processRowPostCreate
Function
Allows you to process rows after they are created, so you can do final adding of custom attributes etc.
processRowPostCreate = (
    params: ProcessRowParams
) => void;

interface ProcessRowParams {
  eRow: HTMLElement;
  ePinnedLeftRow: HTMLElement;
  ePinnedRightRow: HTMLElement;
  rowIndex: number;
  node: RowNode;
  addRenderedRowListener: (eventType: string, listener: Function) => void;
  // The grid api. 
  api: GridApi;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}
enableRtl
boolean
Set to true to operate the grid in RTL (Right to Left) mode. See RTL (Right to Left).
Default: false
suppressColumnVirtualisation
boolean
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.
Default: false
suppressRowVirtualisation
boolean
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. See Suppress Row Virtualisation.
Default: false
suppressMaxRenderedRowRestriction
boolean
By default the grid has a limit of rendering a maximum of 500 rows at once (remember the grid only renders rows you can see, so unless your display shows more than 500 rows without vertically scrolling this will never be an issue).
This is only relevant if you are manually setting rowBuffer to a high value (rendering more rows than can be seen) or if your grid height is able to display more than 500 rows at once.
Default: false

Row Drag and Drop

See Row Dragging for more information.

rowDragManaged
boolean
Set to true to enable Managed Row Dragging. See Managed Row Dragging.
Default: false
rowDragEntireRow
boolean
Set to true to enable clicking and dragging anywhere on the row without the need for a drag handle. See Entire Row Dragging.
Default: false
rowDragMultiRow
boolean
Set to true to enable dragging multiple rows at the same time. See Mulit-Row Dragging.
Default: false
suppressRowDrag
boolean
Set to true to suppress row dragging.
Default: false
suppressMoveWhenRowDragging
boolean
Set to true to suppress moving rows while dragging the rowDrag waffle. This option highlights the position where the row will be placed and it will only move the row on mouse up.
Default: false

Row Full Width

See Full Width Rows for more information.

fullWidthCellRenderer
any
Provide your own cell renderer component to use for full width rows. See Full Width Cell Renderer.
fullWidthCellRendererParams
any
Customise the parameters provided to the fullWidthCellRenderer component.

Row Grouping

See Row Grouping for more information.

groupDisplayType
RowGroupingDisplayType
Specifies how the results of row grouping should be displayed. The options are:
  • 'singleColumn': single group column automatically added by the grid.
  • 'multipleColumns': a group column per row group is added automatically.
  • 'groupRows': group rows are automatically added instead of group columns.
  • 'custom': informs the grid that group columns will be provided.
  • See Row Grouping - Display Types.
    groupDisplayType: RowGroupingDisplayType;
    
    type RowGroupingDisplayType = 
          'singleColumn' 
        | 'multipleColumns' 
        | 'groupRows' 
        | 'custom'
    
    groupDefaultExpanded
    number
    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. See Opening Group Levels by Default.
    Default: 0
    autoGroupColumnDef
    Allows specifying the group 'auto column' if you are not happy with the default. If grouping, this column definition is included as the first column in the grid. If not grouping, this column is not included. See Group Column Configuration.
    groupMaintainOrder
    boolean
    When true, preserves the current group order when sorting on non-group columns. See Maintain Group Order.
    Default: false
    groupSelectsChildren
    boolean
    When true, if you select a group, the children of the group will also be selected. See Group Selection.
    Default: false
    groupIncludeFooter
    boolean
    If grouping, this controls whether to show a group footer when the group is expanded. If true, then by default, the footer will contain aggregate data (if any) when shown and the header will be blank. When closed, the header will contain the aggregate data regardless of this setting (as the footer is hidden anyway). This is handy for 'total' rows, that are displayed below the data when the group is open, and alongside the group when it is closed. See Enabling Group Footers.
    Default: false
    groupIncludeTotalFooter
    boolean
    Set to true to show a 'grand total' group footer across all groups. See Enabling Group Footers.
    Default: false
    groupSuppressBlankHeader
    boolean
    If true, and showing footer, aggregate data will always be displayed at both the header and footer levels. This stops the possibly undesirable behaviour of the header details 'jumping' to the footer on expand.
    Default: false
    groupSelectsFiltered
    boolean
    If using groupSelectsChildren, then only the children that pass the current filter will get selected. See Group Selection.
    Default: false
    showOpenedGroup
    boolean
    Shows the open group in the group column for non-group rows. See Showing Open Groups.
    Default: false
    isGroupOpenByDefault
    Function
    (Client-side Row Model only) Allows groups to be open by default.
    isGroupOpenByDefault = (
        params: IsGroupOpenByDefaultParams
    ) => boolean;
    
    interface IsGroupOpenByDefaultParams {
      // The row node being considered. 
      rowNode: RowNode;
      // The Column for which this row is grouping. 
      rowGroupColumn: Column;
      // Same as `rowNode.level` - what level the group is at, e.g. 0 for top level, 1 for second etc 
      level: number;
      // Same as `rowNode.field` - the field we are grouping on, e.g. 'country' 
      field: string;
      // Same as `rowNode.key`, the value of this group, e.g. 'Ireland' 
      key: string;
      // The grid api. 
      api: GridApi;
      // The column api. 
      columnApi: ColumnApi;
      // Application context as set on `gridOptions.context`. 
      context: any;
    }
    initialGroupOrderComparator
    Function
    Allows default sorting of groups. See Initial Group Order.
    initialGroupOrderComparator = (
        params: InitialGroupOrderComparatorParams
    ) => number;
    
    interface InitialGroupOrderComparatorParams {
      nodeA: RowNode;
      nodeB: RowNode;
      // The grid api. 
      api: GridApi;
      // The column api. 
      columnApi: ColumnApi;
      // Application context as set on `gridOptions.context`. 
      context: any;
    }
    groupRemoveSingleChildren
    boolean
    Set to true to collapse groups that only have one child. See Remove Single Children.
    groupRemoveLowestSingleChildren
    boolean
    Set to true to collapse lowest level groups that only have one child. See Remove Single Children.
    Default: false
    groupHideOpenParents
    boolean
    Set to true to hide parents that are open. When used with multiple columns for showing groups, it can give a more pleasing user experience. See Hide Open Parents.
    Default: false
    rowGroupPanelShow
    string
    When to show the 'row group panel' (where you drag rows to group) at the top. See Enabling Row Group Panel.
    Default: never
    Options: 'never', 'always', 'onlyWhenGrouping'
    groupRowRenderer
    any
    Provide the Cell Renderer to use when groupDisplayType = 'groupRows'. See Group Row Cell Renderer.
    groupRowRendererParams
    any
    Customise the parameters provided to the groupRowRenderer component.
    suppressDragLeaveHidesColumns
    boolean
    By default, dragging a column out of the grid, i.e. to the Row Group Panel, it will be hidden in the grid. This property prevents the column becoming hidden in the grid. See Keeping Columns Visible.
    Default: false
    suppressMakeColumnVisibleAfterUnGroup
    boolean
    By default, when a column is un-grouped, i.e. using the Row Group Panel, it is made visible in the grid. This property stops the column becoming visible again when un-grouping. See Keeping Columns Visible.
    Default: false
    treeData
    boolean
    Set to true to enable the Grid to work with Tree Data. You must also implement the getDataPath(data) callback. See Tree Data.
    getDataPath
    Function
    Callback to be used when working with Tree Data when treeData = true. See Tree Data.
    getDataPath = (data: any) => string[];

    Row Pinning

    See Row Pinning for more information.

    pinnedTopRowData
    any[]
    Data to be displayed as pinned top rows in the grid.
    pinnedBottomRowData
    any[]
    Data to be displayed as pinned bottom rows in the grid.

    RowModel

    See Row Model for more information.

    rowModelType
    'clientSide' | 'infinite' | 'viewport' | 'serverSide'
    Sets the row model type.
    Default: clientSide
    getRowId
    Function
    Allows setting the ID for a particular row node based on the data.
    getRowId = (params: GetRowIdParams) => string;
    
    interface GetRowIdParams {
      // The data item provided to the grid for the row in question 
      data: any;
      // If grouping, the level, ie how many levels from the top. Used by ServerSide Row Model only 
      level: number;
      // If grouping, provides the keys of the parent groups. Used by ServerSide Row Model only 
      parentKeys?: string[];
      // The grid api. 
      api: GridApi;
      // The column api. 
      columnApi: ColumnApi;
      // Application context as set on `gridOptions.context`. 
      context: any;
    }

    RowModel: Client-Side

    See Client-Side Row Model for more information.

    rowData
    any[] | null
    Set the data to be displayed as rows in the grid.
    resetRowDataOnUpdate
    boolean
    When enabled, getRowId() callback is implemented and new Row Data is set, the grid will disregard all previous rows and treat the new Row Data as new data. As a consequence, all Row State (eg selection, rendered rows) will be reset.
    Default: false
    asyncTransactionWaitMillis
    number
    How many milliseconds to wait before executing a batch of async transactions. See Async transactions.
    suppressModelUpdateAfterUpdateTransaction
    boolean
    Prevents Transactions changing sort, filter, group or pivot state when transaction only contains updates. See Suppress Model Updates.
    Default: false

    RowModel: Infinite

    See Infinite Row Model for more information.

    datasource
    Provide the datasource for infinite scrolling. See Datasource.
    datasource: IDatasource;
    
    interface IDatasource {
      // If you know up front how many rows are in the dataset, set it here. Otherwise leave blank. 
      rowCount?: number;
      // Callback the grid calls that you implement to fetch rows from the server. 
      getRows(params: IGetRowsParams): void;
      // Optional destroy method, if your datasource has state it needs to clean up. 
      destroy?(): void;
    }
    
    interface IGetRowsParams {
      // The first row index to get. 
      startRow: number;
      // The first row index to NOT get. 
      endRow: number;
      // Callback to call for the result when successful. 
      successCallback(rowsThisBlock: any[], lastRow?: number): void;
      // Callback to call when the request fails. 
      failCallback(): void;
      // If doing server side sorting, contains the sort model 
      sortModel: SortModelItem[];
      // If doing server side filtering, contains the filter model 
      filterModel: any;
      // The context as provided on `gridOptions.context` 
      context: any;
    }
    
    interface SortModelItem {
      // Column Id to apply the sort to. 
      colId: string;
      // Sort direction 
      sort: 'asc' | 'desc';
    }
    cacheOverflowSize
    number
    How many extra blank rows to display to the user at the end of the dataset, which sets the vertical scroll and then allows the grid to request viewing more rows of data.
    Default: 1
    maxConcurrentDatasourceRequests
    number
    How many requests to hit the server with concurrently. If the max is reached, requests are queued. Set to -1 for no maximum restriction on requests.
    Default: 2
    cacheBlockSize
    number
    How many rows for each block in the store, i.e. how many rows returned from the server at a time.
    Default: 100
    maxBlocksInCache
    number
    How many blocks to keep in the store. Default is no limit, so every requested block is kept. Use this if you have memory concerns, and blocks that were least recently viewed will be purged when the limit is hit. The grid will additionally make sure it has all the blocks needed to display what is currently visible, in case this property is set to a low value.
    infiniteInitialRowCount
    number
    How many extra blank rows to display to the user at the end of the dataset, which sets the vertical scroll and then allows the grid to request viewing more rows of data.
    Default: 1

    RowModel: Server-Side

    See Server-Side Row Model for more information.

    serverSideStoreType
    ServerSideStoreType
    Whether to use Full Store or Partial Store for storing rows. See Row Stores.
    Default: full
    serverSideStoreType: ServerSideStoreType;
    
    type ServerSideStoreType = 'full' | 'partial'
    serverSideDatasource
    Provide the serverSideDatasource for server side row model. See Registering the Datasource.
    serverSideDatasource: IServerSideDatasource;
    
    interface IServerSideDatasource {
      // Grid calls `getRows` when it requires more rows as specified in the params.
      // Params object contains callbacks for responding to the request. 
      getRows(params: IServerSideGetRowsParams): void;
      // Optional method, if your datasource has state it needs to clean up. 
      destroy?(): void;
    }
    
    interface IServerSideGetRowsParams {
      // Details for the request. A simple object that can be converted to JSON. 
      request: IServerSideGetRowsRequest;
      // The parent row node. The RootNode (level -1) if request is top level.
      // This is NOT part fo the request as it cannot be serialised to JSON (a rowNode has methods). 
      parentNode: RowNode;
      // Success callback, pass the rows back to the grid that were requested. 
      success(params: LoadSuccessParams): void;
      // Fail callback, tell the grid the call failed so it can adjust it's state. 
      fail(): void;
      // The grid api. 
      api: GridApi;
      // The column api. 
      columnApi: ColumnApi;
      // Application context as set on `gridOptions.context`. 
      context: any;
    }
    
    interface IServerSideGetRowsRequest {
      // First row requested or undefined for all rows. 
      startRow: number | undefined;
      // Last row requested or undefined for all rows. 
      endRow: number | undefined;
      // Columns that are currently row grouped. 
      rowGroupCols: ColumnVO[];
      // Columns that have aggregations on them. 
      valueCols: ColumnVO[];
      // Columns that have pivot on them. 
      pivotCols: ColumnVO[];
      // Defines if pivot mode is on or off. 
      pivotMode: boolean;
      // What groups the user is viewing. 
      groupKeys: string[];
      // If filtering, what the filter model is. 
      filterModel: any;
      // If sorting, what the sort model is. 
      sortModel: SortModelItem[];
    }
    
    interface ColumnVO {
      id: string;
      displayName: string;
      field?: string;
      aggFunc?: string;
    }
    
    interface SortModelItem {
      // Column Id to apply the sort to. 
      colId: string;
      // Sort direction 
      sort: 'asc' | 'desc';
    }
    
    interface LoadSuccessParams {
      // Data retrieved from the server as requested by the grid. 
      rowData: any[];
      // The last row, if known, to help Infinite Scroll (i.e Partial Store) and Pagination. 
      rowCount?: number;
      // Any extra information for the grid to associate with this load. 
      storeInfo?: any;
    }
    cacheBlockSize
    number
    (Partial Store only) How many rows for each block in the store, i.e. how many rows returned from the server at a time.
    Default: 100
    maxBlocksInCache
    number
    (Partial Store only) How many blocks to keep in the store. Default is no limit, so every requested block is kept. Use this if you have memory concerns, and blocks that were least recently viewed will be purged when the limit is hit. The grid will additionally make sure it has all the blocks needed to display what is currently visible, in case this property is set to a low value.
    maxConcurrentDatasourceRequests
    number
    How many requests to hit the server with concurrently. If the max is reached, requests are queued. Set to -1 for no maximum restriction on requests.
    Default: 2
    blockLoadDebounceMillis
    number
    How many milliseconds to wait before loading a block. Useful when scrolling over many rows, spanning many Partial Store blocks, as it prevents blocks loading until scrolling has settled.
    purgeClosedRowNodes
    boolean
    When enabled, closing group rows will remove children of that row. Next time the row is opened, child rows will be read from the datasource again. This property only applies when there is Row Grouping.
    Default: false
    serverSideSortingAlwaysResets
    boolean
    When enabled, always refreshes top level groups regardless of which column was sorted. This property only applies when there is Row Grouping.
    Default: false
    serverSideFilteringAlwaysResets
    boolean
    When enabled, always refreshes stores after filter has changed. Used by Full Store only, to allow Server-Side Filtering.
    Default: false
    getChildCount
    Function
    Allows setting the child count for a group row.
    getChildCount = (dataItem: any) => number;
    getServerSideStoreParams
    Function
    Allows providing different params for different levels of grouping.
    getServerSideStoreParams = (
        params: GetServerSideStoreParamsParams
    ) => ServerSideStoreParams;
    
    interface GetServerSideStoreParamsParams {
      // The level of the store. Top level is 0. 
      level: number;
      // The Row Node for the group that got expanded, or undefined if top level (ie no parent) 
      parentRowNode?: RowNode;
      // Active Row Group Columns, if any. 
      rowGroupColumns: Column[];
      // Active Pivot Columns, if any. 
      pivotColumns: Column[];
      // true if pivot mode is active. 
      pivotMode: boolean;
      // The grid api. 
      api: GridApi;
      // The column api. 
      columnApi: ColumnApi;
      // Application context as set on `gridOptions.context`. 
      context: any;
    }
    
    interface ServerSideStoreParams {
      // What store type to use.
      // If missing, then defaults to grid option `serverSideStoreType`. 
      storeType?: ServerSideStoreType;
      // For Partial Store only.
      // How many blocks to keep in cache.
      // If missing, defaults to grid options `maxBlocksInCache`. 
      maxBlocksInCache?: number;
      // For Partial Store only.
      // Cache block size.
      // If missing, defaults to grid options `cacheBlockSize`. 
      cacheBlockSize?: number;
    }
    
    type ServerSideStoreType = 'full' | 'partial'
    isServerSideGroupOpenByDefault
    Function
    Allows groups to be open by default.
    isServerSideGroupOpenByDefault = (
        params: IsServerSideGroupOpenByDefaultParams
    ) => boolean;
    
    interface IsServerSideGroupOpenByDefaultParams {
      data: any;
      rowNode: RowNode;
      // The grid api. 
      api: GridApi;
      // The column api. 
      columnApi: ColumnApi;
      // Application context as set on `gridOptions.context`. 
      context: any;
    }
    isApplyServerSideTransaction
    Function
    Allows cancelling transactions.
    isApplyServerSideTransaction = (
        params: IsApplyServerSideTransactionParams
    ) => boolean;
    
    interface IsApplyServerSideTransactionParams {
      // The transaction getting applied. 
      transaction: ServerSideTransaction;
      // The parent RowNode, if transaction is applied to a group. 
      parentNode: RowNode;
      storeInfo: any;
      // The grid api. 
      api: GridApi;
      // The column api. 
      columnApi: ColumnApi;
      // Application context as set on `gridOptions.context`. 
      context: any;
    }
    isServerSideGroup
    Function
    SSRM Tree Data: Allows specifying which rows are expandable. See SSRM Tree Data.
    isServerSideGroup = (dataItem: any) => boolean;
    getServerSideGroupKey
    Function
    SSRM Tree Data: Allows specifying group keys. See SSRM Tree Data.
    getServerSideGroupKey = (dataItem: any) => string;

    RowModel: Viewport

    See Viewport Row Model for more information.

    viewportDatasource
    To use the viewport row model you need to provide the grid with a viewportDatasource.
    viewportDatasource: IViewportDatasource;
    
    interface IViewportDatasource {
      // Gets called exactly once before viewPort is used. Passes methods to be used to tell viewPort of data loads / changes. 
      init(params: IViewportDatasourceParams): void;
      // Tell the viewport what the scroll position of the grid is, so it knows what rows it has to get. 
      setViewportRange(firstRow: number, lastRow: number): void;
      // Gets called once when viewPort is no longer used. If you need to do any cleanup, do it here. 
      destroy?(): void;
    }
    
    interface IViewportDatasourceParams {
      // Datasource calls this method when the total row count changes. This in turn sets the height of the grids vertical scroll. 
      setRowCount: (count: number, keepRenderedRows?: boolean) => void;
      // Datasource calls this when new data arrives. The grid then updates the provided rows. The rows are mapped [rowIndex]=>rowData]. 
      setRowData: (rowData: { [key: number]: any; }) => void;
      // Datasource calls this when it wants a row node - typically used when it wants to update the row node. 
      getRow: (rowIndex: number) => RowNode;
    }
    viewportRowModelPageSize
    number
    When using viewport row model, sets the page size for the viewport.
    viewportRowModelBufferSize
    number
    When using viewport row model, sets the buffer size for the viewport.

    Scrolling

    See Scrolling for more information.

    alwaysShowHorizontalScroll
    boolean
    Set to true to always show the horizontal scrollbar.
    Default: false
    alwaysShowVerticalScroll
    boolean
    Set to true to always show the vertical scrollbar.
    Default: false
    debounceVerticalScrollbar
    boolean
    Set to true to debounce the vertical scrollbar. Can provide smoother scrolling on slow machines. See Debounce Vertical Scroll.
    Default: false
    suppressHorizontalScroll
    boolean
    Set to true to never show the horizontal scroll. This is useful if the grid is aligned with another grid and will scroll when the other grid scrolls. (Should not be used in combination with alwaysShowHorizontalScroll.) See Aligned Grid as Footer.
    Default: false
    suppressScrollOnNewData
    boolean
    When true, the grid will not scroll to the top when new row data is provided. Use this if you don't want the default behaviour of scrolling to the top every time you load new data.
    Default: false
    suppressScrollWhenPopupsAreOpen
    boolean
    When true, the grid will not allow mousewheel / touchpad scroll when popup elements are present.
    Default: false
    suppressAnimationFrame
    boolean
    When true, the grid will not use animation frames when drawing rows while scrolling. Use this if the grid is working fast enough that you don't need animation frames and you don't want the grid to flicker.
    Default: false
    suppressMiddleClickScrolls
    boolean
    If true, middle clicks will result in click events for cells and rows. Otherwise the browser will use middle click to scroll the grid.
    Note: Not all browsers fire click events with the middle button. Most will fire only mousedown and mouseup events, which can be used to focus a cell, but will not work to call the onCellClicked function.
    Default: false
    suppressPreventDefaultOnMouseWheel
    boolean
    If true, mouse wheel events will be passed to the browser. Useful if your grid has no vertical scrolls and you want the mouse to scroll the browser page.
    Default: false
    scrollbarWidth
    number
    Tell the grid how wide in pixels the scrollbar is, which is used in grid width calculations. Set only if using non-standard browser-provided scrollbars, so the grid can use the non-standard size in its calculations.

    Selection

    See Selection Overview for more information.

    rowSelection
    string
    Type of Row Selection. See Row Selection.
    Options: 'single', 'multiple'
    rowMultiSelectWithClick
    boolean
    Set to true to allow multiple rows to be selected using single click. See Multi Select Single Click.
    Default: false
    isRowSelectable
    Function
    Callback to be used to determine which rows are selectable. By default rows are selectable, so return false to make a row un-selectable. See Specify Selectable Rows.
    isRowSelectable = (node: RowNode) => boolean;
    suppressRowDeselection
    boolean
    If true, rows will not be deselected if you hold down Ctrl and click the row or press Space.
    Default: false
    suppressRowClickSelection
    boolean
    If true, row selection won't happen when rows are clicked. Use when you only want checkbox selection.
    Default: false
    suppressCellFocus
    boolean
    If true, cells won't be focusable. This means keyboard navigation will be disabled for grid cells, but remain enabled in other elements of the grid such as column headers, floating filters, tool panels.
    Default: false
    suppressMultiRangeSelection
    boolean
    If true, only a single range can be selected. See Suppress Multi Range Selection.
    Default: false
    enableCellTextSelection
    boolean
    Set to true to be able to select the text within cells. Note: When this is set to true, the clipboard service is disabled.
    Default: false
    enableRangeSelection
    boolean
    Set to true to enable Range Selection. See Range Selection.
    Default: false
    enableRangeHandle
    boolean
    Set to true to enable the Range Handle. See Range Handle.
    Default: false
    enableFillHandle
    boolean
    Set to true to enable the Fill Handle. See Fill Handle.
    Default: false
    fillHandleDirection
    string
    Set to 'x' to force the fill handle direction to horizontal, or set to 'y' to force the fill handle direction to vertical.
    Default: xy
    Options: 'x', 'y', 'xy'
    fillOperation
    Function
    Callback to fill values instead of simply copying values or increasing number values using linear progression.
    fillOperation = (
        params: FillOperationParams
    ) => any;
    
    interface FillOperationParams {
      // The mouse event for the fill operation. 
      event: MouseEvent;
      // The values that have been processed by the fill operation. 
      values: any[];
      // The RowNode of the current cell being changed. 
      rowNode: RowNode;
      // The Column of the current cell being changed. 
      column: Column;
      // The values that were present before processing started. 
      initialValues: any[];
      // The index of the current processed value. 
      currentIndex: number;
      // The value of the cell being currently processed by the Fill Operation. 
      currentCellValue: any;
      // The direction of the Fill Operation. 
      direction: 'up' | 'down' | 'left' | 'right';
      // The grid api. 
      api: GridApi;
      // The column api. 
      columnApi: ColumnApi;
      // Application context as set on `gridOptions.context`. 
      context: any;
    }
    suppressClearOnFillReduction
    boolean
    Set this to true to prevent cell values from being cleared when the Range Selection is reduced by the Fill Handle.
    Default: false

    Sorting

    See Row Sorting for more information.

    sortingOrder
    ('asc' | 'desc' | null)[]
    Array defining the order in which sorting occurs (if sorting is enabled). Values can be 'asc', 'desc' or null. For example: sortingOrder: ['asc', 'desc']. See Example Sorting Order and Animation.
    Default: [null, 'asc', 'desc']
    accentedSort
    boolean
    Set to true to specify that the sort should take accented characters into account. If this feature is turned on the sort will be slower. See Accented Sort.
    Default: false
    unSortIcon
    boolean
    Set to true to show the 'no sort' icon. See Example Custom Sorting.
    Default: false
    suppressMultiSort
    boolean
    Set to true to suppress multi-sort when the user shift-clicks a column header.
    Default: false
    alwaysMultiSort
    boolean
    Set to true to always multi-sort when the user clicks a column header, regardless of key presses.
    Default: false
    multiSortKey
    string
    Set to 'ctrl' to have multi sorting work using the Ctrl (or Command ⌘ for Mac) key. See Multi Column Sorting.
    Options: 'ctrl'
    suppressMaintainUnsortedOrder
    boolean
    Set to true to suppress sorting of un-sorted data to match original row data.
    Default: false
    postSortRows
    Function
    Callback to perform additional sorting after the grid has sorted the rows. See Post Sort.
    postSortRows = (
        params: PostSortRowsParams
    ) => void;
    
    interface PostSortRowsParams {
      nodes: RowNode[];
      // The grid api. 
      api: GridApi;
      // The column api. 
      columnApi: ColumnApi;
      // Application context as set on `gridOptions.context`. 
      context: any;
    }
    deltaSort
    boolean
    When enabled, sorts only the rows added/updated by a transaction. See Delta sorting.
    Default: false

    Styling

    icons
    { [key: string]: Function | string; }
    Icons to use inside the grid instead of the grid's default icons. See Custom Icons.
    rowHeight
    number
    Default row height in pixels. See Row Height.
    Default: 25
    getRowHeight
    Function
    Callback version of property rowHeight to set height for each row individually. Function should return a positive number of pixels, or return null/undefined to use the default row height. See Row Height.
    getRowHeight = (
        params: RowHeightParams
    ) => number | undefined | null;
    
    interface RowHeightParams {
      data: any;
      node: RowNode;
      // The grid api. 
      api: GridApi;
      // The column api. 
      columnApi: ColumnApi;
      // Application context as set on `gridOptions.context`. 
      context: any;
    }
    rowStyle
    RowStyle
    The style properties to apply to all rows. Set to an object of key (style names) and values (style values) See Row Style.
    rowStyle: RowStyle;
    
    interface RowStyle {
      [cssProperty: string]: string | number;
    }
    getRowStyle
    Function
    Callback version of property rowStyle to set style for each row individually. Function should return an object of CSS values or undefined for no styles. See Row Style.
    getRowStyle = (params: RowClassParams) => RowStyle | undefined;
    
    interface RowClassParams {
      // The data associated with this row from rowData 
      data: any;
      // The RowNode associated with this row 
      node: RowNode;
      // The index of the row 
      rowIndex: number;
      // The grid api. 
      api: GridApi;
      // The column api. 
      columnApi: ColumnApi;
      // Application context as set on `gridOptions.context`. 
      context: any;
    }
    
    interface RowStyle {
      [cssProperty: string]: string | number;
    }
    rowClass
    string | string[]
    CSS class(es) for all rows. Provide either a string (class name) or array of strings (array of class names). See Row Class.
    getRowClass
    Function
    Callback version of property rowClass to set class(es) for each row individually. Function should return either a string (class name), array of strings (array of class names) or undefined for no class. See Row Class.
    getRowClass = (params: RowClassParams) => string | string[] | undefined;
    
    interface RowClassParams {
      // The data associated with this row from rowData 
      data: any;
      // The RowNode associated with this row 
      node: RowNode;
      // The index of the row 
      rowIndex: number;
      // The grid api. 
      api: GridApi;
      // The column api. 
      columnApi: ColumnApi;
      // Application context as set on `gridOptions.context`. 
      context: any;
    }
    rowClassRules
    RowClassRules
    Rules which can be applied to include certain CSS classes. See Row Class Rules.
    rowClassRules: RowClassRules;
    
    interface RowClassRules {
      [cssClassName: string]: (((params: RowClassParams) => boolean) | string);
    }
    
    interface RowClassParams {
      // The data associated with this row from rowData 
      data: any;
      // The RowNode associated with this row 
      node: RowNode;
      // The index of the row 
      rowIndex: number;
      // The grid api. 
      api: GridApi;
      // The column api. 
      columnApi: ColumnApi;
      // Application context as set on `gridOptions.context`. 
      context: any;
    }
    isFullWidthRow
    Function
    Tells the grid if this row should be rendered as full width. See Full Width Rows.
    isFullWidthRow = (
        params: IsFullWidthRowParams
    ) => boolean;
    
    interface IsFullWidthRowParams {
      rowNode: RowNode;
      // The grid api. 
      api: GridApi;
      // The column api. 
      columnApi: ColumnApi;
      // Application context as set on `gridOptions.context`. 
      context: any;
    }
    suppressRowHoverHighlight
    boolean
    Set to true to not highlight rows by adding the ag-row-hover CSS class.
    Default: false
    suppressRowTransform
    boolean
    Uses CSS top instead of CSS transform for positioning rows. Useful if the transform function is causing issues such as used in row spanning.
    Default: false
    columnHoverHighlight
    boolean
    Set to true to highlight columns by adding the ag-column-hover CSS class.
    Default: false

    Tooltips

    See Tooltip Component for more information.

    enableBrowserTooltips
    boolean
    Set to true to use the browser's default tooltip instead of using the grid's Tooltip Component.
    Default: false
    tooltipShowDelay
    number
    The delay in milliseconds that it takes for tooltips to show up once an element is hovered over. Note: This property does not work if enableBrowserTooltips is true.
    Default: 2000
    tooltipHideDelay
    number
    The delay in milliseconds that it takes for tooltips to hide once they have been displayed. Note: This property does not work if enableBrowserTooltips is true.
    Default: 10000
    tooltipMouseTrack
    boolean
    Set to true to have tooltips follow the cursor once they are displayed.
    Default: false