More Control of ag-Grid with React

Access the Grid & Column API

When the grid is initialised, it will fire the gridReady event. If you want to use the API of the grid, you should put an onGridReady(params) callback onto the grid and grab the api from the params. You can then call this api at a later stage to interact with the grid (on top of the interaction that can be done by setting and changing the props).

// provide gridReady callback to the grid <AgGridReact onGridReady={this.onGridReady} .../> // in onGridReady, store the api for later use onGridReady = (params) => { this.api = params.api; this.columnApi = params.columnApi; } // use the api some point later! somePointLater() { this.api.selectAll(); this.columnApi.setColumnVisible('country', visible); }

The api and columnApi are also stored inside the React backing object of the grid. So you can also look up the backing object via React and access the api and columnApi that way.

Row Data Control

By default the ag-Grid React component will check props passed in to deteremine if data has changed and will only re-render based on actual changes.

For rowData we provide an option for you to override this behaviour by the rowDataChangeDetectionStrategy property:

<AgGridReact onGridReady={this.onGridReady} rowData={this.state.rowData} rowDataChangeDetectionStrategy='IdentityCheck' ...other properties

The following table illustrates the different possible combinations:

Strategy Behaviour Notes
IdentityCheck Checks if the new prop is exactly the same as the old prop (i.e. ===) Quick, but can result in re-renders if no actual data has changed
DeepValueCheck Performs a deep value check of the old and new data Can have performance implication for larger data sets
NoCheck Does no checking - passes the new value as is down to the grid Quick, but can result in re-renders if no actual data has changed

The default value for this setting is:

DeltaRowDataMode Default
true IdentityCheck
false DeepValueCheck

If you're using Redux or larger data sets then a default of IdentityCheck is a good idea provided you ensure you make a copy of thew new row data and do not mutate the rowData passed in.