React Data GridGrid Lifecycle

This section covers some common lifecycle events that are raised after grid initialisation, data updates, and before the grid is destroyed.

Grid Ready Copy Link

The gridReady event fires upon grid initialisation but the grid may not be fully rendered.

Common Uses

• Customising Grid via API calls.
• Event listener setup.
• Grid-dependent setup code.

In this example, gridReady applies user pinning preferences before rendering data.

First Data Rendered Copy Link

The firstDataRendered event fires the first time data is rendered into the grid. It will only be fired once unlike rowDataUpdated which is fired on every data change.

Row Data Updated Copy Link

The rowDataUpdated event fires every time the grid's data changes, by Updating Row Data or by applying Transaction Updates. In the Server Side Row Model, use the Model Updated Event instead.

In this example the time at which firstDataRendered and rowDataUpdated are fired is recorded above the grid. Note that firstDataRendered is only set on the initial load of the grid and is not updated when reloading data.

Grid Pre-Destroyed Copy Link

The gridPreDestroyed event fires just before the grid is destroyed and is removed from the DOM.

Common Uses

• Clean up resources.
• Save grid state.
• Disconnect other libraries.

In this example, gridPreDestroyed saves column widths before grid destruction.