Datatable VirtualScroll jump to the top after lazy loading

UI Components for React
Post Reply
dallalgaham
Posts: 1
Joined: 24 Jan 2022, 15:36

06 Jul 2022, 15:22

Hello,

I am using a virtual scroller inside my datatable, and calling an API endpoint when I reach the end of the list to get more items, the only problem is when my list of items is updated I am sent to top of the list.

here is my code:

Code: Select all

 <DataTable
        value={families}
        selectionMode={loading ? undefined : 'single'}
        selection={selected}
        onSelectionChange={(e) => { setselected(e.value); setvisible(true); }}
        size="small"
        className="border border-gray-200"
        rowHover
        responsiveLayout="scroll"
        emptyMessage={<div className="flex items-center justify-center font-medium">{emptyMsg}</div>}
        scrollable
        scrollHeight={`${height}px`}
        virtualScrollerOptions={{
          itemSize: 80,
          showLoader: true,
          loading: loading!,
          loadingTemplate,
          orientation: 'vertical',
          lazy: true,
          onLazyLoad: ({ first, last }) => {
            console.log({ first, last });
            if (hasNext // there's still another page at least
              && Number(last) === families.length // last index is the last element of this list
              && !loading // there's no page loading
            ) {
              onLoadMore();
            }
          }
        }}
      >
        /* My columns */
      </DataTable>
Any idea about this weird behaviour ?

Melloware
Posts: 3247
Joined: 22 Apr 2013, 15:48

08 Jul 2022, 16:42

What version of PrimeReact? have you tried the latest 8.2.0 ?
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 11.0.3 / PF Extensions 11.0.3
PrimeReact 8.0.0

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest