Class: DataTable

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

Copyright: schukai GmbH

Members

defaults

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

Properties

Name Type Description

templates

Object

Template definitions

Properties

Name	Type	Description
`main`	string	Main template

datasource

Object

Datasource configuration

Properties

Name	Type	Description
`selector`	string	Selector for the datasource

mapping

Object

Mapping configuration

Properties

Name	Type	Description
`data`	string	Data mapping

data

Array

Data

headers

Array

Headers

responsive

Object

Responsive configuration

Properties

Name	Type	Description
`breakpoint`	number	Breakpoint for responsive mode

labels

Object

Labels

Properties

Name	Type	Description
`theListContainsNoEntries`	string	Label for empty state

classes

Object

Classes

Properties

Name	Type	Description
`container`	string	Container class

features

Object

Features

Properties

Name	Type	Description
`settings`	boolean	Settings feature
`footer`	boolean	Footer feature
`autoInit`	boolean	Auto init feature (init datasource automatically)

templateMapping

Object

Template mapping

Properties

Name	Type	Description
`row-key`	string	Row key
`filter-id`	string	Filter id

See: https://monsterjs.org/en/doc/#configurate-a-monster-control The individual configuration values can be found in the table.

(static) instanceSymbol

This method is called by the instanceof operator.

Methods

addRow(data) → {Monster.Components.Datatable.DataTable}

Add a row to the datatable

Parameters:

Name	Type	Description
`data`	Object

Returns:

Type:: Monster.Components.Datatable.DataTable

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

Returns:

Type:: Monster.Components.Form.Form

copyRow(fromIndex, toIndex) → {Monster.Components.Datatable.DataTable}

Copy a row from the datatable

Parameters:

Name	Type	Description
`fromIndex`	number
`toIndex`	number

Returns:

Type:: Monster.Components.Datatable.DataTable

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

Parameters:

Name	Type	Description
`selector`	string

Returns:

Type:: NodeListOf.<*>

removeRow(index) → {Monster.Components.Datatable.DataTable}

Remove a row from the datatable

Parameters:

Name	Type	Description
`index`

Returns:

Type:: Monster.Components.Datatable.DataTable

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

Returns:

Type:: Array.<CSSStyleSheet>

(static) getTag() → {string}

Returns:

Type:: string