v0.10.1

Pagination

Allow user to select a specific page from a range of pages.

# Features

  • Screen reader support for improved accessibility.
  • Advanced customization options.

# Anatomy

Typically, a pagination consists of:

  • Nav: The root container for the pagination.
    • Item: Each pagination item, that could potentially be a number, an ellipsis, or a shortcut to first, last, next and previous page. 
<script>
	import { createPagination } from '@grail-ui/svelte';

	const { items, navAttrs, pageAttrs } = createPagination();
</script>

<nav {...$navAttrs}>
	{#each $items as item}
		<a href="#{item.page}" {...$pageAttrs(item)}>{item.page}</a>
	{/each}
</nav>

# Accessibility

The root node has a role of "navigation" and an aria-label by default. The page items have an aria-label that identifies the purpose of the item.

# API

# PaginationItem

Property Description
type
ellipsis-end | first | last | next | page | previous | ellipsis-start
The type of pagination item.
page
number | null
The current page number.
selected?
boolean
Whether the pagination item is selected.
disabled?
boolean
Whether the pagination item is selected.

# PaginationConfig

Property Description Default
boundaryCount?
number
Number of always visible pages at the beginning and end.
 1
total?
number
The total number of items in all pages.
 0
perPage?
number
Maximum number of items per page.
 10
hideNextButton?
boolean
Whether hide the next-page button.
 false
hidePrevButton?
boolean
Whether to hide the previous-page button.
 false
onPageChange?
(page: number) => void
Callback fired when the page is changed.
 —
ariaLabel?
string
A unique accessible name.
 "Pagination Navigation"
getPageAriaLabel?
(page: number, selected: boolean) => string
Function which returns a value that provides an accessible name for the current page.
 (page) => "Goto Page ${page}"
page?
number
Initial current page.
 1
hideFirstButton?
boolean
Whether to hide the first-page button.
 true
hideLastButton?
boolean
Whether to hide the last-page button.
 true
siblingCount?
number
Number of always visible pages before and after the current page.
 1

# PaginationReturn

Property Description
navAttrs
Readable<Record<string, string>>
HTML attributes for the wrapper navigation element.
pageAttrs
Readable<Function>
HTML attributes for the pagination element.
items
Readable<PaginationItem[]>
An array of pagination properties used to render pagination.
page
Writable<number>
Current page.
start
Readable<number>
Starting row index of current page.
end
Readable<number>
Last row index of current page.
total
Writable<number>
The total number of items in all pages.
perPage
Writable<number>
Maximum number of items per page.