;
}
};
**Looking for design and usage docs?**
The Design Spec and Usage Guidelines documentation for the {component_0} component will be available soon. Reach out to our team in the [#ask-designsystem](https://servicetitan.enterprise.slack.com/archives/CBSRGHTRS) channel if you have questions or need assistance!
```tsx lines expandable theme={null}
import { Pagination, Flex } from "@servicetitan/anvil2";
import { useState } from "react";
function App() {
const totalItemCount = 20;
const [page, setPage] = useState(1);
const [itemsPerPage, setItemsPerPage] = useState(4);
const itemsPerPageOptions = [4, 6, 10];
return (
setItemsPerPage(itemsPerPage)}
totalItemCount={totalItemCount}
onPageChange={(page) => setPage(page)}
showCount={true}
/>
);
}
export default App;
```
## Common Examples
### Using with Card grid
```tsx lines expandable theme={null}
import { Pagination, Flex, Grid, Card } from "@servicetitan/anvil2";
import { useState } from "react";
function App() {
const totalItemCount = 100;
const items = [...Array(totalItemCount).keys()];
const [page, setPage] = useState(1);
const [itemsPerPage, setItemsPerPage] = useState(4);
const itemsPerPageOptions = [4, 8, 12];
const startIndex = (page - 1) * itemsPerPage;
const endIndex = page * itemsPerPage;
const pageItems = items.slice(startIndex, endIndex);
return (
{pageItems.map((item) => (
{item + 1}
))}
setItemsPerPage(itemsPerPage)}
totalItemCount={totalItemCount}
onPageChange={(page) => setPage(page)}
showCount={true}
/>
);
}
export default App;
```
```tsx theme={null}
import { Pagination } from "@servicetitan/anvil2";
function ExampleComponent() {
return (
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 of items displayed per page
The current page number
Custom label displayed before the items-per-page selector
Available options for items per page selection
Callback when items per page changes
Callback when page changes
Whether to display the item count information
Total number of items across all pages
