TanStackT
TanStack•4y ago•
3 replies
slow-yellow

Table Infinite Scroll w useVirtual not returning all rows

Hey friends. I seem to be having a weird issue where my table isn't displaying all rows. This is work code on a work laptop, so I'll share what little I can, please forgive me. Most of what we have follows the example for using Tanstack Table with Query's useInfiniteQuery and Virtual: https://tanstack.com/table/v8/docs/examples/react/virtualized-infinite-scrolling

We're getting 31 items from the API.

  const flatData = React.useMemo(
    () => data?.pages?.flatMap(page => page.data) ?? [],
    [data]
  )
  const totalDBRowCount = data?.pages?.[0]?.meta?.totalRowCount ?? 0
  const totalFetched = flatData.length

totalFetched is 31.

const { rows } = table.getRowModel()
rows.length is 31.

const rowVirtualizer = useVirtual({
  parentRef: tableContainerRef,
  size: rows.length,
  overscan: 10,
})
const { virtualItems: virtualRows, totalSize } = rowVirtualizer

virtualRows.length is 18

I'm notoriously bad at reading docs, so this is probably mentioned somewhere, but is there a reason why some rows disappear when using useVirtual?
React Table Virtualized Infinite Scrolling Example | TanStack Table...
An example showing how to implement Virtualized Infinite Scrolling in React Table
React Table Virtualized Infinite Scrolling Example | TanStack Table...
Was this page helpful?