0

I’m working on a project where I need to implement infinite scrolling in an Ant Design Table component for displaying large datasets. I’m fetching the data from a Laravel backend, and I want to implement lazy loading to avoid fetching all the data at once. However, I’m having trouble getting the table to load more data as the user scrolls down.

My Setup: Frontend: React, Ant Design Table Backend: Laravel Table Features: Displaying data in an Ant Design Table, using infinite scroll to fetch data dynamically as the user scrolls. I’ve been able to successfully use the scroll prop on the Ant Design Table component to enable vertical scrolling, but I can’t seem to trigger the data load when the user reaches the bottom of the table.

Questions:

  1. How can I properly trigger the data fetch when the user scrolls to the bottom of the table?
  2. Is there any other configuration I need to set up for the scroll event to work as expected in Ant Design’s Table?
  3. Should I use window.scroll instead of onScroll to detect the scroll event, or is there a better way to implement infinite scrolling with Ant Design Table?
Improve this question

1 Answer 1

Reset to default
1

You can use 'react-infinite-scroll-component' to achieve this. You can refers this AntD List component example provided by them here: https://ant.design/components/list#list-demo-infinite-load. Try replacing the List component with Table and it should work.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

I want Antd design Table, no List. Your sample is List. Can I implement it on antd Table?
Yes, the code for Infinite scroll can be applied to the table. Simply replace the List with Table and make necessary changes in the scroll component. It should work.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.