Dom

A dom datasource

Import

import { Dom } from "@schukai/monster/source/components/datatable/datasource/dom.mjs";

Source

View source code

Package

@schukai/monster

Since

1.0.0

Purpose and scope

A dom datasource

This page documents the <monster-datasource-dom> 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 DOM Data

Connecting a Dataset Control to a Pagination Control

This example demonstrates the integration of a dataset control with a pagination control. Although the pagination control is not necessary for the core functioning of the dataset control, it provides a convenient mechanism to navigate through records. For this demonstration, the data originates from a data source embedded directly within the DOM. However, this can be easily substituted with a REST-based data source.

Data Source and Dataset Control Connection

To establish the connection between the data source and the dataset, use the data-monster-option-datasource-selector attribute. This attribute accepts any valid CSS selector as its value, but the query must resolve to a single DOM element. For example:


<div data-monster-option-datasource-selector="#data-source"></div>

This setup ensures that the dataset control interacts only with the specified data source.

Additional Resources

For further information on data access and handling, refer to the following sections:

Pathfinder: Guidance on navigating and accessing data structures efficiently.
Transformer: Detailed descriptions of all available commands for data transformation.

Username

Full Name

Age

Country

Registered Date

Status

Javascript

import '@schukai/monster/source/components/datatable/dataset.mjs';
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/dataset.mjs';</script>

HTML

<!-- myDatasource is a DOM element that contains the data. -->
<!-- The data is stored in a script tag with type application/json. -->
<!-- The data is an array of objects. -->

<monster-datasource-dom id="myDatasource">
    <script type="application/json">
        [
            {
                "id": 1,
                "username": "martin89",
                "email": "elena.richards@domain.com",
                "full_name": "Elena Richards",
                "age": 29,
                "country": "Greece",
                "registered_date": "2019-11-23",
                "status": "active"
            },
            {
                "id": 2,
                "username": "sophiabell",
                "email": "thomas.cook@gmail.com",
                "full_name": "Thomas Cook",
                "age": 22,
                "country": "Portugal",
                "registered_date": "2022-04-15",
                "status": "banned"
            },
            {
                "id": 3,
                "username": "brianm",
                "email": "chloe.adams@webmail.com",
                "full_name": "Chloe Adams",
                "age": 37,
                "country": "New Zealand",
                "registered_date": "2021-06-01",
                "status": "inactive"
            },
            {
                "id": 4,
                "username": "larad",
                "email": "alejandro.fuentes@yahoo.com",
                "full_name": "Alejandro Fuentes",
                "age": 45,
                "country": "Japan",
                "registered_date": "2024-01-20",
                "status": "banned"
            }
        ]


    </script>

</monster-datasource-dom>

<!-- The monster-dataset component is used to display the data. -->
<!-- The data is displayed in a grid layout. -->
<!-- The data comes from the myDatasource DOM element. -->
<!-- The data-monster-option-mapping-data attribute is used to map the data to the component. -->
<!-- In this case, there are no mappings, so the data is displayed as is and the attribute should be empty. -->

<monster-dataset
        data-monster-option-mapping-data=""
        data-monster-option-datasource-selector="#myDatasource">

    <div style="display: grid; grid-template-columns: 1fr 1fr;gap: 0.1rem;width: 600px">
        <div>ID</div>

        <!-- Here we use the data-monster-replace attribute to display the data. -->
        <div data-monster-replace="path:data.id"></div>
        <div>Username</div>
        <div data-monster-replace="path:data.username"></div>
        <div>Full Name</div>
        <div data-monster-replace="path:data.full_name"></div>
        <div>Email</div>
        <div data-monster-replace="path:data.email"></div>
        <div>Age</div>
        <div data-monster-replace="path:data.age"></div>
        <div>Country</div>
        <div data-monster-replace="path:data.country"></div>
        <div>Registered Date</div>
        <div data-monster-replace="path:data.registered_date"></div>
        <div>Status</div>
        <div data-monster-replace="path:data.status"></div>
    </div>

</monster-dataset>

<monster-pagination
        data-monster-option-datasource-selector="#myDatasource"
        data-monster-option-objectsperpage="1"
></monster-pagination>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Paginated DOM Data

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

Component Design

monster-datasource-dom reads structured data embedded in the document and exposes it through the standard datasource contract.

Composition

Keep the embedded payload declarative and let connected components observe the datasource. The element has no visual surface of its own.

HTML Structure

<monster-datasource-dom></monster-datasource-dom>

JavaScript Initialization

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

Exported

Dom

Derived from

Datasource

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

Option

Type

Default

Description

templates

object

Template definitions

templates.main

string

undefined

Main template

features

object

Feature definitions

features.autoInit

boolean

true

Automatically initializes the component

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

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

Behavioral methods

reload()

Returns

{Promise<never>|*}

Reloads the data

Structural methods

setParameters({page})

Parameters

{page} {string}: page

Returns

{Dom}

This method set the current page of the pagination

Static methods

[instanceSymbol]()

Returns

{symbol}

This method is called by the instanceof operator.

getCSSStyleSheet()

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]()

Returns

{void}

No description available.

connectedCallback()

Returns

{void}

No description available.

Other methods

currentPage()

Returns

{int}

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.