EmbeddedPagination

The EmbeddedPagination extends the Pagination component and adopts the styles of the DataTable component.

Import

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

Source

View source code

Package

@schukai/monster

Since

1.0.0

Purpose and scope

The EmbeddedPagination extends the Pagination component and adopts the styles of the DataTable component.

This page documents the <monster-embedded-pagination> custom element. Use the Usage examples for a working starting point and the API tab for the complete public contract.

When to use it

Use this module when its focused responsibility matches the surrounding workflow. Prefer its public options, properties, methods and events over reaching into rendered internals.

Embedded 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

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

monster-embedded-pagination adapts the pagination contract for placement inside a datatable workflow.

Styling

The component inherits the pagination structure and its styling hooks. Keep page-size and navigation behavior synchronized with the owning datasource.

HTML Structure

<monster-embedded-pagination></monster-embedded-pagination>

JavaScript Initialization

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

Exported

EmbeddedPagination

Derived from

Pagination

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 Pagination.

Option

Type

Default

Description

classes

object

Class definitions

classes.spinner

string

monster-spinner monster-theme-primary-3

Spinner class

classes.spinnerContainer

string

monster-theme-primary-2

Spinner container class

classes.error

string

monster-theme-error-2 monster-bg-color-primary-2

Error class

classes.errorContainer

string

monster-theme-primary-2

Error container class

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 Pagination.

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 Pagination.

Static methods

[instanceSymbol]()

Returns

{symbol}

This method is called by the instanceof operator.

getControlCSSStyleSheet()

Returns

{CSSStyleSheet}

No description available.

getTag()

Returns

{string}

No description available.

Lifecycle methods

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

[assembleMethodSymbol]()

No description available.

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.