Pagination

<wa-pagination>

Experimental

Pagination streamlines navigation through large data sets by segmenting results into pages, reducing cognitive load and improving findability.

Use this default pagination to navigate a large data set with standard page controls and a fixed page size.

<wa-pagination id='page-btn-DIV' total='2120' page-size='20' value='1'></wa-pagination>

Examples

Link to This Section

Simple Pagination

Link to This Section

Use the simple variant for compact views where you only need basic next/previous navigation.

<wa-pagination id='page-btn-DIV2' total='2120' page-size='20' value='1' simple></wa-pagination>

Empty Pagination

Link to This Section

Use the simple variant for compact views where you only need basic next/previous navigation.

<wa-pagination id='page-btn-DIV2' total='0' page-size='20' value='1' simple></wa-pagination>

Full Pagination

Link to This Section

Use the full variant when users must jump to first/last pages and adjust page size in enterprise workflows.

<wa-pagination id='page-btn-DIV3' total='2120' page-size='20' value='1' show-first show-last show-size-change show-page-change></wa-pagination>

Importing

Link to This Section

If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick a component manually, use one of the following snippets.

CDN

npm

Self-Hosted

React

Import this component directly from the CDN:

import 'https://ka-f.webawesome.com/webawesome@0.17.0/components/pagination/pagination.js';

After installing Web Awesome via npm, import this component:

import '@awesome.me/webawesome/dist/components/pagination/pagination.js';

If you're self-hosting Web Awesome, import this component from your server:

import './webawesome/dist/components/pagination/pagination.js';

To import this component for React 18 or below, use the following code:

import WaPagination from '@awesome.me/webawesome/dist/react/pagination/index.js';

Slots

Link to This Section

Learn more about using slots.

Name	Description
`empty`	when total=0 to show .
`end`	tool bar end to show .
`start`	The prefix slot.

Attributes & Properties

Link to This Section

Learn more about attributes and properties.

Name	Description	Reflects
`align` `align`	Layout alignment Type `'left' \| 'right' \| 'center'` Default `'right'`
`pageSize` `page-size`	Page Break Size Type `number` Default `20`
`pageSizeOptions`	Support for resized pagination Type `Array<Number>`
`showFirst` `show-first`	Whether to display Jump directly to the first page Type `boolean` Default `false`
`showLast` `show-last`	Show or not Show Jump directly to the last page Type `boolean` Default `false`
`showPageChange` `show-page-change`	Whether to allow direct adjustment of the first few pages Type `boolean` Default `false`
`showSizeChange` `show-size-change`	Whether to resize the paging component Type `boolean` Default `false`
`simple` `simple`	Allowed or not Simplified paging mode Type `boolean` Default `false`
`total` `total`	Total number of sizes Type `number`
`value` `value`	Current page Type `number` Default `1`

Events

Link to This Section

Learn more about events.

Name	Description
`before-change`	Emitted before page changed,use can defaultPrevented ,then sl-page-change can not be emit .
`change`	Emitted when current page changed .

CSS Parts

Link to This Section

Learn more about CSS parts.

Name	Description	CSS selector
`base`	The component's base wrapper.	`::part(base)`
`pageWrap`	The component's to page button wrapper.	`::part(pageWrap)`

Dependencies

Link to This Section

This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.

<wa-button,wa-select,wa-option,wa-icon,wa-tooltip>

Need a hand?

Report a bug

Ask for help

Quick Links

Recent Searches