Components and hooks for navigating through paged data with cursor-based and offset-based pagination strategies.
A pagination component for use with cursor-based pagination. Cursor-based pagination loads data in chunks by using a cursor from the last item on the current page to know where to start the next set. It doesn't let you jump to a specific page or know how many total pages there are, but it's more efficient for large or real-time data sets.
import { CursorPagination } from "@ngrok/mantle/pagination";
<CursorPagination.Root defaultPageSize={100}>
<CursorPagination.PageSizeSelect />
<CursorPagination.Buttons hasNextPage hasPreviousPage />
</CursorPagination.Root>
<CursorPagination.Root defaultPageSize={100}>
<CursorPagination.PageSizeValue />
<CursorPagination.Buttons hasNextPage hasPreviousPage />
</CursorPagination.Root>
<CursorPagination.Root defaultPageSize={20}>
<CursorPagination.Buttons hasNextPage hasPreviousPage={false} />
</CursorPagination.Root>The root container for cursor-based pagination. Manages the page size state.
All props from the HTML div element, plus:
A pair of previous/next buttons for navigating between pages.
A select input for changing the number of items per page.
Displays the current page size as a read-only value (e.g. "100 per page").
A headless hook for managing offset-based pagination state. Offset-based pagination lets you jump to a specific page and know the total number of pages.
import { useOffsetPagination } from "@ngrok/mantle/pagination";
const pagination = useOffsetPagination({
listSize: 150,
pageSize: 10,
});
// pagination.currentPage — current page number (1-indexed)
// pagination.totalPages — total number of pages
// pagination.hasNextPage — whether there is a next page
// pagination.hasPreviousPage — whether there is a previous page
// pagination.nextPage() — go to next page
// pagination.previousPage() — go to previous page
// pagination.goToPage(n) — go to a specific page
// pagination.goToFirstPage() — go to the first page
// pagination.goToLastPage() — go to the last page
// pagination.offset — the offset of the current page
// pagination.pageSize — the current page size
// pagination.setPageSize(n) — set the page size (resets to page 1)A utility function to get a paginated slice of a list based on the current offset pagination state.
import { getOffsetPaginatedSlice, useOffsetPagination } from "@ngrok/mantle/pagination";
const data = ["a", "b", "c", "d", "e", "f"];
const pagination = useOffsetPagination({ listSize: data.length, pageSize: 2 });
const currentPageData = getOffsetPaginatedSlice(data, pagination);
// Returns: ['a', 'b'] for page 1, ['c', 'd'] for page 2, etc.