How to Implement Infinite Scroll in Ant Design Table

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:

1. Only render what’s visible (virtualization)

2. 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);
  };

  // https://www.npmjs.com/package/react-virtual-infinite-scroll-hook
  // Just import & call the hook anywhere passing the required props
  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} //👈 disable pagination
        virtual={true} // 👈 enable virtual table
        scroll={{ y: 450 }} // 👈 Virtual table container height
      />
    </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.

Let’s check out useVirtualInfiniteScroll hook in action

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! 🚀