In Angular, why is my PrimeNG table re-rendering after updating a row's values in indexedDB?

Question

. 。 Answers to this question are eligible for a +50 reputation bounty. rvrsev wants to to this question. 这个问题。

I have a PrimeNG table that takes an array of objects fetched from Dexie as data source. In my component's ngOnInit , I fetch the data from Dexie this way:

    db.myTable.toArray().then( items => {
      this.items = items;
    });

I then bind the returned data to my PrimeNG table:

            <p-table
                #dt
                [value]="items"
                dataKey="id"
                [rows]="10"
                [rowsPerPageOptions]="[5, 10, 50, 100, 200]"
                [paginator]="true"
                selectionMode="single"
                [(selection)]="selectedItem"
                (onRowSelect)="onEditItem()"
                [columns]="defaultCols"
                [resetPageOnSort]="false"
            >

Whenever a user updates a row on this table, I update the component's array as well as the table in Dexie:

    item.propertyToUpdate = newValue;
    let idxToUpdate = this.items.findIndex( x => x.id === item.id );
    this.items[idxToUpdate] = item;
    db.myTable.where({id: item.id}).modify({key: newValue})

This update however causes my table to re-render and clear all filters, sorting, and pagination even though only a single item was updated.

I have tried the following:

• using the table's rowTrackBy property and passing a function that returns each item's unique ID, so that only the changes to the specific row would be detected
• binding the table values to an Observable (using Dexie's liveQuery function)
• binding the table values to a copy of the original array fetched from Dexie, and also updating the copy (in case the re-rendering was triggered by Dexie changing the original array)

I'm still fairly new to indexedDB so I'm not sure what I'm missing, but why is the table re-rendering if I'm only updating a single item? Are there other ways for me to prevent this re-rendering from being triggered?

Answer 1

Pagination, sorting, and filtering be controlled with models using a binding to the specific properties where changes trigger a pagination.

Take a look at properties in the documentation:

first
rows
page
sortField
sortOrder
filters

Answer 2

Finally solved the issue by using ChangeDetectorRef . Just had to call detach() after updating in indexedDB to prevent the view from changing, then I re-attached the detector after the update. I then updated the filters and pagination with their respective values before the update.