eds-pagination

Explore the Interactive Component

Use the playground below to experiment with the component. Click the button to view the full Storybook deployment for additional examples and configurations.

Pagination Mode

See It in Use with Code

Check out this practical implementation of component.

In HTML

In React

Navigation Mode

See It in Use with Code

In HTML

Check out this practical implementation of component.

In React

Overview

EdsPagination is a component for navigating paginated data.

Key Features:

Supports two display modes: “default” (shows numbered page links) and “navigator” (shows Previous/Next buttons).
Emits a page event when the page is changed in “default” mode.
Automatically generates pagination links based on the currentPage and lastPage.
Full keyboard navigation support with arrow keys, Home, End
Proper ARIA labels and screen reader support

This component is designed for flexible and accessible pagination controls, suitable for various display needs.

Properties

Property	Attribute	Description	Type	Default
`currentPage`	`current-page`	The current active page	`number`	`undefined`
`lastPage`	`last-page`	The last page number available	`number`	`undefined`
`mode`	`mode`	Mode of pagination display - ‘default’ shows page numbers, ’navigator’ shows Previous/Next buttons only	`"default" \| "navigator"`	`'default'`
`nextLabel`	`next-label`	Label for the next button in navigator mode	`string`	`'Next'`
`nextUrl`	`next-url`	URL for the next page in navigator mode	`string`	`''`
`perPage`	`per-page`	The number of items per page	`number`	`10`
`prevLabel`	`prev-label`	Label for the previous button in navigator mode	`string`	`'Prev'`
`prevUrl`	`prev-url`	URL for the previous page in navigator mode	`string`	`''`
`total`	`total`	The total number of items	`number`	`0`
`url`	`url`	Base URL for the pagination links	`string`	`''`
`useButtons`	`use-buttons`	Whether to use buttons (for JavaScript pagination) or links (for URL navigation)	`boolean`	`true`

Dependencies

Used by

eds-table

Depends on

Graph

graph TD;
  eds-pagination --> eds-button
  eds-pagination --> eds-link
  eds-button --> eds-icon-wrapper
  eds-link --> eds-icon-wrapper
  eds-table --> eds-pagination
  style eds-pagination fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS