primereact datatable virtualscroller scroll to index

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

26 Jun 2022, 12:31

there are functions
scrollTo
scrollToIndex
scrollInView
in the Virtualscroller Module

my datatable (render) call looks as follows:

Code: Select all

 return (
    <div>
      <div className="card" ref={domRef}>
        <DataTable
          //       ref={(el) => tableRef = el}
          ref={tableRef}
          value={tableData}
          onSort={sortMe}
          onReset={resetMe}
          scrollable
          scrollHeight="400px"
          virtualScrollerOptions={{
            lazy: true,
            onLazyLoad: loadDataLazy,
            itemSize: 46,
            delay: 100,
            showLoader: true,
            loading: lazyLoading,
            loadingTemplate,
          }}
        >
Now I try to get:

Code: Select all

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

If I try:

Code: Select all

let dom_scroll = domRef.current.querySelector(".p-virtualscroller");
 dom_scroll.scrollTo(0,0);
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.
.

Melloware
Posts: 3716
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: https://developer.mozilla.org/en-US/doc ... 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? https://github.com/primefaces/primereact/issues
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

michael1112
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.

michael1112
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.


<DataTable
ref={tableRef}
...
</DataTable>

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

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests