3

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?

rvrsev
  • 166
  • 1
  • 10

2 Answers2

0

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
KennySchl
  • 51
  • 2
  • Thanks for your reply. I tried to use the onPage and onFilter callbacks from the docs, but an update in indexedDB only triggers the onFilter callback. Also, even if `first` is still set to another page (e.g. 40) after the update, the table would still reset to the first page. – rvrsev Jan 29 '23 at 23:15
0

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.

rvrsev
  • 166
  • 1
  • 10