Ag-grid-react Not Refresh properly

Question

I am new to Ag-grid-react. Currently, there is a simple react table in the App that works fine but it doesn't have the powerful functionality like Ag-grid. I am thinking of switching to Ag-grid-react.

However, during the implementation. I found that when I update props from my outside data source into Ag-grid. Ag-grid-react will automatically re-render the whole table and forget the previous settings.

I Use Meteor 1.4 as the platform, React 15.4.2 as framework.

Questions: this.props.data is my outside data source that I am going to display. It works well for first rendering but when I change a cell value from outside. This props change. And it will re-render the table. How do I avoid automatically re-render and only change the cell value that I have changed?

I see in the document there is API to call and make the change of row data in Ag-grid. If I use API, then every time my data changed will need to do a prev props and current props check in the data source and use API to send the change to Ag-grid. Is it supposed that React will do check automatically and re-render only the children component that I have changed?

Let me know if any solution to solve this problem.

Partial Code:

class MasterDetailExample extends Component {
    constructor(props) {
        super(props);
        this.state = {
            rowData: this.props.data,
            columnDefs: this.createColumnDefs(),
        };
        this.onGridReady = this.onGridReady.bind(this);
    }

    onGridReady(params) {
        this.gridApi = params.api;
        this.columnApi = params.columnApi;
    }

...//Some code for createColumnDefs()

    isFullWidthCell(rowNode) {
        return rowNode.level === 1;
    }

    getRowHeight(params) {
        let rowIsDetailRow = params.node.level === 1;
        return rowIsDetailRow ? 200 : 25;
    }

    getNodeChildDetails(record) {
        if (record.callRecords) {
            return {
                group: true,
                key: record.name,
                children: [record.callRecords],
            };
        } else {
            return null;
        }
    }

    render() {
        return (
            <div style={{height: 1000 , width: "100%" }}
                 className="ag-fresh">
                <AgGridReact
                    columnDefs={this.state.columnDefs}
                    rowData={this.state.rowData}

                    isFullWidthCell={this.isFullWidthCell}
                    getRowHeight={this.getRowHeight}
                    getNodeChildDetails={this.getNodeChildDetails}
                    fullWidthCellRendererFramework={DetailPanelComponent}

                    enableSorting
                    enableColResize
                    suppressMenuFilterPanel

                    onGridReady={this.onGridReady}>
                </AgGridReact>
            </div>
        );
    }
};

If the props that you pass to AgGridReact change, the whole component will re-render, there is no way around it. Unless you implement cells that get their data individually as their own props, it will always be the case with React. Apart from that, my 2 cents: Ag-grid has a React wrapper that translates the API, but to my experience it does not integrate well with React(/Redux), although effort is being made: ag-grid.com/ag-grid-react-datagrid. React-virtualized is an interesting alternative (I am using Ag-grid and I will probably change for that). — JulienD
Actually, reading carefully the link I just copied, I noticed that there is a new deltaRowDataMode that may answer your question. Last paragraph of the page. — JulienD

Melounek Melounek · Accepted Answer · 2019-03-29T09:31:17

Like @JulienD already mentioned, the deltaRowDataMode is the key there.

set deltaRowDataMode={true}
instead param rowData use setRowData() inside onGridReady callback and in componentDidUpdate
and don't forget on getRowNodeId={data => data.id}

This will do the comparing and updating exact rows for you.

docs: https://www.ag-grid.com/javascript-grid-data-update/#delta-row-data

Ag-grid-react Not Refresh properly

1 Answers