Datatable VirtualScroll jump to the top after lazy loading

[dallalgaham]

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]

What version of PrimeReact? have you tried the latest 8.2.0 ?