Integrating ag-Grid into your React application
By: Martina Carter
Tags: JavaScript, Ag Grid, Reactjs, Javascript Development, React

If you’re trying to learn how to incorporate ag-Grid into your React application, you’ve made it to the right place.

In this article, I will cover both the client-side and server-side implementations of ag-Grid. I will explain all the necessary parts, and how to integrate both implementations into a React application.

For those new to ag-Grid, it is a feature-rich JavaScript data grid that supports major JavaScript frameworks like React, Angular, and Vue.

I’ve linked some popular features listed in the ag-Grid documentation:

Client Side Implementation

The client-side implementation is pretty straightforward. Here is what we’ll need for the client-side implementation:

Ag-Grid React Component

OnGridReady

GridOptions

ColumnDefs

RowData

There is also one other thing we’ll add but DON’T WORRY, I will explain.

OnGridReady

The first prop we added was onGridReady , which is an event callback that provides the grid and column API. Here we’ve used it to set the state of the local gridApi variable, which we can use later to perform actions on the grid like getting a selected row.

GridOptions

The gridOptions is a ‘one stop shop’ for the entire interface into the grid. All the grid properties are available through this object. Here it points to GridConfig.gridConfig .

The following is the file I’ve created called GridConfig , which contains an object with some properties that are needed for the grid.

Note: It is not necessary to create a separate file for the grid. I’ve only done so to separate concerns

ColumnDefs

As mentioned before, the columnDefs were necessary for the grid. It is a property which contains the headerName to be displayed and the field for the corresponding row data.

Through the gridOptions , we are setting the column definitions. We could have easily placed the rowData property here in the configuration file or added it directly as a prop.

RowData

The rowData is the property used to set the data to be displayed as rows in the grid.

Getting the Data

All that is left to explain is the getGridData function. It makes a GET request to a file in the public folder where I’ve added the data for the grid (this can be replaced with a real endpoint). Once the data is returned, we set the rowData to its result and the grid gets populated with that data.

Server Side Implementation (Enterprise only)

There are a few differences when using the server-side implementation of ag-Grid. First we will have to introduce some new props which are rowModelType and cacheBlockSize . We also have to provide a new mechanism to supply the grid with data.

When using the client-side row model implementation, all we had to do was supply the data to the rowData prop for the grid. However, this prop is only available for the client-side implementation.

When using the server-side row model implementation, applications are required to implement a datasource, which is used to supply data to the grid. This implementation must conform to the server-side data source interface.

The following snippet shows a simple datasource implementation:

Here is our implementation:

RowModelType

The rowModelType sets the strategy for how data will be loaded into the grid. this is set to clientSide by default.

CacheBlockSize

The cacheBlockSize property determines how much data to fetch per request

Registering the Datasource

Aside from the new props needed for the grid, there are some other new things we have to introduce:

getRows(params)

params.successCallBack()

parms.api.setServerSideDataSource()

The getRows(params) function is called when the grid requires data. Rows fetched from the server are supplied to the grid via params.successCallback() . The params.api.setServerSideDataSource() registers the datasource to the grid.

Getting the Data

In this getGridData function, we first make a GET request to the location in the public folder where the row data is located. Then, we use the returned data array to supply the grid with rows using params.successCallback() . Finally, we register the datasource using params.api.setServerSideDataSource() .

Conclusion

We’ve now covered two different strategies for loading row data into the grid. With the client-side implementation, the application loads the full set of data into the client and then passes it in its entirety to the grid. With the server-side implementation, the data is kept on the server and loaded into the grid in parts. What it comes down to is deciding which implementation is best for your application’s needs. For more information on ag-Grid and all it’s features, check out the official documentation.