Grid Properties
All of these grid properties are available through the GridOptions
interface.
Columns
columnDefs | Array of Column Definitions. |
defaultColDef | A default column definition. |
defaultColGroupDef | A default column group definition. All column group definitions will use these properties. Items defined in the actual column group definition get precedence. |
columnTypes | An object map of custom column types which contain groups of properties that column definitions can inherit. |
colResizeDefault | Set to 'shift' to have shift-resize as the default resize operation (same as user holding down Shift while resizing). |
suppressAutoSize | Suppresses auto-sizing columns for columns. In other words, double clicking a column's header's edge will not auto-size. Default: false |
autoSizePadding | 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. Default: 4 |
skipHeaderOnAutoSize | Set this to true to skip the headerName when autoSize is called by default. See Resizing Example.Default: false |
suppressColumnMoveAnimation | 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 |
suppressMovableColumns | Set to true to suppress column moving, i.e. to make the columns fixed position.Default: false |
suppressFieldDotNotation | 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 |
unSortIcon | Set to true to show the 'no sort' icon. See Example Custom Sorting.Default: false |
suppressMultiSort | Set to true to suppress multi-sort when the user shift-clicks a column header.Default: false |
suppressMenuHide | Set to true to always show the column menu button, rather than only showing when the mouse is over the column header.Default: false |
autoGroupColumnDef | Allows specifying the group 'auto column' if you are not happy with the default. If grouping, this column def is included as the first column definition in the grid. If not grouping, this column is not included. |
suppressColumnStateEvents | Set to true to suppress column events being raised when columnApi.applyColumnState(state) and columnApi.resetColumnState() are invoked, or when changing Column State by updating Column Definitions.Default: false |
allowDragFromColumnsToolPanel | Allow reordering and pinning columns by dragging columns from the columns tool panel to the grid. Default: false |
applyColumnDefOrder | Sorts the grid columns in the order of Column Definitions after Column Definitions are updated. See Apply Column Order. Default: false |
Sort and Filter
quickFilterText | Rows are filtered using this text as a quick filter. |
cacheQuickFilter | Set to true to turn on the quick filter cache, used for a performance gain when using the quick filter.Default: false |
sortingOrder | 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. |
accentedSort | Set to true to specify that the sort should take into account accented characters. If this feature is turned on the sort will perform slower. See Accented Sort.Default: false |
multiSortKey | Set to 'ctrl' to have multi sorting work using the Ctrl or Command (for Apple) keys. See Multi Column Sorting. |
suppressMaintainUnsortedOrder | Set to true to suppress sorting of un-sorted data to match original row data. See Big Data Small Transactions.Default: false |
excludeChildrenWhenTreeDataFiltering | 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 |
Selection
rowSelection | Type of Row Selection. Options: 'single' , 'multiple' |
rowMultiSelectWithClick | Set to true to allow multiple rows to be selected using single click. See Multi Select Single Click.Default: false |
suppressRowDeselection | If true then rows will not be deselected if you hold down Ctrl and click the row or press Space .Default: false |
suppressRowClickSelection | If true , row selection won't happen when rows are clicked. Use when you want checkbox selection exclusively.Default: false |
suppressCellSelection | If true , cells won't be selectable. This means cells will not get keyboard focus when you click on them.Default: false |
enableRangeSelection | Set to true to enable Range Selection.Default: false |
enableRangeHandle | Set to true to enable Range HandleDefault: false |
enableFillHandle | Set to true to enable Fill HandleDefault: false |
fillHandleDirection | Set to 'x' to force the fill handle direction to horizontal, or set it to 'y' to force the fill handle direction to vertical Default: 'xy' |
suppressClearOnFillReduction | Set it to true to prevent cell values from being cleared when the Range Selection is reduced by the Fill Handle.Default: false |
Row Dragging
rowDragManaged | Set to true to enable Managed Row Dragging.Default: false |
suppressRowDrag | Set to true to suppress Row Dragging.Default: false |
suppressMoveWhenRowDragging | 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. See Row Dragging.Default: false |
Editing
singleClickEdit | Set to true to enable Single Click Editing for cells, to start editing with a single click.Default: false |
suppressClickEdit | Set to true so that neither single nor double click starts editing. See Single Click, Double Click, No Click Editing.Default: false |
editType | Set to 'fullRow' to enable Full Row Editing. Otherwise leave blank to edit one cell at a time. |
enableCellChangeFlash | Set to true to have cells flash after data changes. See Flashing Data Changes.Default: false |
cellFlashDelay | To be used in combination with enableCellChangeFlash , this configuration will set delay in ms of how long a cell should remain in its "flashed
state.Default: 500 |
cellFadeDelay | To be used in combination with enableCellChangeFlash , this configuration will set delay in ms of how long the "flashed
state animation takes to fade away after the timer set by cellFlashDelay has completed.Default: 1000 |
allowShowChangeAfterFilter | Set to true to have cells flash after data changes even when the change is due to filtering. See Flashing Data Changes.Default: false |
stopEditingWhenGridLosesFocus | Set this to true to stop cell editing when grid loses focus. The default is the grid stays editing until focus goes onto another cell. For inline (non-popup) editors only.Default: false |
enterMovesDown | Set both properties to true to have Excel-style behaviour for the Enter key, i.e. enter key moves down.Default: false |
Headers
headerHeight | The height in pixels for the row containing the column label header. See Header Height. Default: 25 |
groupHeaderHeight | The height for the rows containing header column groups. If not specified, it uses headerHeight . See Header Height. |
floatingFiltersHeight | The height for the row containing the floating filters. See Header Height. Default: 20 |
pivotHeaderHeight | The height for the row containing the columns when in pivot mode. If not specified, it uses headerHeight . See Header Height. |
pivotGroupHeaderHeight | The height for the row containing header column groups when in pivot mode. If not specified, it uses groupHeaderHeight . See Header Height. |
Row Grouping
groupUseEntireRow | Used when grouping. If true , a group row will span all columns across the entire width of the table. If false , the cells will be rendered as normal and you will have the opportunity to include a grouping column (normally the first on the left) to show the group. See Full Width Group Rows.Default: false |
groupDefaultExpanded | 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 Removing Single Children.Default: 0 |
autoGroupColumnDef | Allows specifying the group 'auto column' if you are not happy with the default. If grouping, this column def is included as the first column definition in the grid. If not grouping, this column is not included. See Configuring the Auto Group Column. |
groupSuppressAutoColumn | If true , the grid will not swap in the grouping column when grouping is enabled. Use this if you want complete control on the column displayed and don't want the grid's help, in other words if you already have a column in your column definitions that is responsible for displaying the groups. See Configuring the Auto Group Column.Default: false |
groupMultiAutoColumn | If using auto column, set to true to have each group in its own separate column, e.g. if grouping by Country then Year, two auto columns will be created, one for Country and one for Year. See Multi Auto Column Group.Default: false |
groupSelectsChildren | When true , if you select a group, the children of the group will also be selected. See Group Selection.Default: false |
groupIncludeFooter | If grouping, 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 Grouping Footers.Default: false |
groupIncludeTotalFooter | Set to true to show a 'grand' total group footer across all groups. See Grouping Footers.Default: false |
groupSuppressBlankHeader | If true , and showing footer, aggregate data will be displayed at both the header and footer levels always. This stops the possibly undesirable behaviour of the header details 'jumping' to the footer on expand.Default: false |
groupSelectsFiltered | If using groupSelectsChildren , then only the children that pass the current filter will get selected. See Group Selection.Default: false |
showOpenedGroup | Shows the open group in the group column for non-group rows. See Showing Open Groups. Default: false |
groupRemoveSingleChildren | Set to true to collapse groups that only have one child. See Remove Single Children.Default: false |
groupRemoveLowestSingleChildren | Set to true to collapse lowest level groups that only have one child. See Remove Single Children.Default: false |
groupHideOpenParents | 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 Group Hide Open Parents.Default: false |
rowGroupPanelShow | When to show the 'row group panel' (where you drag rows to group) at the top. See Column Tool Panel Example. Default: 'never' Options: 'never' , 'always' , 'onlyWhenGrouping' |
Row Pivoting
pivotMode | Set to true to enable pivot mode. See Pivoting.Default: false |
pivotPanelShow | 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' |
suppressAggFuncInHeader | When true , column headers won't include the aggFunc , e.g. 'sum(Bank Balance) ' will just be 'Bank Balance' .Default: false |
suppressAggAtRootLevel | When true , the aggregations won't be computed for root node of the grid. See Big Data Small Transactions.Default: false |
aggregateOnlyChangedColumns | When using change detection, only the updated column with get re-aggregated. Default: false |
functionsReadOnly | 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 | A map of 'function name' to 'function' for custom aggregation functions. See Custom Aggregation Functions. |
suppressAggFilteredOnly | Set to true so that aggregations are not impacted by filtering. See Custom Aggregation Functions. |
suppressMakeVisibleAfterUnGroup | By default, when a column is un-grouped it is made visible. e.g. on main demo: 1) group by country by dragging (action of moving column out of grid means column is made visible=false ); then 2) un-group by clicking 'x' on the country column in the column drop zone; the column is then made visible=true . This property stops the column becoming visible again when un-grouping.Default: false |
pivotColumnGroupTotals | 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 | 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' |
suppressExpandablePivotGroups | 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 |
pivotSuppressAutoColumn | 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.Default: false |
Data and Row Models
rowModelType | Sets the Row Model type. Default: 'clientSide' Options: 'clientSide' , 'infinite' , 'viewport' , 'serverSide' |
rowData | (Client-Side Row Model only) Set the data to be displayed as rows in the grid. |
immutableData | (Client-Side Row Model only) Enables Immutable Data mode, for compatibility with immutable stores. |
pinnedTopRowData | Data to be displayed as Pinned Top Rows in the grid. |
pinnedBottomRowData | Data to be displayed as Pinned Bottom Rows in the grid. |
Row Model: Server-Side
serverSideStoreType | Whether to use Full Store or Partial Store for storing rows. See Row Stores Default: 'full' Options: 'full' , 'partial' |
cacheBlockSize | 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 | 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 low. |
maxConcurrentDatasourceRequests | How many requests to hit the server with concurrently. If the max is reached, requests are queued. Default: 1 |
blockLoadDebounceMillis | 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 | When enabled, closing group rows will remove children of that row. Next time the row is opened, child rows will be read form the datasoruce again. This property only applies when there is Row Grouping. |
serverSideSortingAlwaysResets | When enabled, always refreshes top level groups regardless of which column was sorted. This property only applies when there is Row Grouping. |
serverSideFilteringAlwaysResets | When enabled, always refreshes stores after filter has changed. Use by Full Store only, to allow Server-Side Filtering. |
Row Model: Viewport
viewportRowModelPageSize | When using viewport row model, sets the pages size for the viewport. |
viewportRowModelBufferSize | When using viewport row model, sets the buffer size for the viewport. |
viewportDatasource | To use the viewport row model you provide the grid with a viewportDatasource . See Viewport. |
Scrolling
alwaysShowVerticalScroll | Set to true to always show the vertical scrollbar.Default: false |
debounceVerticalScrollbar | Set to true to debounce the vertical scrollbar. Can provide smoother scrolling on older browsers, eg IE.Default: false |
suppressHorizontalScroll | 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. See Aligned Grid as Footer.Default: false |
suppressColumnVirtualisation | 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 | 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: lots of rendered rows will mean a very large amount of rendering in the DOM which will slow things down. |
suppressMaxRenderedRowRestriction | 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 |
suppressScrollOnNewData | 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 |
suppressAnimationFrame | 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 |
Pagination
pagination | Set whether Pagination is enabled. Default: false |
paginationPageSize | How many rows to load per page. If paginationAutoPageSize is specified, this property is ignored. See Customising Pagination.Default: 100 |
paginationAutoPageSize | Set to true so that the number of rows to load per page is automatically adjusted by ag-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 |
suppressPaginationPanel | If true , the default ag-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 |
paginateChildRows | Set to true to have pages split children of groups when using Row Grouping or detail rows with Master Detail. See Pagination & Child Rows. |
Full Width Renderers
groupRowRenderer | Sets the Cell Renderer to use when groupUseEntireRow=true . See Row Grouping. |
groupRowInnerRenderer | Sets the inner Cell Renderer to use when groupUseEntireRow=true . See Row Grouping. |
fullWidthCellRenderer | Sets the Cell Renderer to use for Full Width Rows. |
Master Detail
masterDetail | Used to enable Master Detail. See Enabling Master Detail. Default: false |
detailCellRendererParams | Specifies the params to be used by the default detail Cell Renderer. See DetailDetail Grids. |
keepDetailRows | Set to true to keep detail rows for when they are displayed again.Default: false |
keepDetailRowsCount | Sets the number of details rows to keep. Default: 10 |
detailRowHeight | Set fixed height for each detail row. |
Rendering and Styling
icons | Icons to use inside the grid instead of the grid's default icons. |
rowHeight | Default Row Height in pixels. Default: 25 |
animateRows | Set to true to enable Row Animation.Default: false |
rowStyle | The style to give a particular row. See Row Style. |
rowClass | The class to give a particular row. See Row Class. |
rowClassRules | Rules which can be applied to include certain CSS classes. See Row Class Rules. |
excelStyles | The list of Excel styles to be used when exporting to Excel |
scrollbarWidth | Tell the grid how wide 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. |
suppressRowHoverHighlight | Set to true to not highlight rows by adding the ag-row-hover CSS class.Default: false |
Clipboard
suppressCopyRowsToClipboard | Set to true to only have the range selection, and not row selection, copied to clipboard.Default: false |
copyHeadersToClipboard | Set to true to also include headers when copying to clipboard using Ctrl + C clipboard.Default: false |
clipboardDeliminator | Specify the deliminator to use when copying to clipboard. |
suppressFocusAfterRefresh | 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 |
suppressLastEmptyLineOnPaste | 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 |
enableCellTextSelection | 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 |
Localisation
localeText | A map of key->value pairs for localising text within the grid. See Localisation. |
Overlays
suppressLoadingOverlay | Disables the 'loading' overlay. Default: false |
suppressNoRowsOverlay | Disables the 'no rows' overlay. Default: false |
overlayLoadingTemplate | Provide a template for 'loading' overlay. |
overlayNoRowsTemplate | Provide a template for 'no rows' overlay. |
loadingOverlayComponent | Provide a custom loading overlay component. |
loadingOverlayComponentParams | Customise the parameters provided to the loading overlay component. |
noRowsOverlayComponent | Provide a custom no rows overlay component. |
noRowsOverlayComponentParams | Customise the parameters provided to the no rows overlay component. |
Charts
enableCharts | Set to true to Enable Charts.Default: false |
chartThemes | The list of chart themes to be used, see Chart Themes. Default: ['ag-default', 'ag-material', 'ag-pastel', 'ag-vivid', 'ag-solar'] |
customChartThemes | A map containing custom chart themes, see Custom Chart Themes. |
chartThemeOverrides | Chart theme overrides applied to all themes, see Overriding Existing Themes. |
Components
See Components for more information.
components | A map of component names to plain JavaScript components. |
frameworkComponents | A map of component names to framework (React, Angular etc) components. |
Miscellaneous
popupParent | DOM element to use as popup parent for grid popups (context menu, column menu etc). |
valueCache | Set to true to turn on the value cache.Default: false |
valueCacheNeverExpires | Set to true to set value cache to not expire after data updates.Default: false |
defaultExportParams | A default configuration object used to export to CSV or Excel. |
suppressMiddleClickScrolls | If true , then middle clicks will result in click events for cell and row. 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 | 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 |
enableBrowserTooltips | Set to true to use the browser's default tooltip instead of using ag-Grid's Tooltip Component.Default: false |
tooltipShowDelay | The delay in milliseconds that it takes for tooltips to show up once an element is hovered. Note: This property does not work if enableBrowserTooltips is true .Default: 2000 |
tooltipMouseTrack | Set to true to have tooltips follow the cursor once they are displayed.Default: false |
enableCellExpressions | Set to true to allow cell expressions.Default: false |
domLayout | Switch between layout options. See Printing and Auto Height. Default: 'normal' Options: 'normal' , 'autoHeight' , 'print' |
ensureDomOrder | 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 |
rowBuffer | The number of rows rendered outside the scrollable viewable area the grid renders. Having a buffer means the grid will have rows ready to show as the user slowly scrolls vertically. Default: 20 |
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. |
suppressParentsInRowNodes | If true , rowNodes don't get 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 |
suppressDragLeaveHidesColumns | If true , when you drag a column out of the grid (e.g. to the group zone) the column is not hidden.Default: false |
layoutInterval | The interval in milliseconds that the grid uses to periodically check its size and lay itself out again if the size has changed, such as when your browser changes size, or your application changes the size of the div element that the grid lives inside. To stop the periodic layout, set it to -1 .Default: 500 |
enableRtl | Set to true to operate grid in RTL (Right to Left) mode.Default: false |
debug | Set this to true to enable debug information from ag-Grid and related components. Will result in additional logging being output, but very useful when investigating problems.Default: false |
context | Provides a context object that is provided to different callbacks the grid uses. Used for passing additional information to the callbacks by your application. |
suppressContextMenu | Set to true to not show context menu. Use if you don't want to use the default 'right click' context menu. Default: false |
preventDefaultOnContextMenu | 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 | Allows context menu to show, even when Ctrl key is held down. |
statusBar | Specifies the status bar components to use in the status bar. |
suppressTouch | Disables touch support (but does not remove the browser's efforts to simulate mouse events on touch). Default: false |
suppressAsyncEvents | Disables the async nature of the events introduced in v10, and makes them synchronous. This property is only introduced for the purpose of supporting legacy code which has a dependency to sync events in earlier versions (v9 or earlier) of ag-Grid. It is strongly recommended that you don't change this property unless you have legacy issues. Default: false |
suppressCsvExport | Prevents the user from exporting the grid to CSV. Default: false |
suppressExcelExport | Prevents the user from exporting the grid to Excel. Default: false |
asyncTransactionWaitMillis | How many milliseconds to wait before executing a batch of async transactions. |
suppressPropertyNamesCheck | Disables showing a warning message in the console if using a gridOptions or colDef property that doesn't exist.Default: false |
suppressRowTransform | 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 |
serverSideSortingAlwaysResets | When true , a full reset will be performed when sorting using the Server-Side Row Model.Default: false |
suppressBrowserResizeObserver | 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 |