Component

Infinite Scroll

Loads the next page when the end of a list comes into view, in place of a pager or a 'load more' button. Wraps any content - a List, a DataTable, a grid of cards.

List

Scroll to the bottom of the panel to pull the next page. The delay here stands in for a request so the loading state is visible.

Pr
Priya Nair opened a PR1h ago
Ke
Kenji Sato left a review2h ago
Ma
Marco Rossi merged a branch3h ago
Ad
Ada Iwu closed an issue4h ago
Pr
Priya Nair opened a PR5h ago
Ke
Kenji Sato left a review6h ago
Ma
Marco Rossi merged a branch7h ago
Ad
Ada Iwu closed an issue8h ago

Uses an IntersectionObserver on a zero-height sentinel, not a scroll handler, so a long list stays smooth
Re-entry is guarded: the observer can fire several times before the new page renders, which would otherwise send duplicate requests
The scroll container must be bounded (max-h here) or there is nothing to scroll
root names that scrolling element. rootMargin (default "200px") is measured against it, so the next page is requested before the end of the panel is reached. Omit root for a list that scrolls with the page

DataTable, instead of pagination

Infinite loading is what replaces the pager, so pageSize is set to the number of rows fetched so far - otherwise DataTable would paginate the rows this has just appended.

Person	Event	When
Priya Nair	opened a PR	1h ago
Kenji Sato	left a review	2h ago
Marco Rossi	merged a branch	3h ago
Ada Iwu	closed an issue	4h ago
Priya Nair	opened a PR	5h ago
Kenji Sato	left a review	6h ago
Marco Rossi	merged a branch	7h ago
Ada Iwu	closed an issue	8h ago

Exhausted

Once hasMore is false the sentinel stops observing and endMessage takes the loader's place.

Priya Nair
Kenji Sato
Marco Rossi

That's everything.

API reference

Prop	Type	Default	Description
hasMore *	boolean	None	Whether another page exists. When false the sentinel stops observing.
onLoadMore *	() => void \| Promise<void>	None	Called when the sentinel scrolls into view and there is more to fetch. Never re-called while a previous call is in flight or once `hasMore` is false.
endMessage	React.ReactNode	None	Rendered under the children once `hasMore` is false.
loader	React.ReactNode	None	Shown while a page is loading. A small `Spinner` when not given.
loading	boolean	false	Whether a fetch is in flight. Drives the footer and suppresses re-entry.
root	React.RefObject<HTMLElement \| null>	None	Scroll container, when the list scrolls inside an element rather than the page.
rootMargin	string	"200px"	How far before the sentinel reaches the viewport to fire, e.g. "200px", so a fast scroll doesn't show a gap at the bottom.

hasMore *None

boolean

Whether another page exists. When false the sentinel stops observing.

onLoadMore *None

() => void | Promise<void>

Called when the sentinel scrolls into view and there is more to fetch. Never re-called while a previous call is in flight or once `hasMore` is false.

endMessageNone

React.ReactNode

Rendered under the children once `hasMore` is false.

loaderNone

React.ReactNode

Shown while a page is loading. A small `Spinner` when not given.

loadingfalse

boolean

Whether a fetch is in flight. Drives the footer and suppresses re-entry.

rootNone

React.RefObject<HTMLElement | null>

Scroll container, when the list scrolls inside an element rather than the page.

rootMargin"200px"

string

How far before the sentinel reaches the viewport to fire, e.g. "200px", so a fast scroll doesn't show a gap at the bottom.

Also accepts everything from React.HTMLAttributes<HTMLDivElement>.

Coding agents read this reference, with its examples, from the version your project has installed, through the Fuji UI MCP server. Set up your agent