# 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`](https://www.npmjs.com/package/react-virtual-infinite-scroll-hook) hook that makes it super easy to add **infinite scroll** to scrollable list with virtual scrollbars.

## Example Code (with Ant Design Table)

```typescript
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`](https://www.npmjs.com/package/react-virtual-infinite-scroll-hook) hook in action

<iframe src="https://codesandbox.io/embed/qf2q8l?view=preview&hidenavigation=1" style="width:100%;height:700px;border:0;border-radius:4px;overflow:hidden" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>

## 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`](https://www.npmjs.com/package/react-virtual-infinite-scroll-hook) 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](https://www.npmjs.com/package/react-virtual-infinite-scroll-hook?utm_source=blog.sudipkundu.com)

Give it a try in your next project and let me know how it works for you! 🚀