Refresh ag-Grid after a data change with React, Angular, Vue and JS

Any web application needs to perform CRUD operations on data and refresh its state after that. Ag-Grid allows your users to easily manipulate data and immediately display any changes in it coming in from API or a server-side update.

In this blogpost, you'll get live samples showing you how to refresh ag-Grid after a data change when all data is stored on the client using the client-side row model. If you have fewer than 20,000 rows, we recommend using the client-side row model due to many built-in features it offers. ag-Grid also supports binding to server-side data for larger data sources - see the ag-Grid data source comparison here.  

This sample using client-side data is implemented in all the popular web frameworks - React, Angular, VueJS. Please see the sample in action below:

Live Demos

See the live examples with code here:

• React
• Angular
• Vue
• Plain JavaScript

We will cover two ways to implement this, one being a general approach which can be applied regardless of the "flavour" of the grid being used. The other involves changing a bound row data property, which may sound fancy but is super easy, as we'll soon see...

Contents

• Immutable Data
• Binding Row Data in React
• Binding Row Data in Angular
• Binding Row Data in Vue
• Binding Row Data in Plain JavaScript
• What's Next

Immutable Data

When you need to frequently update row data in ag-Grid, using the immutable data grid option is especially valuable. When immutable data is set, the grid can automatically work out which rows need to be updated, replaced, deleted or added when new row data is provided, rather than just replacing all of the row data and redrawing the grid completely.

This is particularly handy when the default state of the grid changes often, for example as a result of grouping or filtering. If we were to update row data without using the immutable data grid option, the grid would add the data but revert to its default state, with no filtering applied or expanded group nodes.

For this approach to work, we need to set unique IDs for all of our rows. This is done using the getRowNodeId grid callback, which is called for each row and lets us return a unique ID value for that row.

This is all that's needed to use immutable data to simplify the row data update. For additional details on how to use immutable data, please see our documentation.

Binding Row Data in React

In this section we'll be walking through an example showing how to bind the grid row data when using React.

We update the row data in the grid using the immutable data grid option and by making changes to our rowData state variable in our methods.

The code snippet below shows how to add a new row and update the grid to display it. Please see the relevant code in the addRowData method, the rowData state variable and the getRowNodeId callback below:

this.state = {
      rowData: [],
      ...rest of the state
    };
  }

  getRowNodeId = data => {
    return data.id;
  };

  addRowData = () => {
    let newRowData = this.state.rowData.slice();
    let newId =
      this.state.rowData.length === 0
        ? 0
        : this.state.rowData[this.state.rowData.length - 1].id + 1;
    let newRow = { athlete: 'new athlete', id: newId };
    newRowData.push(newRow);
    this.setState({ rowData: newRowData });
  };

The addRowData method is the key here. We first create a copy of our existing rowData variable, then build our new row. We then add the new row to our rowData copy and finally, we set the rowData state variable to reference the updated row data object.

Please see a GIF showing adding a new row below:

We can abstract this pattern and use it to apply the delete and update methods too. The pattern is as follows: get a copy of the current row data, make the changes to the copy and bind the copy to the grid.

The full React example can be found embedded below - please feel free to explore and play with it:

 private rowData: [];

 constructor(private http: HttpClient) {
    this.getRowNodeId = (params) =>{
      return params.id
    }
  }

 removeRowData = () =>{
    let focusedNode = this.gridApi.getSelectedRows()[0]
    let newRowData = this.rowData.filter(row=>{
      return row !== focusedNode;
    })
    this.rowData = newRowData
  }

 resetRowData() {
      this.rowData = this.backupRowData;
    },
    
 onGridReady() {
      const httpRequest = new XMLHttpRequest();
       onGridReady continues...
   		
       this.rowData = data;
       this.backupRowData = data;
      };
		onGridReady continues...
    }

var gridOptions = {

  getRowNodeId: data => {
    return data.id;
  },
  immutableData: true,
...
};

const updateEvenRowData = () => {
  let newRowData = rowData.map((row) => {
    if (row.id % 2 === 0) {
      return { ...row, athlete: "Even Row" };
    }
    return row;
  });
  rowData = newRowData;
  gridOptions.api.setRowData(rowData);
};