Header
The Header component is a basic class for the datatable component.
import { Header } from "@schukai/monster/source/components/datatable/datatable/header.mjs";'%3E%3Cpath style='stroke:none;fill-rule:nonzero;fill:%23f03c2e;fill-opacity:1' d='M90.156 41.965 50.036 1.848a5.918 5.918 0 0 0-8.372 0l-8.328 8.332 10.566 10.566a7.03 7.03 0 0 1 7.23 1.684 7.034 7.034 0 0 1 1.669 7.277l10.187 10.184a7.028 7.028 0 0 1 7.278 1.672 7.04 7.04 0 0 1 0 9.957 7.05 7.05 0 0 1-9.965 0 7.044 7.044 0 0 1-1.528-7.66l-9.5-9.497V59.36a7.04 7.04 0 0 1 1.86 11.29 7.04 7.04 0 0 1-9.957 0 7.04 7.04 0 0 1 0-9.958 7.06 7.06 0 0 1 2.304-1.539V33.926a7.049 7.049 0 0 1-3.82-9.234L29.242 14.272 1.73 41.777a5.925 5.925 0 0 0 0 8.371L41.852 90.27a5.925 5.925 0 0 0 8.37 0l39.934-39.934a5.925 5.925 0 0 0 0-8.371'/%3E%3C/g%3E%3C/svg%3E "View source code")
Purpose and scope
The Header component is a basic class for the datatable component.
This page documents the Header class. 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.
Sortable Headers
To enable sorting for individual columns, the attribute data-monster-sortable with the desired field name must be set in the template for the desired column. In this example, the columns id, full_name, country, and username are sortable.
Your individual sorting preferences will then, in the case of a REST data source, be appended to the URL. For example, the URL will look like this:
/example?limit=5&page=${page}&orderBy=${order}The structure of the query string can be modified using the data-monster-order-template attribute in the respective column in the row template. The default value is ${field} ${direction}. Multiple sorting parameters are separated by commas. The comma delimiter can be changed using the data-monster-datasource-orderdelimiter attribute in the monster-datatable tag.
Javascript
import "@schukai/monster/source/components/datatable/datatable.mjs";
import "@schukai/monster/source/components/datatable/embedded-pagination.mjs";
import "@schukai/monster/source/components/datatable/filter.mjs";
import "@schukai/monster/source/components/form/button.mjs";
import "@schukai/monster/source/components/form/state-button.mjs";
import "@schukai/monster/source/components/form/confirm-button.mjs";
import "@schukai/monster/source/components/form/button-bar.mjs";
import "@schukai/monster/source/components/form/field-set.mjs";<script type="module">// import "@schukai/monster/source/components/datatable/datatable.mjs";
// import "@schukai/monster/source/components/datatable/embedded-pagination.mjs";
// import "@schukai/monster/source/components/form/button.mjs";
// import "@schukai/monster/source/components/form/state-button.mjs";
// import "@schukai/monster/source/components/form/confirm-button.mjs";
// import "@schukai/monster/source/components/form/button-bar.mjs";
// import "@schukai/monster/source/components/form/field-set.mjs";</script>HTML
<monster-datasource-rest id="myDatasource"
data-monster-option-features-autoInit="true"
data-monster-option-read-url="/example?limit=5&page=${page}&orderBy=${order}"
></monster-datasource-rest>
<monster-datatable data-monster-datasource-selector="#myDatasource">
<template id="row">
<div data-monster-sortable="id" data-monster-head="id" data-monster-replace="path:row.id"></div>
<div data-monster-sortable="full_name" data-monster-head="full_name" data-monster-replace="path:row.full_name"></div>
<div data-monster-sortable="country" data-monster-head="country" data-monster-replace="path:row.country"></div>
<div data-monster-sortable="username" data-monster-head="username" data-monster-replace="path:row.username"></div>
<div data-monster-head="registered_date" data-monster-replace="path:row.registered_date"></div>
<div data-monster-head="status" data-monster-replace="path:row.status"></div>
</template>
</monster-datatable>Stylesheet
/** no additional stylesheet is defined **/Selectable Row Headers
This example demonstrates how to implement row selection in a datatable. It is recommended to ensure the selection column remains visible and has a restricted width, though this is optional.
When a user selects a row, an event is triggered that can be listened to and handled as needed. Among the available events, the most relevant is the generic monster-datatable-selection-changed.
To perform actions on selected rows, a button can be displayed once a selection is made. The selected rows can be retrieved using the getSelectedRows() method, which returns their indices. These indices can then be used to fetch the corresponding data from the datasource.
To automatically show and hide the action buttons, the attribute data-monster-role="row-action-button" must be set. To prevent layout issues, the enclosing container should have the CSS class monster-button-group.
Javascript
import "@schukai/monster/source/components/datatable/datatable.mjs";
import "@schukai/monster/source/components/datatable/embedded-pagination.mjs";
import "@schukai/monster/source/components/datatable/filter.mjs";
import "@schukai/monster/source/components/form/button.mjs";
import "@schukai/monster/source/components/form/state-button.mjs";
import "@schukai/monster/source/components/form/confirm-button.mjs";
import "@schukai/monster/source/components/form/button-bar.mjs";
import "@schukai/monster/source/components/form/field-set.mjs";
const datatable = document.querySelector("monster-datatable");
const eventHandler = function () {
const selected = datatable.getSelectedRows();
// do something with the selected rows
console.log("Selected rows: ", selected);
}
/**
* Listen for the selection change event on the datatable.
*/
datatable.addEventListener("monster-datatable-selection-changed", eventHandler);<script type="module">// const actionButton = document.getElementById("cur34-button-1")
// const datatable = document.getElementById("cur34");
//
// const eventHandler = function () {
// const selected = datatable.getSelectedRows();
// }
//
// datatable.addEventListener("monster-datatable-selection-changed", eventHandler);</script>HTML
<monster-datasource-dom id="myDatasource">
<script type="application/json">
{
"dataset": [
{
"id": 1,
"name": "John Doe",
"street": "Main Street 1",
"city": "Berlin",
"zipcode": "10115",
"country": "Germany",
"phone": "+49 30 1234.56",
"email": "john.doe@example.com"
},
{
"id": 2,
"name": "Jane Doe",
"street": "Second Avenue 2",
"city": "Munich",
"zipcode": "80331",
"country": "Germany",
"phone": "+49 89 6543.21",
"email": "jane.doe@example.com"
},
{
"id": 3,
"name": "Max Mustermann",
"street": "Example Road 3",
"city": "Hamburg",
"zipcode": "20095",
"country": "Germany",
"phone": "+49 40 1111.11",
"email": "max.mustermann@example.com"
},
{
"id": 4,
"name": "Lena Schmidt",
"street": "Hauptstrasse 4",
"city": "Cologne",
"zipcode": "50667",
"country": "Germany",
"phone": "+49 221 9876.54",
"email": "lena.schmidt@example.com"
},
{
"id": 5,
"name": "Markus Meier",
"street": "Ringstrasse 5",
"city": "Frankfurt",
"zipcode": "60311",
"country": "Germany",
"phone": "+49 69 4321.98",
"email": "markus.meier@example.com"
}
]
}
</script>
</monster-datasource-dom>
<monster-datatable data-monster-datasource-selector="#myDatasource">
<div slot="bar" class="monster-button-group">
<div class="row-action-buttons">
<monster-button data-monster-role="row-action-button" id="action-button">ACTION</monster-button>
</div>
</div>
<template id="row">
<div data-monster-grid-template="2rem" data-monster-mode="fixed" data-monster-head="id" data-monster-replace="path:row.id"></div>
<div data-monster-grid-template="2rem" data-monster-mode="fixed" data-monster-features="select"><input type="checkbox" data-monster-role="select-row"></div>
<div data-monster-head="name" data-monster-replace="path:row.name"></div>
<div data-monster-head="street" data-monster-replace="path:row.street"></div>
<div data-monster-head="city" data-monster-replace="path:row.city"></div>
<div data-monster-head="country" data-monster-replace="path:row.country"></div>
<div data-monster-head="phone" data-monster-replace="path:row.phone"></div>
<div data-monster-head="email" data-monster-replace="path:row.email"></div>
</template>
</monster-datatable>Stylesheet
/** no additional stylesheet is defined **/Component Design
Header coordinates column labels, ordering, selection, and column-level actions for a datatable.
Composition
The header is rendered as part of its owning datatable rather than as an independent custom element. Configure it through the documented datatable column model.
HTML Structure
Header is not registered as a custom element.JavaScript Initialization
import { Header } from "@schukai/monster/source/components/datatable/datatable/header.mjs";Exported
Header, DIRECTION_ASC, DIRECTION_DESC, DIRECTION_NONE, createOrderStatementDerived from
BaseOptions
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 Base.
- 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 Base.
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 Base.
Constructor
constructor()Structural methods
setDirection(direction)direction{string}: direction
Static methods
[instanceSymbol]()- {symbol}
instanceof operator.Other methods
changeDirection()classes(classes)classes{string}: classes
classes()- {string}
direction(direction)direction{string}: direction
direction()- {string}
field(field)field{string}: field
field()- {string}
grid()- {string}
html()- {string}
index(index)index{number}: index
index()- {string}
initialWidth(initialWidth)initialWidth
initialWidth()internalDefaults()- {object}
label(label)label{string}: label
label()- {string}
labelKey(labelKey)labelKey
labelKey()- {string}
mode()- {string}
order()- {string}
orderTemplate(orderTemplate)orderTemplate
orderTemplate()resizable(resizable)resizable
resizable()Events
This component does not fire any public events. It may fire events that are inherited from its parent classes.