PrimeNg p-table scrollTo() method doesnt work

Question

I'm trying to make the p-table scrollbar scroll to a certain position. It doesn't seem to do anything at all. Here's my code:

ngAfterViewInit(): void {
    this.table.scrollTo({'top': 200})
}

"this.table" is

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

and in the template file it is defined this way:

<p-table #dt
   [value]="items"
   class="ui-rtl"
   [styleClass]="styleClass"
   [scrollable]="true"
   [columns]="columns"
   scrollHeight="790px"
   dir="rtl">

Ignore to hard coded numbers, I'm only trying to figure out how to make it work for now.

Does anyone know how to use it? The documentation says:

options.top: Specifies the number of pixels along the Y axis

I have tried to pass as argument both {'options.top':200} and {top:200} but nothing happens.

Any help will be highly appreciated!

Thank you

score 0 · Answer 1 · edited Dec 13 '21 at 11:26

0

Try this, this is working for me

const body = this._materialTable.containerViewChild.nativeElement.getElementsByClassName('p-datatable-scrollable-wrapper')[0];
        body?.scrollTo({
            top: 0,
            left: 10,
            behavior: 'smooth'
        });

edited Dec 13 '21 at 11:26

Suraj Rao

29,388
11
94
103

answered Dec 13 '21 at 11:26

mak

14
1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – MD. RAKIB HASAN Dec 13 '21 at 11:51

iKireeti · Answer 2 · 2023-05-18T08:10:19.203

0

I had a similar issue and tried to debug and see if we have any options related bottom scroll to but didn't find any. So making use of scrollTop to set top as table scroll-height which scrolls down to height of table(bottom). This worked for me:

this.table.scrollTop({top: this.table.wrapperViewChild.nativeElement.scrollHeight});

edited May 18 '23 at 08:10

answered May 18 '23 at 08:06

iKireeti

1
1

This does not really answer the question. If you have a different question, you can ask it by clicking [Ask Question](https://stackoverflow.com/questions/ask). To get notified when this question gets new answers, you can [follow this question](https://meta.stackexchange.com/q/345661). Once you have enough [reputation](https://stackoverflow.com/help/whats-reputation), you can also [add a bounty](https://stackoverflow.com/help/privileges/set-bounties) to draw more attention to this question. - [From Review](/review/late-answers/34407633) – Wahlstrommm May 23 '23 at 13:15

PrimeNg p-table scrollTo() method doesnt work

2 Answers2