Prevent Ag-Grid from Re-Rendering when Data (NgRx Store) changes

Question

I am using Ag-grid and a NgRx Store as its Data Source. The Data is handled in my Parent Component and passed via observable (tableData) to my table component.

<div class="table-wrapper" *ngIf=tableData>
 <ag-grid-angular
    class="ag-theme-balham"
    [columnDefs]="tableData.columnDefs"
    [rowData]="tableData.rowData" 
    [defaultColDef]="defaultColDef"
    [gridOptions]="gridOptions"
    (gridReady)="onGridReady($event)"
    (rowDataChanged)="onRowDataChanged($event)"
    (cellClicked)="cellClicked($)"
    >
 </ag-grid-angular>
</div>

The ag-grid columns contain checkboxes. When the user clicks on a cell an Event is emittet which changes the current State of the App, the clicked checkbox and the whole tableData. As a result the UI reflects those changes as intended.

 @Input tableData;
 @Output cellValueChanged = new EventEmitter<>();

 constructor() { }

 onGridReady(params: any) {
  this.gridApi = params.api;
  this.gridColumnApi = params.columnApi;

  setTimeout(() => {
   this.gridApi.sizeColumnsToFit();
   }, 1000);
 }

 cellClicked(event) {
  ...
  this.cellValueChanged.emit({ data });
 }

The problem with that solution is that the whole table data gets reloaded. This causes the table to resize to autoColumnWidth and also, if I had been scrolling down the table, a reset of the scrollbar to the top state.

Using

cellClicked(event) {
  ...
  this.gridApi.updateRowData({ update: data });
}

works like a charm, but only if I do NOT update the app state. The problem is that I want and need to update the app state everytime the user performs an action on the table to keep the frontend- and store-data consistent.

How do I prevent the table from rerendering after updating the AppState?

Answer 1

Thanks to your help I found the solution.

First step with NGRX or RxJS is to use deltaRowMode.

Second issue with my code was that I am creating the columnRefs dynamically. When I click on a cell not only the rowData but also the columnRefs would be recalculated. This would lead to the reset of the grid.

Thanks for your help! I learned alot