Table Async · paneui

Event log · connecting…

Installation

pnpm dlx shadcn@latest add @paneui/table-async

Usage

import { AsyncTable } from "@/components/ui/table-async"

<AsyncTable
  aria-label="Events"
  columns={columns}
  loadPage={async (page, signal) => {
    const res = await fetch(`/api/events?page=${page}`, { signal })
    return res.json() // { rows, hasMore }
  }}
/>

Examples

Error and Retry

Use when the source can fail mid-list; page 3 fails once here, so scroll down.

Reset Key and End Message

useAsyncPages

Use for paged lists that are not a table.

Errors

When loadPage rejects, a retry band replaces the footer, or a “Try again” empty state shows if nothing has loaded yet.

Accessibility

The table sets aria-busy while a page loads; the loading band is a status and the error bands are alerts.

Built on Table. See also Table Editable.

API Reference

AsyncTable

Table that loads page by page as the list nears its end. Takes every Table prop except data, loading, onEndReached and footer. Also accepts every prop of Table.

loadPage*: (page: number, signal: AbortSignal) => Promise<AsyncPage<T>>; Fetch one page; reject to show the retry footer. Honour signal to cancel.
resetKey: unknown; Change to drop loaded pages, abort the in-flight request and start again from the top (e.g. a new filter).
endMessage: ReactNode | ((count: number) => ReactNode); Replaces the end-of-list note shown once every page is in. Pass null to hide.
onStatusChange: (status: "loading" | "idle" | "error" | "done", rowCount: number) => void; Called when the load status or row count changes.

Prop	Type	Default	Description
loadPage*	(page: number, signal: AbortSignal) => Promise<AsyncPage<T>>	—	Fetch one page; reject to show the retry footer. Honour `signal` to cancel.
resetKey	unknown	—	Change to drop loaded pages, abort the in-flight request and start again from the top (e.g. a new filter).
endMessage	ReactNode \| ((count: number) => ReactNode)	—	Replaces the end-of-list note shown once every page is in. Pass `null` to hide.
onStatusChange	(status: "loading" \| "idle" \| "error" \| "done", rowCount: number) => void	—	Called when the load status or row count changes.

AsyncPage

What loadPage resolves to.

rows*: readonly T[]; The page's rows.
hasMore*: boolean; false once the last page has arrived.

Prop	Type	Default	Description
rows*	readonly T[]	—	The page's rows.
hasMore*	boolean	—	`false` once the last page has arrived.

useAsyncPages

useAsyncPages(loadPage, resetKey?) fetches page 0 on mount and on resetKey change, then one page per loadMore. Returns:

rows: T[]; Everything loaded so far.
status: "loading" | "idle" | "error" | "done"; Current state.
error: unknown; The last rejection.
pages: number; Number of pages received.
loadMore: () => void; Fetch the next page (ignored unless idle).
retry: () => void; Re-request the page that failed.
reload: () => void; Start again from page 0.

Prop	Type	Default	Description
rows	T[]	—	Everything loaded so far.
status	"loading" \| "idle" \| "error" \| "done"	—	Current state.
error	unknown	—	The last rejection.
pages	number	—	Number of pages received.
loadMore	() => void	—	Fetch the next page (ignored unless `idle`).
retry	() => void	—	Re-request the page that failed.
reload	() => void	—	Start again from page 0.

Installation

Usage

Examples

Error and Retry

Reset Key and End Message

useAsyncPages

Errors

Accessibility

Related

API Reference

AsyncTable

AsyncPage

useAsyncPages