Pagination
Page numbers with ellipses, and a compact mode on phones.
import
import { Pagination } from '@joshicodes/cock';Pages
Narrow the window: the numbers give way to the position.
Page 4 of 12. Keep going.
Behaviour
- Below the `sm` breakpoint the numbers are replaced by the position, because a dozen buttons do not fit on a phone.
API
Read out of the component sources at build time, so it matches the version you installed.
Every component also takes class, merged
through tailwind-merge so your utility wins.
Props of Pagination
| Prop | Type | Default |
|---|---|---|
page bindable | number | 1 |
total required | number | — |
siblings How many numbered buttons to show around the current page. | number | 1 |
class | string | — |
Events of Pagination
| Event | Type | Default |
|---|---|---|
onchange | (page: number) => void | — |