Data table scroll position not resetting after external search/sort

[winterspan]

We are running into an issue using the data table with external, server-side sorting / searching and lazy/virtual scrolling,

Currently, the table will maintain it's scroll position despite the array being passed to the value prop being replaced with a new set of records (with the records being retrieved, stored in redux and passed to the table.)

(This also creates a secondary problem where the table will call OnVirtualScroll with no user interaction if the user had been scrolled to the very bottom of the list when new records were received. But this should naturally be resolved if we can get the scroll position to reset.)

When a user sorts or performs a search, it's expected that the scroll position returns to the top of the table.

Is this current behavior expected? Are we missing something? is there a mechanism (aside from just replacing the array of records passed to the value prop which doesn't do it) to notify the table that we want the scroll position reset to 0?

[semir]

Hello,

I had the exact same issue in Angular but I guess the implementation does not differ a lot.

I've resolved it by manual scrolling to the top:

Code: Select all

 @ViewChild('table', { static: false }) table: Table;

Code: Select all

const body = this.table.containerViewChild.nativeElement.getElementsByClassName("ui-table-scrollable-body")[0];
body.scrollTop = 0;

Please note that this will trigger another lazyLoad event. To prevent this I've added a second parameter to the onLazyLoad event handler like this:

Code: Select all

(onLazyLoad)="loadDataOnScroll($event, true)"

And inside of the function there is a check:

Code: Select all

loadDataOnScroll(event: any, realEvent: boolean) {
   if (realEvent) {
      //
   }

This realEvent variable is going to be undefined when we manually scroll to the top so we can prevent data loading twice by doing like this.

I hope this helps.