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.

Cell Component Rendering

React renders components asynchronously and although this is fine in the majority of use cases it can be the case that in certain circumstances a very slight flicker can be seen where an old component is destroyed but the new one is not yet rendered by React.

In order to eliminate this behaviour the Grid will "pre-render" cell components and replace them with the real component once they are ready.

What this means is that the render method on a given Cell Component will be invoked twice, once for the pre-render and once for the actual component creation.

In the vast majority of cases this will result in overall improved performance but if you wish to disable this behaviour you can do so by setting the disableStaticMarkup property on the AgGridReact component to true:

<AgGridReact disableStaticMarkup={true}

Note that this pre-render only applies to Cell Components - other types of Components are unaffected.

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:

ImmutableData 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.