Code

Implementation
Pagination Props

Looking for design and usage docs?The Design Spec and Usage Guidelines documentation for the 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

Demo

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.

itemsPerPage

number

required

Number of items displayed per page

page

number

required

The current page number

itemsPerPageOptions

number[]

Available options for items per page selection

onItemsPerPageChange

(itemsPerPage: number) => void

Callback when items per page changes

onPageChange

(page: number) => void

Callback when page changes

showCount

boolean

Whether to display the item count information

totalItemCount

number

Total number of items across all pages

Anvil2 Web

Resources

Common Examples

Using with Card grid

Anvil2 Web

Resources

​Common Examples

​Using with Card grid

​Pagination Props

Common Examples

Using with Card grid

`Pagination` Props