If you’ve ever worked with Ant Design’s Table component, you probably love how powerful it is — sorting, pagination, filtering, you name it.
But one thing it doesn’t provide out of the box - Infinite scrolling!
The Problem
When you’re dealing with thousands of rows, the usual approaches are:
Pagination: Works, but breaks the smooth “scrolling through data” experience.
Load All Data: Possible for small datasets, but if you try with 1,000+ rows… the table will lag, the DOM will bloat, and your browser will cry.
What we really need is a way to:
Only render what’s visible (virtualization)
Fetch more rows as the user scrolls (infinite loading)
Unfortunately, Ant Design only supports virtualization and doesn’t support infinite scrolling out of the box.
The Solution
I built a lightweight useVirtualInfiniteScroll hook that makes it super easy to add infinite scroll to scrollable list with virtual scrollbars.
Example Code (with Ant Design Table)
import React, { useState, useEffect } from "react";
import { Table } from "antd";
import { fetchData } from "../helpers/fetchData";
import { COLUMNS } from "../helpers/constants";
import useVirtualInfiniteScroll from "react-virtual-infinite-scroll-hook";
const AntdTableVirtualWithInfiniteScroll: React.FC = () => {
const [data, setData] = useState<any[]>([]);
const [page, setPage] = useState(1);
const [loading, setLoading] = useState(false);
const [hasMore, setHasMore] = useState(true);
const loadMore = async () => {
if (loading || !hasMore) return;
setLoading(true);
const newData = await fetchData(page, 10);
setData((prev) => [...prev, ...newData]);
setHasMore(newData.length > 0);
setPage((p) => p + 1);
setLoading(false);
};
useVirtualInfiniteScroll({
onLoadMore: loadMore,
hasMore,
loading,
scrollbarSelector: ".ant-table-tbody-virtual-scrollbar-vertical",
enabled: true,
});
useEffect(() => {
loadMore();
}, []);
return (
<div style={{ maxWidth: 700 }}>
<Table
bordered
columns={COLUMNS}
loading={loading}
dataSource={data}
pagination={false}
virtual={true}
scroll={{ y: 450 }}
/>
</div>
);
};
export default AntdTableVirtualWithInfiniteScroll;
Why This Works
The hook only passes the visible slice of data to the table.
As you scroll near the bottom, it automatically asks for more rows.
The DOM never gets overloaded, so scrolling stays smooth even with huge datasets.
Final Thoughts
Ant Design Tables are fantastic for enterprise apps, but when it comes to scroll-heavy datasets, we need to go beyond pagination and use infinite scrolling with virtualization.
With useVirtualInfiniteScroll hook, you can supercharge your Ant Design Table with infinite scrolling and virtualization in just a few lines of code. The hook is available as a npm package - https://www.npmjs.com/package/react-virtual-infinite-scroll-hook
Give it a try in your next project and let me know how it works for you! 🚀
