Monster.Components.Datatable. DataTable

The DataTable component is used to show the data from 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-datatable');` method.

<monster-datatable></monster-datatable>

Or you can create this CustomControl directly in Javascript:

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

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

body.hidden {
   visibility: hidden;
}

Constructor

new DataTable()

A data table

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

Datasource configuration

Properties
NameTypeDescription
selectorstring

Selector for the datasource

mappingObject

Mapping configuration

Properties
NameTypeDescription
datastring

Data mapping

dataArray

Data

headersArray

Headers

responsiveObject

Responsive configuration

Properties
NameTypeDescription
breakpointnumber

Breakpoint for responsive mode

labelsObject

Labels

Properties
NameTypeDescription
theListContainsNoEntriesstring

Label for empty state

featuresObject

Features

Properties
NameTypeDescription
settingsboolean

Settings feature

footerboolean

Footer feature

autoInitboolean

Auto init feature (init datasource automatically)

templateMappingObject

Template mapping

Properties
NameTypeDescription
row-keystring

Row key

filter-idstring

Filter id

See

(static) instanceSymbol

This method is called by the instanceof operator.

This method is called by the instanceof operator.

Methods

assembleMethodSymbol() → {Monster.Components.Form.Form}

getGridElements(selector) → {NodeListOf.<*>}

Parameters:
NameTypeDescription
selectorstring
Returns:
Type: 
NodeListOf.<*>

(static) getCSSStyleSheet() → {Array.<CSSStyleSheet>}

Returns:
Type: 
Array.<CSSStyleSheet>

(static) getTag() → {string}

Returns:
Type: 
string