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
- Name9.5.3•View source•View on npm
- Installnpm install @zendeskgarden/react-pagination
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { CursorPagination, OffsetPagination } from '@zendeskgarden/react-pagination'
API
CursorPagination
Extends HTMLAttributes<HTMLElement>
CursorPagination.First
Extends ButtonHTMLAttributes<HTMLButtonElement>
CursorPagination.Last
Extends ButtonHTMLAttributes<HTMLButtonElement>
CursorPagination.Next
Extends ButtonHTMLAttributes<HTMLButtonElement>
CursorPagination.Previous
Extends ButtonHTMLAttributes<HTMLButtonElement>
OffsetPagination
Extends HTMLAttributes<HTMLUListElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
currentPage | number | Required | Sets the current page. Pages start at 1 |
labels | Provides localized labels to pagination elements | ||
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 |