Pagination

Split data into pages and select the page number and item count.

<sy-pagination>Installation guide Basic usage

Live preview

Interact with the component to see results here.

Total itemsItems per pageCurrent pagePage-size options

Jump to pageShow total countHide for one pageDisabled

View code

HTML

<sy-pagination
  totalitems="123"
  pagesize="10"
  activepage="1"
  pagesizeoptions="10,20,50"
  total
></sy-pagination>

Usage guide

Use to browse many items in pages. The app handles actual data requests.

Provide the total count
totalItems is the item count, not the page count.
Reflect the current page
activePage starts at 1. Keep query results and page state synchronized.
Fetch again on changes
Fetch data using the new criteria in pageChanged and pageSizeChanged. The component does not make server requests for you.

Examples

Page navigation

Navigate using page numbers and previous/next controls.

View code

HTML

<sy-pagination
  totalitems="123"
  pagesize="10"
  activepage="3"
></sy-pagination>

Items per page

Choose 10, 20, or 50 items. If the current page exceeds the last page, it adjusts to a valid page.

View code

HTML

<sy-pagination
  totalitems="123"
  pagesize="20"
  pagesizeoptions="10,20,50"
  total
></sy-pagination>

Enter a page number

Enter the target page number. Out-of-range values are clamped to the first or last page.

View code

HTML

<sy-pagination
  totalitems="200"
  jumper
  total
></sy-pagination>

Disabled

Disable navigation, page-size changes, and direct page entry together.

View code

HTML

<sy-pagination
  totalitems="123"
  pagesizeoptions="10,20,50"
  jumper
  disabled
></sy-pagination>

When there is one page

The first example keeps the controls; the second hides them with hideonSingle.

View code

HTML

<div style="display:grid;gap:16px;width:100%"><span>Keep controls</span>
  <sy-pagination totalitems="8"></sy-pagination><span>Hide on a single
    page</span>
  <sy-pagination totalitems="8" hideonsingle></sy-pagination>
</div>

Events and payloads

Interact with the component and inspect the latest event name and detail. The code includes subscriptions to events emitted by this component and its children.

View code

HTML

<sy-pagination
  totalitems="123"
  pagesize="10"
  activepage="1"
  pagesizeoptions="10,20,50"
  total
></sy-pagination>
<output id="demo-events" aria-live="polite">Interact with the component to see
  its latest event and payload.</output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? 'Done';
  for (const name of ["pageChanged", "pageSizeChanged"]) {
    document.addEventListener(name, event => {
      document.querySelector('#demo-events').textContent =
        `${event.target.localName} · ${name}: ${describeResult(event.detail)}`;
    });
  }
</script>

Feature examples

Choose a feature from 12 topics. Explore property settings, method calls, event results, and slot layouts through live examples and code.

Find a feature

Usage examples · Overview

Try the selected example. Topics with multiple configurations let you switch between detailed examples.

View code

HTML

Loading the example.