InfiniteDataTable

Virtualized table over an infinite query: server-driven sort, scroll-to-load-more, disclosure rows, loading/empty/error states.

Playground

Rows are virtualized; scrolling to the bottom loads the next page. Column sort is handed to the caller, the way a server-sorted list needs it. The chevron opens a disclosure row.

<InfiniteDataTable
  aria-label="Accounts"
  columns={columns}
  rows={rows}
  getRowId={(r) => r.id}
  status={query.status}
  sort={sort}
  onSortChange={setSort}
  total={total}
  hasMore={query.hasNextPage}
  isLoadingMore={query.isFetchingNextPage}
  onLoadMore={() => query.fetchNextPage()}
  renderDetail={(r) => <Detail row={r} />}
/>

Loaded

Credits shown

9,980