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).
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
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
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.
rowData we provide an option for you to override this behaviour by the
The following table illustrates the different possible combinations:
||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|
||Performs a deep value check of the old and new data||Can have performance implication for larger data sets|
||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:
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.