v3 Virtual List in Tanstack Table v8

    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>
    )