Reinitialize gridviewscroll when table size increase

[Dgs-asohail4]

I want to reinit the gridviewscroll on pagination or number of rows per page increases. Initially the grid has only 10 rows per page on pagination or on page size dropdown change, i make http request to fetch more rows. GridViewScroll doesn't apply on the new rows added to the table (ss attached). Is there any way to reinitialize the after table data change? or there is some other way to make this work with pagination. Am i doing something wrong?

[twlikol]

Are you call undo method before fetch data?

[Dgs-asohail4]

ApplyGridViewScroll() {
    this.gridViewScroll.undo();
    this.gridViewScroll = new GridViewScroll(this.gridViewScrollOptions);
  }

this is what i did AFTER data change

[twlikol]

Try call undo method first, then fetch data, then apply gridviewscroll

[Dgs-asohail4]

onPageChange(event: any) {
    this.gridViewScroll.undo();
    ... // changing row data here
    this.gridViewScroll = new GridViewScroll(this.gridViewScrollOptions);
  }

It is undoing the gridviewscroll but not being able to reapply it.

[twlikol]

onPageChange(event: any) {
    this.gridViewScroll.undo();
    ... // changing row data here
    this.gridViewScroll = new GridViewScroll(this.gridViewScrollOptions);
    this.gridViewScroll.enhance();
  }

[Dgs-asohail4]

better ... but it's messing up the data on second application and throwing error "Cannot read property 'className' of null" on third application

[twlikol]

I think you can just remove the data (Table) form dom, then re-create, then apply gridviewscroll.

[Dgs-asohail4]

an example perhaps on stackbiltz? i am using and external library for creating table (to get pagination sorting out of box) and i am using typescript version of the library on angular. I should've told you this before but little help with example would be appreciating.