Framework:Javascript Data GridAngular Data GridReact Data GridVue Data Grid

React Data Grid: Grid Properties

All of these grid properties 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?: { new (): IStatusPanelComp; } | string;
  statusPanelFramework?: any;
  align?: string;
  key?: string;
  statusPanelParams?: any;
}
sideBar
SideBarDef | string | boolean | null
Specifies the side bar components. See Side Bar.
sideBar: SideBarDef | 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](/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](/custom-icons/) 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 by name here. 
  toolPanel?: { new (): IToolPanelComp; } | string;
  // Same as `toolPanel` but for framework specific components. 
  toolPanelFramework?: any;
  // Customise the parameters provided to the `toolPanel` component. 
  toolPanelParams?: any;
}
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
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
enableBrowserTooltips
boolean
Set to true to use the browser's default tooltip instead of using the grid's Tooltip Component. See 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
tooltipMouseTrack
boolean
Set to true to have tooltips follow the cursor once they are displayed.
Default: false
popupParent
DOM element to use as the popup parent for grid popups (context menu, column menu etc). See Popup Parent.

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
clipboardDeliminator
string
Specify the deliminator to use when copying to clipboard.
suppressCopyRowsToClipboard
boolean
Set to true to only have the range selection, and not row selection, copied to clipboard.
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.

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.
Default: false

Column Headers

See Column Headers for more information.

headerHeight
number
The height in pixels for the row containing the column label header.
Default: 25
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.
Default: 20
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 plain JavaScript components.
frameworkComponents
{ [p: string]: { new(): any; }; } | any
A map of component names to framework (Angular, React, Vue etc.) 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

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
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 Enable Charts.
Default: false
chartThemes
string[]
The list of chart themes to be used. See Chart 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 {
  baseTheme?: AgChartThemeName;
  palette?: AgChartThemePalette;
  overrides?: AgChartThemeOverrides;
}

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

Loading Cell Renderers

See loadingCellRenderer for more information.

loadingCellRenderer
{ new(): ICellRenderer; } | string
cellRenderer to use when data is loading via a DataSource. See Loading Cell Renderer.
loadingCellRenderer: { new(): ICellRenderer; } | string;

interface ICellRenderer {
  // Get the cell to refresh. Return true if successful. Return false if not (or you don't have refresh logic),
  // then the grid will refresh the cell for you. 
  refresh(params: ICellRendererParams): boolean;
}
loadingCellRendererFramework
any
Framework cellRenderer to use when data is loading via a DataSource. See Loading Cell Renderer.
loadingCellRendererParams
any
Params to be passed to loading cell renderer component. See Cell Renderer Params.
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;
  api: GridApi;
  columnApi: ColumnApi;
  // The context as provided on `gridOptions.context`. 
  context: any;
  // 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;
}

interface LoadingCellRendererSelectorResult {
  // Equivalent of setting `loadingCellRenderer` 
  component?: { new (): ICellRenderer; } | string;
  // Equivalent of setting `loadingCellRendererFramework` 
  frameworkComponent?: any;
  // Equivalent of setting `loadingCellRendererParams` 
  params?: any;
}

interface ICellRenderer {
  // Get the cell to refresh. Return true if successful. Return false if not (or you don't have refresh logic),
  // then the grid will refresh the cell for you. 
  refresh(params: ICellRendererParams): boolean;
}

Localisation

See Localisation for more information.

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

Master Detail

See Master Detail for more information.

masterDetail
boolean
Set to true to enable Master Detail.
Default: false
detailCellRenderer
{ new(): ICellRendererComp; } | ICellRendererFunc | string
Provide a custom detailCellRenderer to use when a master row is expanded. See Custom Detail.
detailCellRenderer: { new(): ICellRendererComp; } | ICellRendererFunc | string;

interface ICellRendererFunc {
    (params: ICellRendererParams) : HTMLElement | string
}
detailCellRendererFramework
any
Framework 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

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
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
{ new(): ILoadingOverlayComp; } | string
Provide a custom loading overlay component. See Loading Overlay Component.
loadingOverlayComponentFramework
any
Same as loadingOverlayComponent but for a framework 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
{ new(): INoRowsOverlayComp; } | string
Provide a custom no rows overlay component See No Rows Overlay Component.
noRowsOverlayComponentFramework
any
Same as noRowsOverlayComponent but for a framework 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
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.
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;
  api: GridApi;
  columnApi: ColumnApi;
  // The context as provided 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

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
string
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
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
never
There is no such property as suppressRowVirtualisation - if you want to do this, then set the rowBuffer property to be very large, e.g. 9999. Warning: rendering lots of rows will mean a very large amount of rendering in the DOM which will slow things down.
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
{ new(): ICellRendererComp; } | ICellRendererFunc | string
Sets the Cell Renderer to use for full width rows. See Cell Renderer.
fullWidthCellRenderer: { new(): ICellRendererComp; } | ICellRendererFunc | string;

interface ICellRendererFunc {
    (params: ICellRendererParams) : HTMLElement | string
}
fullWidthCellRendererFramework
any
Same as fullWidthCellRenderer but for a framework component.
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
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
{ new(): ICellRendererComp; } | ICellRendererFunc | string
Sets the Cell Renderer to use when groupDisplayType = 'groupRows'. See Cell Renderer.
groupRowRenderer: { new(): ICellRendererComp; } | ICellRendererFunc | string;

interface ICellRendererFunc {
    (params: ICellRendererParams) : HTMLElement | string
}
groupRowRendererFramework
any
Same as groupRowRenderer but for a framework component.
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.

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
string
Sets the row model type.
Default: clientSide
Options: 'clientSide', 'infinite', 'viewport', 'serverSide'

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.
immutableData
boolean
Enables Immutable Data mode, for compatibility with immutable stores. See Immutable Data.
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: any;
  // If doing server side filtering, contains the filter model 
  filterModel: any;
  // The context as provided on `gridOptions.context` 
  context: any;
}
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.
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;
  api: GridApi;
  columnApi: ColumnApi;
}

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: any;
}

interface ColumnVO {
  id: string;
  displayName: string;
  field?: string;
  aggFunc?: string;
}

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.
Default: 1
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

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 older browsers, e.g. Internet Explorer. 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
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
suppressCellSelection
boolean
If true, cells won't be selectable. This means cells will not get keyboard focus when you click on them.
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'
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
(string | 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
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. See Big Data Small Transactions.
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
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;
}
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.
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;
  api: GridApi;
  columnApi: ColumnApi;
  // The context as provided 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