Use with RxJS

It is possible to use RxJS with ag-Grid - with the rich API and numerous Data Update Options the two can interoperate very well.

There are many ways you can use RxJS with ag-Grid - below we describe two ways to do updates: One that processes updates rows alone, and another that supplies the full Row DataSet but with altered rows within it.

Option 1 - Providing Updated Data Alone

In this example we provide the initial data via a subscription, then provide updates via another.

The second subscription only provides changed rows - it does not provide the full data set once again.

To efficiently process this data we need the following:

- A unique key per row - we do this by making use of the getRowNodeId callback

const gridOptions = { getRowNodeId: function (data) { // the code is unique, so perfect for the id return data.code; } ...rest of the gridOptions

A manner of letting ag-Grid know the type of update we're doing - for this we make use of the Transaction method

updates$.subscribe((updates) => { gridOptions.api.updateRowData({update: updates} }));

With these two pieces of code we can supply the updates to ag-Grid and the grid will only re-render the changes rows, resulting in much improved performance.

Option 2 - Providing Full Row Data With Updates Within

In this example we provide the initial data via a subscription, then provide updates via another, as above.

This time however the second subscription the full row data, with altered row data within the full data set.

To efficiently process this data we need two things:

  • A unique key per row - we do this by making use of the getRowNodeId callback
  • A manner of letting ag-Grid know that we're supplying the full data again, but with altered data within - for this we make use of the deltaRowDataMode method
const gridOptions = { getRowNodeId: function (data) { // the code is unique, so perfect for the id return data.code; }, deltaRowDataMode:true ...rest of the gridOptions

With these configuration we can supply the updates to ag-Grid and the grid will only re-render the changes rows, resulting in much improved performance.