T
TanStack•3y ago
flat-fuchsia

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
  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
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
3 Replies
fair-rose
fair-rose•3y ago
the whole point of virtual is to render only part of the rows. so it's returning the visible + overscan rows
flat-fuchsia
flat-fuchsiaOP•3y ago
I get that, but some rows are just never appearing. That can't be a feature, right?
fair-rose
fair-rose•3y ago
could you explain better? they are supposed to appear when you scroll down, the amount of rows in virtualRows should stay more or less the same but the values should change ** also, unfortunately the examples use the old version of virtual

Did you find this page helpful?