DataSet

A dataset component that can be used to show the data of a data source

Import

import { DataSet } from "@schukai/monster/source/components/datatable/dataset.mjs";

Source

View source code

Package

@schukai/monster

Since

1.0.0

Username

Full Name

Age

Country

Registered Date

Status

Introduction

The DataSet component is a robust and versatile web component that acts as a bridge between your data and its representation within your application. More than just a simple UI element, this component is essential for enhancing interactivity and usability in a wide range of web applications. Whether you are building a lightweight website or a complex enterprise-level application, the DataSet component is designed to streamline data interaction while improving user satisfaction.

Key Features

Dynamic Data Binding: Automatically reflects changes from the data source into the component, enabling real-time updates and seamless interaction with dynamic content.
Customizable Appearance: Supports customization through CSS and exported part attributes, allowing the component to align with your application’s design language.
Accessibility: Built with accessibility in mind, ensuring an inclusive experience for users relying on assistive technologies or alternative navigation methods.
Programmatic Control: Offers an API for programmatic control, including methods such as refresh() and write(), granting developers flexibility in how the component behaves.

Improving the User Experience

The DataSet component is engineered to deliver an interactive and responsive user experience. By seamlessly integrating dynamic data updates, clear visual feedback, and accessibility, the component not only enhances the visual appeal of your application but also improves usability. Its ability to handle complex data interactions intuitively makes it an essential tool for user-centric designs.

Studies on user engagement show that responsive, dynamic interfaces like the DataSet component significantly improve user satisfaction and engagement, making applications more appealing and effective.

Efficiency in the Development Process

Incorporating the DataSet component into your project is straightforward. With its compatibility with standard web technologies such as HTML5, CSS, and JavaScript, the component integrates seamlessly into your existing codebase. Its modular and customizable design ensures it can adapt to projects of any size or complexity, accelerating development and enhancing productivity.

Whether you are prototyping a feature or building a production-grade application, the DataSet component simplifies data interaction and presentation, allowing you to focus on delivering value to your users.

Dom Dataset

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';

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 **/

Rest Dataset

Connecting a Dataset Control with Rest API

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 REST API rather than being embedded directly within the DOM. This approach ensures the dataset control fetches data dynamically from the REST endpoint.

Data Source and Dataset Control Connection

To establish the connection between the REST API and the dataset control, use the data-monster-option-rest-endpoint attribute. This attribute specifies the URL of the REST API from which the dataset control fetches data. For example:


<div data-monster-option-rest-endpoint="https://api.example.com/data"></div>

This setup ensures the dataset control interacts directly with the RESTAPI for fetching and interacting with data.

Displaying Records

If the REST API returns a paginated data response and only one record needs to be displayed at a time, set the data-monster-option-objectsperpage attribute to 1. This integrates seamlessly with pagination controls for effortless navigation through API-provided records.

Additional Resources

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

REST Data Integration: Guidance on configuring and using REST APIs with dataset controls.
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';

HTML

<monster-datasource-rest id="myDatasource"
                         data-monster-option-features-autoInit="true"
                         data-monster-option-read-url="/example?limit=1&page=${page}"
></monster-datasource-rest>

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

    <div style="display: grid; grid-template-columns: 1fr 1fr;gap: 0.1rem;width: 600px">
        <div>ID</div>
        <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 **/

Component Design

The DataSet component is designed with the Shadow DOM, providing encapsulation for its internal structure and styling. By using a shadow root, the component's internal elements are isolated from the rest of the webpage, ensuring that external styles or scripts do not interfere with its layout or behavior.

Shadow DOM and Accessibility

The encapsulation provided by the Shadow DOM restricts direct access to the component's internal elements, making them immune to unintended modifications from external scripts or styles. This isolation helps maintain a consistent design and behavior for the DataSet component while ensuring its robustness within a web application.

Customizing Through Exported Parts

While the Shadow DOM limits direct access to the component's internal structure, customization is achievable through exported parts. These parts are explicitly marked for export, allowing developers to style them using CSS without breaking encapsulation. This approach ensures that the component remains visually adaptable while preserving its core functionality.

Available Part Attributes

control: Represents the entire control area of the DataSet, which includes navigation, data display, or any related content. Use this part to style the general layout and appearance of the control section.

Below is an example of how to use CSS part attributes to customize different parts of the DataSet component.


monster-dataset::part(control) {
    background-color: #f9f9f9;
    padding: 12px;
    border-radius: 8px;
}

Explanation of the Example

monster-dataset::part(control): Styles the control area of the DataSet, adding a light background, padding, and rounded corners for a clean appearance.

Accessibility

Accessibility is a core aspect of the DataSet component's design. By adhering to web accessibility best practices, it ensures that all users, including those relying on assistive technologies, can interact with the component effectively. This includes:

Keyboard navigation support for seamless interaction without a mouse.
Compatibility with screen readers to provide meaningful and descriptive output for visually impaired users.
Compliance with ARIA (Accessible Rich Internet Applications) standards to enhance the component's usability.

These considerations make the DataSet component an inclusive and user-friendly addition to any web application.

HTML Structure

<monster-data-set></monster-data-set>

JavaScript Initialization

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

Exported

DataSet

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

undefined

Template definitions

templates.main

string

undefined

Main template

datasource

object

undefined

The datasource

datasource.selector

string

undefined

The selector of the datasource

mapping

object

undefined

The mapping

mapping.data

string

undefined

The data

mapping.index

number

undefined

The index

features

object

undefined

The features

features.refreshOnMutation

boolean

undefined

Refresh on mutation

refreshOnMutation

object

undefined

The refresh on mutation

refreshOnMutation.selector

string

undefined

The selector

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.

Behavioral methods

refresh()3.70.0

Returns

{Promise}

This method is called when the component is created.

write()

Returns

{Promise}

Static methods

[instanceSymbol]()

Returns

{symbol}

This method is called by the instanceof operator.

getCSSStyleSheet()

Returns

[CSSStyleSheet]

getTag()

Returns

{string}

observedAttributes()1.15.0

Returns

{string[]}

This method determines which attributes are to be monitored by attributeChangedCallback().

Lifecycle methods

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

[assembleMethodSymbol]()

This method is responsible for assembling the component. It calls the parent's assemble method first, then initializes control references and event handlers. If the datasource.selector option is provided and is a string, it searches for the corresponding element in the DOM using that selector. If the selector matches exactly one element, it checks if the element is an instance of the Datasource class. If it is, the component's datasourceLinkedElementSymbol property is set to the element, and the component attaches an observer to the datasource's changes. The observer is a function that calls the handleDataSourceChanges method in the context of the component. Additionally, the component attaches an observer to itself, which also calls the handleDataSourceChanges method in the component's context.

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.