Listing Pagination

Pagination controls rendered below the ListingTable. Displays current page, total count, and page size selector. State is managed by ListingContext.

Import


import { ListingPagination } from "@phpcreation/frontend-crud-react-nextjs-bundle/components/ListingPagination";

How It Works

ListingPagination reads and writes pagination state through ListingContext. It does not manage its own state.

State	Source
`currentPage`	`ListingContext`
`totalItems`	API response
`pageSize`	`ListingContext` (default: 25)

Usage


import { ListingContext } from "...";
import { ListingTable } from "...";
import { ListingPagination } from "...";
 
<ListingContext entityConfig={entityConfig}>
  <ListingTable columns={columns} />
  <ListingPagination />
</ListingContext>

Page Size

The default page size is controlled by the entity config or environment variable NEXT_PUBLIC_DEFAULT_PAGE_SIZE. Users can change page size via the per-page selector in the pagination controls.

Page state is preserved in the URL query string via the Query String module, so refreshing the page restores the same page position.