Pagination

A pagination control for navigating multi-page result sets and synchronizing table state.

Import

import { Pagination } from "@schukai/monster/source/components/datatable/pagination.mjs";

Source

View source code

Package

@schukai/monster

Since

1.0.0

Introduction

The Monster Pagination component moves through multi-page result sets. Use it when records are too large for a single view and users need explicit page state in a datatable or result listing.

When to use Pagination

Use it for pageable result sets: Datatables, search results and backoffice lists are common cases.
Use it when current page and total size matter: Pagination exposes the result structure clearly.
Do not use it when infinite scrolling is the actual pattern: Mixed pagination models confuse users.

Typical mistakes

Keep pagination synchronized with filtering and sorting. If the page indicator and the actual result set drift apart, users lose trust in the table state.

Datasource Pagination

This example connects monster-pagination to a datasource and reads the pagination metadata from sys.pagination.

Javascript

import "@schukai/monster/source/components/datatable/datasource/dom.mjs";
import "@schukai/monster/source/components/datatable/pagination.mjs";<script type="module">import "@schukai/monster/source/components/datatable/datasource/dom.mjs";
import "@schukai/monster/source/components/datatable/pagination.mjs";</script>

HTML

<monster-datasource-dom id="pagination-simple-datasource">
  <script type="application/json">
    {
      "dataset": [
        { "id": 1, "name": "John Doe" },
        { "id": 2, "name": "Jane Doe" },
        { "id": 3, "name": "Max Mustermann" }
      ],
      "sys": {
        "pagination": {
          "pages": 10,
          "objectsPerPage": 3,
          "currentPage": 2
        }
      }
    }
  </script>
</monster-datasource-dom>

<monster-pagination
  data-monster-option-datasource-selector="#pagination-simple-datasource"
></monster-pagination>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Programmatic Pagination State

This example drives monster-pagination without a datasource and shows the direct setPaginationState() API.

Current page Total pages

Javascript

import "@schukai/monster/source/components/datatable/pagination.mjs";

const pagination = document.getElementById("pagination-programmatic-demo");
const pageInput = document.getElementById("pagination-programmatic-page");
const totalInput = document.getElementById("pagination-programmatic-total");
const status = document.getElementById("pagination-programmatic-status");

const render = () => {
  const totalPages = Number(totalInput.value);
  const currentPage = Math.min(Number(pageInput.value), totalPages);
  pageInput.max = String(totalPages);
  pageInput.value = String(currentPage);
  pagination.setPaginationState({ currentPage, totalPages });
  status.textContent = "Showing page " + currentPage + " of " + totalPages + ".";
};

pageInput.addEventListener("input", render);
totalInput.addEventListener("change", render);
render();<script type="module">import "@schukai/monster/source/components/datatable/pagination.mjs";

const pagination = document.getElementById("pagination-programmatic-demo-run");
const pageInput = document.getElementById("pagination-programmatic-page-run");
const totalInput = document.getElementById("pagination-programmatic-total-run");
const status = document.getElementById("pagination-programmatic-status-run");

const render = () => {
  const totalPages = Number(totalInput.value);
  const currentPage = Math.min(Number(pageInput.value), totalPages);
  pageInput.max = String(totalPages);
  pageInput.value = String(currentPage);
  pagination.setPaginationState({ currentPage, totalPages });
  status.textContent = "Showing page " + currentPage + " of " + totalPages + ".";
};

pageInput.addEventListener("input", render);
totalInput.addEventListener("change", render);
render();</script>

HTML

<div style="display:grid;gap:1rem;max-inline-size:34rem;">
  <monster-pagination id="pagination-programmatic-demo"></monster-pagination>

  <label style="display:grid;gap:0.4rem;">
    Current page
    <input id="pagination-programmatic-page" type="range" min="1" max="12" value="3" />
  </label>

  <label style="display:grid;gap:0.4rem;">
    Total pages
    <select id="pagination-programmatic-total">
      <option value="5">5 pages</option>
      <option value="8">8 pages</option>
      <option value="12" selected>12 pages</option>
    </select>
  </label>

  <p id="pagination-programmatic-status" style="margin:0;"></p>
</div>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Component Design

The pagination element listens to dataset state, renders available page actions, and updates the table through its surrounding datatable workflow.

Styling Hooks

page and pages: Define the visible navigation state.
labels: Adjusts text for page actions.
::part(...): Styles buttons, counters, and navigation wrappers.

HTML Structure

<monster-pagination></monster-pagination>

JavaScript Initialization

const element = document.createElement('monster-pagination');
document.body.appendChild(element);

Exported

Pagination

Derived from

CustomElement

Options

The Options listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the CustomElement.

Option

Type

Default

Description

templates

object

Template definitions

templates.main

string

undefined

Main template

datasource

object

Datasource configuration

datasource.selector

string

Datasource selector

labels

object

undefined

Label definitions

labels.page

string

undefined

Page label

labels.description

string

undefined

Description label

labels.previous

string

undefined

Previous label

labels.next

string

undefined

Next label

labels.of

string

undefined

Of label

href

string

page-${page}

Href

currentPage

number

Current page

pages

number

Pages

objectsPerPage

number

Objects per page

mapping

object

Mapping

mapping.pages

string

sys.pagination.pages

Pages mapping

mapping.objectsPerPage

string

sys.pagination.objectsPerPage

Objects per page mapping

mapping.currentPage

string

sys.pagination.currentPage

Current page mapping

since
deprecated

Properties and Attributes

The Properties and Attributes listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits Properties and Attributes from these parent classes. If you cannot find a specific Properties and Attributes in this list, we recommend consulting the documentation of the CustomElement.

data-monster-options: Sets the configuration options for the collapse component when used as an HTML attribute.
data-monster-option-[name]: Sets the value of the configuration option [name] for the collapse component when used as an HTML attribute.

Methods

The methods listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the CustomElement.

Constructor

constructor()

Structural methods

setPaginationState(state)

Parameters

state {object}: - The state object for the pagination.

Returns

{void}

Sets the pagination state directly, without requiring a datasource. This is useful for controlling the component programmatically.

Static methods

[instanceSymbol]()

Returns

{symbol}

This method is called by the instanceof operator.

getControlCSSStyleSheet()

Returns

{CSSStyleSheet}

getCSSStyleSheet()

Returns

{CSSStyleSheet[]}

getTag()

Returns

{string}

Lifecycle methods

Lifecycle methods are called by the environment and are usually not intended to be called directly.

[assembleMethodSymbol]()

Returns

{void}

connectedCallback()

Returns

{void}

disconnectedCallback()

Returns

{void}

Events

This component does not fire any public events. It may fire events that are inherited from its parent classes.

The current width of the area is too small to display the content correctly.