Monster.Components.Datatable. DataSet

The data set component is used to show the data of a data source.

Dependencies: the system uses functions of the monsterjs library

You can create this control either by specifying the HTML tagdirectly in the HTML or using Javascript via thedocument.createElement('monster-dataset');` method.

<monster-dataset></monster-dataset>

Or you can create this CustomControl directly in Javascript:

import '@schukai/component-datatable/source/dataset.mjs';
document.createElement('monster-dataset');

The Body should have a class "hidden" to ensure that the styles are applied correctly.

body.hidden {
   visibility: hidden;
}

Constructor

new DataSet()

A data set

Members

defaults

To set the options via the html tag the attribute data-monster-options must be used.

To set the options via the html tag the attribute data-monster-options must be used.

Properties
NameTypeDescription
templatesObject

Template definitions

Properties
NameTypeDescription
mainstring

Main template

datasourceobject

The datasource

Properties
NameTypeDescription
selectorstring

The selector of the datasource

mappingobject

The mapping

Properties
NameTypeDescription
datastring

The data

indexnumber

The index

dataArray

The data

See

(static) instanceSymbol

This method is called by the instanceof operator.

This method is called by the instanceof operator.

(static) observedAttributes

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

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

Since
  • 1.15.0

Methods

assembleMethodSymbol()

This method is responsible for assembling the component.

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.

(static) getCSSStyleSheet()

Returns:

[CSSStyleSheet]

(static) getTag() → {string}

Returns:
Type: 
string