Building a React Datagrid with Redux and ag-Grid

ag-Grid is The Best Grid in the world! React is one of the best frameworks in the world! Redux and React were made for each other. This blog goes through how to use all three of these frameworks together for a brilliant developer experience!

A live working example of ag-Grid with React and Redux can be found here.

Introduction

React is a great framework offering a powerful but simple way to write your applications. Redux offers a great way to decouple your Component state while making it easier to keep your data immutable.

ag-Grid is not written in React — this makes ag-Grid both powerful and flexible in that we can support all major frameworks. ag-Grid can also work with immutable stores, so although ag-Grid doesn’t use Redux internally, it is fully able to work with your React / Redux application seamlessly. Let me show you how…

Our Application

The completed code for this blog can be found here .

In order to focus on the concepts being discussed our application is deliberately simple.

We will have a simple Service that will simulate a backend service providing updates to the grid, and a simple Grid that will display the resulting data. In between the two we'll have a Redux store to act as a bridge between Service and Grid .

We’ll start off with our ag-Grid React Seed project to get us up and running with a simple skeleton application:

If we now run npm start we'll be presented with a simple Grid:

With this in place, let’s install the Redux dependencies:

npm i redux react-redux

Our application is going to a simple Stock Ticker application — we’ll display 3 Stocks and their corresponding live price.

The Service

The Service

First let’s start with our GridDataService :

The service manages the data — it has the current data and makes it available via Redux . In this example we have 3 rows of data (one each for Apple, Google and Microsoft) which the service periodically updates to simulate live price changes.

The service is provided with the Redux stores dispatch (see later) which is uses to publish the data changes.

Bootstrapping The Application

We’ll create the Redux Store and the GridDataService class in our entry file src/index.js :

Here we do a number of bootstrap tasks:

GridDataService
gridDataReducer
GridDataService

The Application

The Application

We’ll modify the seed SimpleGridExample in the following ways:

createRowData
createColumnDefs
this.props.rowData

The GridDataService now looks like this:

With a fairly small number of changes to the seed project we now have a React application using both Redux and ag-Grid — fantastic!

With this running you’ll see the prices updating — this looks great. There is one catch here though; the entire grid row data will be re-rendered if we leave the application like this, even though only a single row will be updated at a time.

The Secret Sauce

Secret Sauce

By making use of the new deltaRowDataMode in ag-Grid , we can ensure that we only re-render the data that has actually changed.

To do this all we need to do is specify that we want to make use of deltaRowDataMode , and provide a unique key to ag-Grid so that it can determine what has changed, if anything. We do this by providing the getRowNodeId callback. In our case, each row can be uniquely identified by it's symbol :

<AgGridReact
    columnDefs={this.state.columnDefs}
    rowData={this.props.rowData}
    deltaRowDataMode
    getRowNodeId={(data) => data.symbol}
    onGridReady={this.onGridReady}>
</AgGridReact>

Visually, the application appears no different with these changes, but performance has dramatically been improved. This would be evident in a larger application, especially one with a large amount of row data.