AgGridReact not re-rendering on data change

Question

I am passing rowData and columnDefs as props. Grid is loading properly. But, when the data is changed, Grid is not re-rendering. It is coming to the render of the parent component, and passed to AgGridReact. But, still not getting re-rendered.

Since it is a complete react application, I have added code in https://github.com/jintoppy/ag-grid-upgrade

Main code is given below.

<AgGridReact
        // properties
         columnDefs={this.state.columnDefs}
         rowData={this.props.data}

         // events
         onGridReady={this.onGridReady}>
</AgGridReact>

Dorai Raju Dorai Raju · Accepted Answer · 2018-01-03T16:23:15

Not sure whether you got soltion for this or not. I have a solution for this.

Even I had this issue before when I pass rosData through props to AgGridReact, then I tried updating rows by using setRowData(rows) API function.

Once your grid is ready your gridOptions will have api as well so that you can access Ag-grid API by calling gridOptions.api or you can create this.api in your onGridReady method like below.

onGridReady( params ) {
    const rowData = this.props.rows;

    this.api = params.api;

    if ( rowData.length > 0 && this.api ) {
      this.api.setRowData( rowData );
    }
}

and you need to call samething in your componentWillReceiveProps

componentWillReceiveProps( nextProps ) {
    if ( !isEqual( this.props.rows, nextProps.rows ) && this.api ) {
        this.api.setRowData( nextProps.rows );
    }
}

then you can remove rowData prop from component

<AgGridReact
    // properties
    columnDefs={this.state.columnDefs}

     // events
     onGridReady={this.onGridReady}>
</AgGridReact>

Hope this helps ...

AgGridReact not re-rendering on data change

1 Answers