` and optional skeleton rows - **`DataTableInfiniteFooterProps`** — Interface defining control props for pagination state and load behavior - **Sentinel element** — A hidden `h-1` div observed by `IntersectionObserver`; fires `onLoadMore` when it enters the viewport - **`DataTableSkeleton`** — Rendered during active fetch to provide loading feedback ## Usage Example ```typescript import { DataTableInfiniteFooter } from './data-table-infinite-footer' function MyTable() { const { data, hasNextPage, isFetchingNextPage, fetchNextPage } = useInfiniteQuery(...) return ( {data.map(row => ...)} ) } ``` ## Notes | Prop | Default | Description | |------|---------|-------------| | `skeletonRows` | `3` | Number of skeleton rows shown while fetching | | `rootMargin` | `'200px'` | `IntersectionObserver` margin, controls how early loading triggers | - `onLoadMore` is stored in a ref to avoid stale closure issues in the observer callback - The observer disconnects and re-attaches whenever `hasNextPage`, `isFetchingNextPage`, or `rootMargin` changes