The m3e-paginator component is a compact, accessible paginator control for navigating paged data sets. It provides semantic first/previous/next/last navigation controls and an optional page-size selector.

npm i @m3e/paginator

This section outlines usage examples and configuration guidance for the components in this package.

At minimum, you must specify the total number of items being paged and the page size. Use the length and page-size attributes of the m3e-paginator component, respectively. By default, page-size is set to 50.

When a user interacts with the paginator, it emits a page event. This event can be used to update any associated data view and includes the following properties:

• pageIndex: number — The zero-based index of the current page.
• previousPageIndex: number (optional) — The zero-based index of the previously selected page.
• pageSize: number | "all" — The current page size.
• length: number — The total number of items being paged.

<m3e-paginator length="100"></m3e-paginator>

The page-sizes attribute lets you define which page size options are available to users. It accepts a comma-separated list of values and may include "all". By default, page-sizes is set to "5,10,25,50,100".

The current page-size will always appear in the dropdown, event if its not included in page-sizes.

When page-size is set to "all", the range label and navigation actions are hidden.

<m3e-paginator length="100" page-sizes="10,50,all" page-size="all"></m3e-paginator>

By default, the first and last page buttons are hidden. Use the show-first-last-buttons attribute to show them.

<m3e-paginator length="100" show-first-last-buttons></m3e-paginator>

The paginator uses ARIA role="group" to semantically group its child controls. You must add an aria-label or aria-labelledby attribute to each m3e-paginator with a label that describes the content controlled by the pagination control.

You can use the first-page-label, previous-page-label, next-page-label, and last-page-label attributes to change the accessible labels of navigation actions.

This package uses JavaScript Modules. To use it directly in a browser without a bundler, use a module script similar to the following.

<script type="module" src="/node_modules/@m3e/badge/dist/index.js"></script>

You also need a module script for @m3e/form-field, @m3e/select, @m3e/option, @m3e/icon-button, and @m3e/tooltip due to being a dependency.

<script type="module" src="/node_modules/@m3e/form-field/dist/index.js"></script>
<script type="module" src="/node_modules/@m3e/select/dist/index.js"><
<script type="module" src="/node_modules/@m3e/option/dist/index.js"></script>/script>
<script type="module" src="/node_modules/@m3e/icon-button/dist/index.js"></script>
<script type="module" src="/node_modules/@m3e/tooltip/dist/index.js"></script>

In addition, you must use an import map to include additional dependencies.

<script type="importmap">
  {
    "imports": {
      "lit": "https://cdn.jsdelivr.net/npm/lit@3.3.0/+esm",
      "@m3e/core": "/node_modules/@m3e/core/dist/index.js",
      "@m3e/core/a11y": "/node_modules/@m3e/core/dist/a11y.js",
      "@m3e/core/anchoring": "/node_modules/@m3e/core/dist/anchoring.js",
      "@m3e/core/bidi": "/node_modules/@m3e/core/dist/bidi.js",
      "@m3e/core/platform": "/node_modules/@m3e/core/dist/platform.js"
    }
  }
</script>

For production, use index.min.js, a11y.min.js, anchoring.min.js, bidi.min.js, and platform.min.js for faster load times.

This package includes a Custom Elements Manifest (custom-elements.json), which documents the properties, attributes, slots, events and CSS custom properties of each component.

You can explore the API below, or integrate the manifest into your own tooling.