CWA 2.0 is in alpha: try it, build with it, give feedback. APIs can still change between releases; see Releases.
Component
useCwaCollectionPagination
Work out which page numbers a numbered pagination control shows, as a sliding window around the current page.
useCwaCollectionPagination returns the page numbers to show in a numbered pagination control. It shows a sliding window of at most maxPagesToDisplay numbers around the current page. Use it in a pagination component next to a collection that uses withCollection().
import { useCwaCollectionPagination } from '#cwa/composables/cwa-collection-pagination'
const { pages } = useCwaCollectionPagination(props) // props: { currentPage, totalPages, maxPagesToDisplay }
Signature
useCwaCollectionPagination(props: CwaPaginationProps): { pages: ComputedRef<number[]> }
Parameters
| Parameter | Type | Description |
|---|---|---|
props.currentPage | number | The page being shown. Pass pageModel from withCollection() |
props.totalPages | number | Pass totalPages from withCollection() |
props.maxPagesToDisplay | number | The most page numbers to show. 0 means the default, 7 |
The composable reads props reactively, so pass a component's defineProps() result straight in. CwaPaginationProps and CwaPaginationEmits (next, previous, change) are exported from #cwa/composables/cwa-collection-pagination for that component.
Return Values
| Return | Type | Purpose |
|---|---|---|
pages | ComputedRef<number[]> | The page numbers to show, in order |
How the Window Moves
- With fewer pages than
maxPagesToDisplay, every page is listed. - Otherwise the list starts at the current page and grows outwards, one page lower then one higher, until it holds
maxPagesToDisplaynumbers. Near the first or last page, the window shifts so it stays full. - The numbers are always plain page numbers. There are no ellipsis markers, so add your own first and last links if you want them.
- With
totalPagesof0, the list is empty.
Example
Collections & Pagination → Numbered Pagination builds a pagination component with it and drops it into a collection component.