useTokenPagination

Forward-only token-based pagination that bridges gRPC/Connect APIs to TanStack Table.

Powered by

@tanstack/react-table

Installation

npx shadcn@latest add @redpanda/use-token-pagination

pnpm dlx shadcn@latest add @redpanda/use-token-pagination

yarn dlx shadcn@latest add @redpanda/use-token-pagination

bunx shadcn@latest add @redpanda/use-token-pagination

nubx shadcn@latest add @redpanda/use-token-pagination

aube dlx shadcn@latest add @redpanda/use-token-pagination

useTokenPagination adapts token-based pagination (the nextPageToken model used by gRPC/Connect APIs) to TanStack Table’s offset-based pagination state. It’s forward-only: there is no page token for going back, so canPreviousPage is always false. After each fetch, report the next token via onPageResolved, and wire paginationState / onPaginationChange into <DataTable>.

Usage

import { useTokenPagination } from "@/hooks/use-token-pagination";
import { DataTable } from "@/components/redpanda-ui/data-table";

function TokenPaginatedTable() {
  const pagination = useTokenPagination({ pageSize: 20 });

  const { data } = useQuery({
    queryKey: ["rows", pagination.currentPageToken, pagination.pageSize],
    queryFn: async () => {
      const result = await fetchRows({
        pageToken: pagination.currentPageToken,
        pageSize: pagination.pageSize,
      });
      pagination.onPageResolved(result); // report result.nextPageToken
      return result;
    },
  });

  return (
    <DataTable
      columns={columns}
      data={data?.rows ?? []}
      tableOptions={{
        state: { pagination: pagination.paginationState },
        manualPagination: true,
        pageCount: pagination.pageCount,
        onPaginationChange: pagination.onPaginationChange,
      }}
    />
  );
}

API

useTokenPagination({ pageSize? })

Returns

Related

For offset/URL-driven pagination, see useDataTableSearchParams.