genetic-orange

v3 Virtual List in Tanstack Table v8

Having issues where I am getting a large amount of bottom padding when scrolling when there are more items. Used this as a reference: https://github.com/Rayologist/next-template/blob/8b934ff38d69afa488fc7411c24c56933e01d072/src/components/Table/index.tsx#L173

    const tableContainerRef = useRef<HTMLDivElement>(null)
    const virtualizer = useVirtualizer({
        count: rows.length,
        getScrollElement: () => tableContainerRef.current,
        estimateSize: () => 50,
        // overscan: 100,
    })

    const { getTotalSize, getVirtualItems } = virtualizer
    const virtualRows = getVirtualItems()
    const totalSize = getTotalSize()

    const paddingTop = virtualRows.length > 0 ? virtualRows?.[0]?.start || 0 : 0
    const paddingBottom =
        virtualRows.length > 0
            ? totalSize - (virtualRows?.[virtualRows.length - 1]?.end || 0)
            : 0

    const tableContainerRef = useRef<HTMLDivElement>(null)
    const virtualizer = useVirtualizer({
        count: rows.length,
        getScrollElement: () => tableContainerRef.current,
        estimateSize: () => 50,
        // overscan: 100,
    })

    const { getTotalSize, getVirtualItems } = virtualizer
    const virtualRows = getVirtualItems()
    const totalSize = getTotalSize()

    const paddingTop = virtualRows.length > 0 ? virtualRows?.[0]?.start || 0 : 0
    const paddingBottom =
        virtualRows.length > 0
            ? totalSize - (virtualRows?.[virtualRows.length - 1]?.end || 0)
            : 0

    return (
        <ScrollArea ref={tableContainerRef} className='border'>
            <Table>
                <TH />
                <TB />
            </Table>
            <div
                data-testid='!!data-table-pagination'
                className='sticky bottom-0 z-10 py-2 bg-white '
            >
                <DataTablePagination table={table} />
            </div>
        </ScrollArea>
    )

    return (
        <ScrollArea ref={tableContainerRef} className='border'>
            <Table>
                <TH />
                <TB />
            </Table>
            <div
                data-testid='!!data-table-pagination'
                className='sticky bottom-0 z-10 py-2 bg-white '
            >
                <DataTablePagination table={table} />
            </div>
        </ScrollArea>
    )

GitHub

next-template/src/components/Table/index.tsx at 8b934ff38d69afa488f...

NextJS template: Typescript, Mantine, Zod, React Hook Form, @tanstack/react-table, and @tanstack/react-virtual - Rayologist/next-template

6 Replies

genetic-orangeOP•3y ago

I notice if i set overscan to something like 300, then i don't have the padding issue anymore. But not sure if this is the right way of doing this

    const virtualizer = useVirtualizer({
        count: rows.length,
        getScrollElement: () => tableContainerRef.current,
        estimateSize: () => 50,
        overscan: 300,
    })

    const virtualizer = useVirtualizer({
        count: rows.length,
        getScrollElement: () => tableContainerRef.current,
        estimateSize: () => 50,
        overscan: 300,
    })

inland-turquoise•3y ago

Yeah, should work with default overscan, can you create a codesandbox example, hard to say what is happen here also add colSpan on spacers rows

const [paddingTop, paddingBottom] =
  items.length > 0
    ? [
        notUndefined(items[0]).start - virtualizer.options.scrollMargin,
        virtualizer.getTotalSize() - notUndefined(items[items.length - 1]).end,
      ]
    : [0, 0]

// 
<tbody className={className}>
  {paddingTop > 0 && (
    <tr>
      <td colSpan={colSpan} style={{ height: paddingTop }} />
    </tr>
  )}
  // content here 
  {paddingBottom > 0 && (
    <tr>
      <td colSpan={colSpan} style={{ height: paddingBottom }} />
    </tr>
  )}
</tbody>

const [paddingTop, paddingBottom] =
  items.length > 0
    ? [
        notUndefined(items[0]).start - virtualizer.options.scrollMargin,
        virtualizer.getTotalSize() - notUndefined(items[items.length - 1]).end,
      ]
    : [0, 0]

// 
<tbody className={className}>
  {paddingTop > 0 && (
    <tr>
      <td colSpan={colSpan} style={{ height: paddingTop }} />
    </tr>
  )}
  // content here 
  {paddingBottom > 0 && (
    <tr>
      <td colSpan={colSpan} style={{ height: paddingBottom }} />
    </tr>
  )}
</tbody>

genetic-orangeOP•3y ago

thanks - tried adding the colSpan but not change in behavior. Tried setting up a codesandbox and its not playing nice with the shadcn components so will let you know when i get it set up... i will have to come back to it another time

genetic-orangeOP•3y ago

https://codesandbox.io/p/sandbox/tanstack-table-v8-tanstack-virtual-v3-ch29w2?file=/src/table.tsx:59,7 Ok i think this should show it better. Wasn't able to exactly reproduce the issues exactly the same, but you can see when you toggle pagination there's some padding on the bottom and it doesn't render the # of rows 100% correct. Also I probably didn't do it right but was trying to make the THead and Pagination component sticky at the top/bottom

Tanstack Table v8 / Tanstack Virtual v3

inland-turquoise•3y ago

@DiamondDragon first issue noticed that you had wrong estimateSize, that was different from what was in rendered in browser
https://codesandbox.io/p/sandbox/tanstack-table-v8-tanstack-virtual-v3-forked-966nt4?file=/src/App.tsx:112,6 fyi there is two options to use virtualizer, fixed like you had there rows will not change size and you know up front them, second is dynamic using measureElement + data-index btw those React.memo inside render looks bit fishy

Tanstack Table v8 / Tanstack Virtual v3 (forked)

Gaming

Programming

v3 Virtual List in Tanstack Table v8

Did you find this page helpful?