Setup
html
<ag-grid-angular
class="ag-theme-alpine"
[gridOptions]="gridOptions"
[rowData]="rowData$ | async"
[getRowNodeId]="getRowId"
[pagination]="true"
[paginationAutoPageSize]="true">
</ag-grid-angular>
ts
config
defaultColDef = {
// make every column use 'text' filter by default
filter: 'agSetColumnFilter',
sortable: true,
rowSelection: "single",
};
columnDefs: ColDef[] = [
{ field: 'idTask', width: 320 },
{ field: 'status', width: 90 },
{ field: 'stammNr', width: 115 },
{ field: 'fassungsNr', width: 130 },
{ field: 'aktion', width: 95 },
{ field: 'user', width: 300, floatingFilter: true },
{ field: 'workflow', width: 130 },
{ field: 'erstellt', width: 240, initialSort: "desc" },
{ field: 'retry', width: 240 }
];
gridOptions = {
defaultColDef: {
sortable: true,
filter: true,
},
columnDefs: this.columnDefs,
animateRows: true,
};
rowData
this.rowData$ = this.store.select(store => store.doctrans.entities);
getRowId
getRowId = (params) => {
return params.idTask;
}
What works
The table works fine. The rows get updated as the data in ngrx gets updated.
Problem
When i use a filter it gets resetted as soon as the data is updated. Seems the whole grid gets rendered when the rowData$ Observable changes
Question
What to change to the filter options stay?
Update 1
As statet here: Column filter lost when updating row data in ag-grid the gridOption "deltaRowDataMode: true" should be used. And it works. But in the comment it says it deprecated and https://www.ag-grid.com/javascript-data-grid/immutable-data/ should be used. But this seems to be deprecated too.
Solution
Solved my problem.
As stated here: https://www.ag-grid.com/javascript-data-grid/data-update-row-data/, if you provide a row-id only the rows who changed should be updated. This didnt work for me and now i know why. Here: https://ag-grid.com/changelog/?fixVersion=27.1.0 if you search for immutable you find "27.1.0 Replace getRowNodeId() with getRowId() to make a) immutable data the default and b) provide more info in params". I installed my ag-grid-community bevor 15.03 (version 27.1) and so getRowId() didnt work.
I updated to version 27.1.0 and everything works now. I just need to set the rowId with:
gridOptions = {
// other options
getRowId: (params) => params.data.idTask,
};
and the grid just updated the rows which have changed.