@patternfly/react-core
Version:
This library provides a set of common React components for use with the PatternFly reference implementation.
90 lines (48 loc) • 1.72 kB
Markdown
---
id: Pagination
section: components
cssPrefix: pf-v6-c-pagination
propComponents: ['Pagination', PaginationTitles, PerPageOptions, PaginationToggleTemplateProps]
ouia: true
---
import { Fragment, useState, useRef, useLayoutEffect } from 'react';
## Examples
### Top
```ts file="./PaginationTop.tsx"
```
### Bottom
```ts file="./PaginationBottom.tsx"
```
### Indeterminate
By not passing `itemCount` and passing `toggleTemplate` you can customize the toggle with text.
```ts file="./PaginationIndeterminate.tsx"
```
### Disabled
```ts file="./PaginationDisabled.tsx"
```
### No items
```ts file="./PaginationNoItems.tsx"
```
### One page
```ts file="./PaginationOnePage.tsx"
```
### Compact
```ts file="./PaginationCompact.tsx"
```
### Offset
```ts file="./PaginationOffset.tsx"
```
### Sticky
```ts isFullscreen file="./PaginationSticky.tsx"
```
### Dynamic sticky top
Pagination can be made sticky via two properties: `isStickyBase`, which allows separate control of the sticky position, and `isStickyStuck`, which applies the sticky styling. In this example, `isStickyStuck` is only applied when the pagination is not at the top of the scroll parent container.
```ts isFullscreen file="./PaginationDynamicStickyTop.tsx"
```
### Dynamic sticky bottom
Bottom pagination can be made sticky via two properties: `isStickyBase`, which allows separate control of the sticky position, and `isStickyStuck`, which applies the sticky styling. In this example, `isStickyStuck` is only applied when the pagination is not at the bottom of the scroll parent container.
```ts isFullscreen file="./PaginationDynamicStickyBottom.tsx"
```
### Inset
```ts file="./PaginationInset.tsx"
```