primereact datatable virtualscroller scroll to index

UI Components for React
Post Reply
Posts: 3
Joined: 26 Jun 2022, 12:04

26 Jun 2022, 12:31

there are functions
in the Virtualscroller Module

my datatable (render) call looks as follows:

Code: Select all

 return (
      <div className="card" ref={domRef}>
          //       ref={(el) => tableRef = el}
            lazy: true,
            onLazyLoad: loadDataLazy,
            itemSize: 46,
            delay: 100,
            showLoader: true,
            loading: lazyLoading,
Now I try to get:

Code: Select all

let dom_scroll = domRef.current.querySelector(".p-virtualscroller");
And get the error: scrollToIndex is not a function

If I try:

Code: Select all

let dom_scroll = domRef.current.querySelector(".p-virtualscroller");
It works fine.

In the code (virtualscroller.esm.js Line 6993) it looks like, the scrollToIndex function exists:

Code: Select all

React.useImperativeHandle(ref, function () {
    return {
      scrollTo: scrollTo,
      scrollToIndex: scrollToIndex,
      scrollInView: scrollInView,
      getRenderedRange: getRenderedRange

What I'm doing wrong?
Is there a way, to position the (virtual) table to a specific position (index, oder selected element) ?
I googled for this over one week (primereact datatable scroll to index , move to index, virtualscroller position, get virtualscroller ref and so on), but didnt find any feasible solution.

Posts: 3299
Joined: 22 Apr 2013, 15:48

27 Jun 2022, 14:30

I think your issue is you are using `querySelector` to get a dom Element so your scrollTo call is using the DOM scrollTo: ... t/scrollTo

You need to get a REF to the virtualScroller to call its methods...but it looks like the Datatable is missing a way for you to get to the "virtualScrollerRef" so you can call "dt.current.virtualScrollerRef.scrollTo".

Can you open a ticket on GitHub please?
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile:
PrimeFaces Elite 11.0.3 / PF Extensions 11.0.3
PrimeReact 8.0.0

Posts: 3
Joined: 26 Jun 2022, 12:04

27 Jun 2022, 16:49

Thank you, for the quick Response.
I followed your Instructions and opened a Ticket on github.

Posts: 3
Joined: 26 Jun 2022, 12:04

28 Aug 2022, 12:06

I tried to position the datatable with (the now available) function from virtualscroller(scrollToIndex). But it doesnt work.

All Examples in the Internet uses the "FIRST" property.
The first property works with pagination but not with virtual Scroll.
Is this not possible - position the datatable (in virtual scroll mode) to a specific row (or maybe to a selection)?

Ok, finally I got it.

Parameter "delay" must be 0
if delay is greater then 0 then no rows are displayed. I dont know why.

But with delay = 0 it works fine.


const moveTo = (index) => {
const vScroll = tableRef.current.getVirtualScroller();

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests