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.

Simple example

Simple Setup

Import the component module once, then wait for its custom-element registration before code that depends on the upgraded element runs.

Registered custom element

The module makes <monster-embedded-pagination> available to HTML.

Checking registration…

Javascript

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

await customElements.whenDefined("monster-embedded-pagination");
const result = document.querySelector("#components-datatable-embedded-pagination-simple [data-role='result']");
result.textContent = "monster-embedded-pagination is registered.";

HTML

<section id="components-datatable-embedded-pagination-simple" style="display:grid;gap:var(--monster-space-3);padding:var(--monster-space-4);border:1px solid var(--monster-color-border-primary-2);">
  <strong>Registered custom element</strong>
  <p style="margin:0;">The module makes <code>&lt;monster-embedded-pagination&gt;</code> available to HTML.</p>
  <output data-role="result">Checking registration…</output>
</section>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Advanced example

Programmatic Usage

After registration, create the component through the standard DOM API. Keep the instance detached until required options, attributes and child content are ready.

Programmatic element creation

Tag
Registered
HTMLElement

Javascript

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

await customElements.whenDefined("monster-embedded-pagination");
const root = document.getElementById("components-datatable-embedded-pagination-advanced");
const element = document.createElement("monster-embedded-pagination");

root.querySelector("[data-role='tag']").textContent = element.localName;
root.querySelector("[data-role='registered']").textContent = String(
  customElements.get("monster-embedded-pagination") !== undefined,
);
root.querySelector("[data-role='element']").textContent = String(element instanceof HTMLElement);

HTML

<section id="components-datatable-embedded-pagination-advanced" style="display:grid;gap:var(--monster-space-3);padding:var(--monster-space-4);border:1px solid var(--monster-color-border-secondary-2);">
  <strong>Programmatic element creation</strong>
  <dl style="display:grid;grid-template-columns:max-content 1fr;gap:var(--monster-space-2) var(--monster-space-4);margin:0;">
    <dt>Tag</dt><dd data-role="tag" style="margin:0;"></dd>
    <dt>Registered</dt><dd data-role="registered" style="margin:0;"></dd>
    <dt>HTMLElement</dt><dd data-role="element" style="margin:0;"></dd>
  </dl>
</section>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Integration contract

Importing the module registers <monster-embedded-pagination>. Configure the element through documented attributes or JavaScript and observe its public events for state changes.

Composition

Keep application-specific state outside the component unless the API explicitly owns it. Compose behavior through public inputs and outputs so upgrades do not depend on private markup.

Accessibility and resilience

Provide meaningful labels and surrounding context, preserve keyboard access, and handle loading, empty and error states in the host workflow where applicable.

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.