- Implementation
- Testing
- Pagination Props
Looking for design and usage docs?The Design Spec and Usage Guidelines documentation for the Pagination component will be available soon. Reach out to our team in the #ask-designsystem channel if you have questions or need assistance!
Common Examples
Using with Card grid
Testing
Pagination’s interactive controls carry a stabledata-anv-part attribute so end-to-end tests can target them directly. The library owns the part names; you supply the instance identifier.Attach your own data-* attribute (such as data-cy or data-testid) to Pagination. It is forwarded to the root <nav>:<Pagination data-cy="orders-pagination" page={1} itemsPerPage={10} totalItemCount={100} {...rest} />
cy.get('[data-cy="orders-pagination"] [data-anv-part="next-page-button"]').click();
cy.get('[data-cy="orders-pagination"] [data-anv-part="page-button"][data-page="3"]').click();
data-anv-part | Element |
|---|---|
prev-page-button | Previous page control |
next-page-button | Next page control |
page-button | Numbered page control (data-page) |
overflow-trigger | Ellipsis that opens the overflow page menu |
items-per-page-trigger | Control that opens the items-per-page menu |
option | Menu option in overflow or items-per-page menus |
data-page (page buttons / overflow options) or data-items-per-page (items-per-page options).Overflow and items-per-page menus render in the browser’s top layer. Descendant queries scoped to your wrapper attribute will not match
option parts. Target them by part attribute (and discriminator) after opening the matching trigger. Only one menu is open at a time.import { Pagination } from "@servicetitan/anvil2";
function ExampleComponent() {
return (
<Pagination
page={1}
itemsPerPage={10}
totalItemCount={100}
itemsPerPageOptions={[10, 20, 50]}
showCount={false}
onPageChange={(page) => console.log(page)}
onItemsPerPageChange={(itemsPerPage) => console.log(itemsPerPage)}
/>
); }
Pagination Props
In addition to the props listed below, the Pagination component can accept any valid HTML nav props.number
required
Number of items displayed per page
number
required
The current page number
(firstItem: number, lastItem: number, totalItemCount: number) => string
Full counter string. Called with the first visible item (1-based), the last visible item, and the total. When
totalItemCount is 0, all three arguments are 0. Not called when totalItemCount is omitted. When this prop is omitted, the counter reads “1 - 10 of 100 items” (or “0 items”). The same string follows the English Page {page} of {totalPages} prefix in the live region.string
default:"\"Rows per page\""
Custom label displayed before the items-per-page selector
number[]
Available options for items per page selection
(itemsPerPage: number) => void
Callback when items per page changes
(page: number) => void
Callback when page changes
boolean
Whether to display the item count information
number
Total number of items across all pages