Pagination
Pagination separates content into pages and allows users to navigate between those pages.
- To divide large amounts of data into manageable chunks
How to use it
Cursor pagination
Cursor-based pagination works by returning a pointer to a specific item in a dataset. There is no concept of the total number of pages or results in the set.
Gap indicator
The position of a gap indicator (…) can be set in the sequence to represent overflowing pages.
Page padding
Sets the number of pages that appear between the current page and a gap indicator.
Offset pagination
Offset-based pagination allows users to see the total number of pages and jump to a specific position within the set.
Configuration
- Name8.76.4•View source•View on npm
- Installnpm install @zendeskgarden/react-pagination
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { CursorPagination, Pagination } from '@zendeskgarden/react-pagination'
API
Pagination
Extends HTMLAttributes<HTMLUListElement>
Prop name | Type | Default | Description |
---|---|---|---|
currentPage | number | Required | Sets the current page. Pages start at 1. |
onChange | – | Handles page change events Parameters currentPage The current page | |
pageGap | number | 2 | Positions the leading and trailing gap indicator, based on the current and total pages |
pagePadding | number | 2 | Sets the number of pages that appear between the current page and a gap indicator |
totalPages | number | Required | Defines the total number of pages |
transformPageProps | – | Applies localized labels, test attributes, etc. to individual pages Parameters pageType The type of the page accepting the propsprops Default page props to transformpageNumber The page number |
CursorPagination
CursorPagination.First
Extends ButtonHTMLAttributes<HTMLButtonElement>
CursorPagination.Last
Extends ButtonHTMLAttributes<HTMLButtonElement>
CursorPagination.Next
Extends ButtonHTMLAttributes<HTMLButtonElement>
CursorPagination.Previous
Extends ButtonHTMLAttributes<HTMLButtonElement>