@schukai/monster 3.55.0 → 3.55.2

package/source/components/datatable/datatable.mjs

@@ -3,63 +3,63 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
-import {Datasource} from "./datasource.mjs";
+import { Datasource } from "./datasource.mjs";
 import {
-    assembleMethodSymbol,
-    CustomElement,
-    registerCustomElement,
-    getSlottedElements,
+	assembleMethodSymbol,
+	CustomElement,
+	registerCustomElement,
+	getSlottedElements,
 } from "../../dom/customelement.mjs";
-import {findTargetElementFromEvent} from "../../dom/events.mjs";
+import { findTargetElementFromEvent } from "../../dom/events.mjs";
 import {
-    isString,
-    isFunction,
-    isInstance,
-    isObject,
-    isArray,
+	isString,
+	isFunction,
+	isInstance,
+	isObject,
+	isArray,
 } from "../../types/is.mjs";
-import {Observer} from "../../types/observer.mjs";
+import { Observer } from "../../types/observer.mjs";
 import {
-    ATTRIBUTE_DATATABLE_HEAD,
-    ATTRIBUTE_DATATABLE_GRID_TEMPLATE,
-    ATTRIBUTE_DATASOURCE_SELECTOR,
-    ATTRIBUTE_DATATABLE_ALIGN,
-    ATTRIBUTE_DATATABLE_SORTABLE,
-    ATTRIBUTE_DATATABLE_MODE,
-    ATTRIBUTE_DATATABLE_INDEX,
-    ATTRIBUTE_DATATABLE_MODE_HIDDEN,
-    ATTRIBUTE_DATATABLE_MODE_VISIBLE,
-    ATTRIBUTE_DATATABLE_RESPONSIVE_BREAKPOINT,
-    ATTRIBUTE_DATATABLE_MODE_FIXED,
+	ATTRIBUTE_DATATABLE_HEAD,
+	ATTRIBUTE_DATATABLE_GRID_TEMPLATE,
+	ATTRIBUTE_DATASOURCE_SELECTOR,
+	ATTRIBUTE_DATATABLE_ALIGN,
+	ATTRIBUTE_DATATABLE_SORTABLE,
+	ATTRIBUTE_DATATABLE_MODE,
+	ATTRIBUTE_DATATABLE_INDEX,
+	ATTRIBUTE_DATATABLE_MODE_HIDDEN,
+	ATTRIBUTE_DATATABLE_MODE_VISIBLE,
+	ATTRIBUTE_DATATABLE_RESPONSIVE_BREAKPOINT,
+	ATTRIBUTE_DATATABLE_MODE_FIXED,
 } from "./constants.mjs";
-import {instanceSymbol} from "../../constants.mjs";
+import { instanceSymbol } from "../../constants.mjs";
 import {
-    Header,
-    createOrderStatement,
-    DIRECTION_ASC,
-    DIRECTION_DESC,
-    DIRECTION_NONE,
+	Header,
+	createOrderStatement,
+	DIRECTION_ASC,
+	DIRECTION_DESC,
+	DIRECTION_NONE,
 } from "./datatable/header.mjs";
-import {getStoredFilterConfigKey} from "./filter/util.mjs";
-import {DatatableStyleSheet} from "./stylesheet/datatable.mjs";
+import { getStoredFilterConfigKey } from "./filter/util.mjs";
+import { DatatableStyleSheet } from "./stylesheet/datatable.mjs";
 import {
-    handleDataSourceChanges,
-    datasourceLinkedElementSymbol,
+	handleDataSourceChanges,
+	datasourceLinkedElementSymbol,
 } from "./util.mjs";
 import "./columnbar.mjs";
 import "./filter-button.mjs";
-import {getDocument, getWindow} from "../../dom/util.mjs";
-import {addAttributeToken} from "../../dom/attributes.mjs";
-import {ATTRIBUTE_ERRORMESSAGE} from "../../dom/constants.mjs";
-import {getDocumentTranslations} from "../../i18n/translations.mjs";
+import { getDocument, getWindow } from "../../dom/util.mjs";
+import { addAttributeToken } from "../../dom/attributes.mjs";
+import { ATTRIBUTE_ERRORMESSAGE } from "../../dom/constants.mjs";
+import { getDocumentTranslations } from "../../i18n/translations.mjs";
 import "../state/state.mjs";
 import "../host/collapse.mjs";
-import {generateUniqueConfigKey} from "../host/util.mjs";
+import { generateUniqueConfigKey } from "../host/util.mjs";
 
 import "./datasource/dom.mjs";
 import "./datasource/rest.mjs";
 
-export {DataTable};
+export { DataTable };
 
 /**
  * @private
@@ -120,210 +120,209 @@ const columnBarElementSymbol = Symbol("columnBarElement");
  * @summary A data table
  */
 class DataTable extends CustomElement {
-    /**
-     * This method is called by the `instanceof` operator.
-     * @returns {symbol}
-     */
-    static get [instanceSymbol]() {
-        return Symbol.for("@schukai/monster/components/datatable@@instance");
-    }
-
-    /**
-     * To set the options via the html tag the attribute `data-monster-options` must be used.
-     * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
-     *
-     * The individual configuration values can be found in the table.
-     *
-     * @property {Object} templates Template definitions
-     * @property {string} templates.main Main template
-     * @property {Object} datasource Datasource configuration
-     * @property {string} datasource.selector Selector for the datasource
-     * @property {Object} mapping Mapping configuration
-     * @property {string} mapping.data Data mapping
-     * @property {Array} data Data
-     * @property {Array} headers Headers
-     * @property {Object} responsive Responsive configuration
-     * @property {number} responsive.breakpoint Breakpoint for responsive mode
-     * @property {Object} labels Labels
-     * @property {string} labels.theListContainsNoEntries Label for empty state
-     * @property {Object} features Features
-     * @property {boolean} features.settings Settings feature
-     * @property {boolean} features.footer Footer feature
-     * @property {boolean} features.autoInit Auto init feature (init datasource automatically)
-     * @property {Object} templateMapping Template mapping
-     * @property {string} templateMapping.row-key Row key
-     * @property {string} templateMapping.filter-id Filter id
-     **/
-    get defaults() {
-        return Object.assign(
-            {},
-            super.defaults,
-            {
-                templates: {
-                    main: getTemplate(),
-                    emptyState: getEmptyTemplate()
-                },
-
-                datasource: {
-                    selector: null,
-                },
-
-                mapping: {
-                    data: "dataset",
-                },
-
-                data: [],
-                headers: [],
-
-                responsive: {
-                    breakpoint: 800,
-                },
-
-                labels: {
-                    theListContainsNoEntries: "The list contains no entries",
-                },
-
-                features: {
-                    settings: true,
-                    footer: true,
-                    autoInit: true,
-                },
-
-                templateMapping: {
-                    "row-key": null,
-                    "filter-id": null,
-                },
-            },
-            initOptionsFromArguments.call(this),
-        );
-    }
-
-    /**
-     *
-     * @param {string} selector
-     * @returns {NodeListOf<*>}
-     */
-    getGridElements(selector) {
-        return this[gridElementSymbol].querySelectorAll(selector);
-    }
-
-    /**
-     *
-     * @return {string}
-     */
-    static getTag() {
-        return "monster-datatable";
-    }
-
-    /**
-     *
-     * @return {Monster.Components.Form.Form}
-     */
-    [assembleMethodSymbol]() {
-        const rawKey = this.getOption("templateMapping.row-key");
-
-        if (rawKey === null) {
-            if (this.id !== null && this.id !== "") {
-                const rawKey = this.getOption("templateMapping.row-key");
-                if (rawKey === null) {
-                    this.setOption("templateMapping.row-key", this.id + "-row");
-                }
-            } else {
-                this.setOption("templateMapping.row-key", "row");
-            }
-        }
-
-        if (this.id !== null && this.id !== "") {
-            this.setOption("templateMapping.filter-id", "" + this.id + "-filter");
-        } else {
-            this.setOption("templateMapping.filter-id", "filter");
-        }
-
-        super[assembleMethodSymbol]();
-
-        initControlReferences.call(this);
-        initEventHandler.call(this);
-
-        const selector = this.getOption("datasource.selector");
-
-        if (isString(selector)) {
-            const elements = document.querySelectorAll(selector);
-            if (elements.length !== 1) {
-                throw new Error("the selector must match exactly one element");
-            }
-
-            const element = elements[0];
-
-            if (!isInstance(element, Datasource)) {
-                throw new TypeError("the element must be a datasource");
-            }
-
-            this[datasourceLinkedElementSymbol] = element;
-
-            setTimeout(() => {
-                handleDataSourceChanges.call(this);
-                element.datasource.attachObserver(
-                    new Observer(handleDataSourceChanges.bind(this)),
-                );
-            }, 0);
-        }
-
-        getHostConfig
-            .call(this, getColumnVisibilityConfigKey)
-            .then((config) => {
-
-                const headerOrderMap = new Map();
-
-                getHostConfig
-                    .call(this, getStoredOrderConfigKey)
-                    .then((orderConfig) => {
-
-                        if (isArray(orderConfig) || orderConfig.length > 0) {
-                            for (let i = 0; i < orderConfig.length; i++) {
-                                const item = orderConfig[i];
-                                const parts = item.split(" ");
-                                const field = parts[0];
-                                const direction = parts[1] || DIRECTION_ASC;
-                                headerOrderMap.set(field, direction);
-                            }
-                        }
-
-                    }).then(() => {
-
-                        const headers = this.getOption("headers", undefined);
-                        console.log(headers);
-
-                        try {
-                            initGridAndStructs.call(this, config, headerOrderMap);
-                        } catch (error) {
-                            addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error?.message || error.toString());
-                        }
-                        
-                        
-
-
-                        updateColumnBar.call(this);
-
-                    })
-                    .catch((error) => {
-                        addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error?.message || error.toString());
-                    });
-
-
-            })
-            .catch((error) => {
-                addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error?.message || error.toString());
-            })
-
-    }
-
-    /**
-     *
-     * @return {CSSStyleSheet[]}
-     */
-    static getCSSStyleSheet() {
-        return [DatatableStyleSheet];
-    }
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @returns {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/monster/components/datatable@@instance");
+	}
+
+	/**
+	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
+	 *
+	 * The individual configuration values can be found in the table.
+	 *
+	 * @property {Object} templates Template definitions
+	 * @property {string} templates.main Main template
+	 * @property {Object} datasource Datasource configuration
+	 * @property {string} datasource.selector Selector for the datasource
+	 * @property {Object} mapping Mapping configuration
+	 * @property {string} mapping.data Data mapping
+	 * @property {Array} data Data
+	 * @property {Array} headers Headers
+	 * @property {Object} responsive Responsive configuration
+	 * @property {number} responsive.breakpoint Breakpoint for responsive mode
+	 * @property {Object} labels Labels
+	 * @property {string} labels.theListContainsNoEntries Label for empty state
+	 * @property {Object} features Features
+	 * @property {boolean} features.settings Settings feature
+	 * @property {boolean} features.footer Footer feature
+	 * @property {boolean} features.autoInit Auto init feature (init datasource automatically)
+	 * @property {Object} templateMapping Template mapping
+	 * @property {string} templateMapping.row-key Row key
+	 * @property {string} templateMapping.filter-id Filter id
+	 **/
+	get defaults() {
+		return Object.assign(
+			{},
+			super.defaults,
+			{
+				templates: {
+					main: getTemplate(),
+					emptyState: getEmptyTemplate(),
+				},
+
+				datasource: {
+					selector: null,
+				},
+
+				mapping: {
+					data: "dataset",
+				},
+
+				data: [],
+				headers: [],
+
+				responsive: {
+					breakpoint: 800,
+				},
+
+				labels: {
+					theListContainsNoEntries: "The list contains no entries",
+				},
+
+				features: {
+					settings: true,
+					footer: true,
+					autoInit: true,
+				},
+
+				templateMapping: {
+					"row-key": null,
+					"filter-id": null,
+				},
+			},
+			initOptionsFromArguments.call(this),
+		);
+	}
+
+	/**
+	 *
+	 * @param {string} selector
+	 * @returns {NodeListOf<*>}
+	 */
+	getGridElements(selector) {
+		return this[gridElementSymbol].querySelectorAll(selector);
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-datatable";
+	}
+
+	/**
+	 *
+	 * @return {Monster.Components.Form.Form}
+	 */
+	[assembleMethodSymbol]() {
+		const rawKey = this.getOption("templateMapping.row-key");
+
+		if (rawKey === null) {
+			if (this.id !== null && this.id !== "") {
+				const rawKey = this.getOption("templateMapping.row-key");
+				if (rawKey === null) {
+					this.setOption("templateMapping.row-key", this.id + "-row");
+				}
+			} else {
+				this.setOption("templateMapping.row-key", "row");
+			}
+		}
+
+		if (this.id !== null && this.id !== "") {
+			this.setOption("templateMapping.filter-id", "" + this.id + "-filter");
+		} else {
+			this.setOption("templateMapping.filter-id", "filter");
+		}
+
+		super[assembleMethodSymbol]();
+
+		initControlReferences.call(this);
+		initEventHandler.call(this);
+
+		const selector = this.getOption("datasource.selector");
+
+		if (isString(selector)) {
+			const elements = document.querySelectorAll(selector);
+			if (elements.length !== 1) {
+				throw new Error("the selector must match exactly one element");
+			}
+
+			const element = elements[0];
+
+			if (!isInstance(element, Datasource)) {
+				throw new TypeError("the element must be a datasource");
+			}
+
+			this[datasourceLinkedElementSymbol] = element;
+
+			setTimeout(() => {
+				handleDataSourceChanges.call(this);
+				element.datasource.attachObserver(
+					new Observer(handleDataSourceChanges.bind(this)),
+				);
+			}, 0);
+		}
+
+		getHostConfig
+			.call(this, getColumnVisibilityConfigKey)
+			.then((config) => {
+				const headerOrderMap = new Map();
+
+				getHostConfig
+					.call(this, getStoredOrderConfigKey)
+					.then((orderConfig) => {
+						if (isArray(orderConfig) || orderConfig.length > 0) {
+							for (let i = 0; i < orderConfig.length; i++) {
+								const item = orderConfig[i];
+								const parts = item.split(" ");
+								const field = parts[0];
+								const direction = parts[1] || DIRECTION_ASC;
+								headerOrderMap.set(field, direction);
+							}
+						}
+					})
+					.then(() => {
+						try {
+							initGridAndStructs.call(this, config, headerOrderMap);
+						} catch (error) {
+							addAttributeToken(
+								this,
+								ATTRIBUTE_ERRORMESSAGE,
+								error?.message || error.toString(),
+							);
+						}
+
+						updateColumnBar.call(this);
+					})
+					.catch((error) => {
+						addAttributeToken(
+							this,
+							ATTRIBUTE_ERRORMESSAGE,
+							error?.message || error.toString(),
+						);
+					});
+			})
+			.catch((error) => {
+				addAttributeToken(
+					this,
+					ATTRIBUTE_ERRORMESSAGE,
+					error?.message || error.toString(),
+				);
+			});
+	}
+
+	/**
+	 *
+	 * @return {CSSStyleSheet[]}
+	 */
+	static getCSSStyleSheet() {
+		return [DatatableStyleSheet];
+	}
 }
 
 /**
@@ -331,7 +330,7 @@ class DataTable extends CustomElement {
  * @returns {string}
  */
 function getColumnVisibilityConfigKey() {
-    return generateUniqueConfigKey("datatable", this?.id, "columns-visibility");
+	return generateUniqueConfigKey("datatable", this?.id, "columns-visibility");
 }
 
 /**
@@ -339,7 +338,7 @@ function getColumnVisibilityConfigKey() {
  * @returns {string}
  */
 function getFilterConfigKey() {
-    return generateUniqueConfigKey("datatable", this?.id, "filter");
+	return generateUniqueConfigKey("datatable", this?.id, "filter");
 }
 
 /**
@@ -347,281 +346,279 @@ function getFilterConfigKey() {
  * @returns {Promise}
  */
 function getHostConfig(callback) {
-    const document = getDocument();
-    const host = document.querySelector("monster-host");
-
-    if (!(host && this.id)) {
-        return Promise.resolve({});
-    }
-
-    if (!host || !isFunction(host?.getConfig)) {
-        throw new TypeError("the host must be a monster-host");
-    }
-
-    const configKey = callback.call(this);
-    return host.hasConfig(configKey).then((hasConfig) => {
-        if (hasConfig) {
-            return host.getConfig(configKey);
-        } else {
-            return {};
-        }
-    });
-
+	const document = getDocument();
+	const host = document.querySelector("monster-host");
+
+	if (!(host && this.id)) {
+		return Promise.resolve({});
+	}
+
+	if (!host || !isFunction(host?.getConfig)) {
+		throw new TypeError("the host must be a monster-host");
+	}
+
+	const configKey = callback.call(this);
+	return host.hasConfig(configKey).then((hasConfig) => {
+		if (hasConfig) {
+			return host.getConfig(configKey);
+		} else {
+			return {};
+		}
+	});
 }
 
 /**
  * @private
  */
 function updateColumnBar() {
-    if (!this[columnBarElementSymbol]) {
-        return;
-    }
-
-    const columns = [];
-    for (const header of this.getOption("headers")) {
-        const mode = header.getInternal("mode");
-
-        if (mode === ATTRIBUTE_DATATABLE_MODE_FIXED) {
-            continue;
-        }
-
-        columns.push({
-            visible: mode !== ATTRIBUTE_DATATABLE_MODE_HIDDEN,
-            name: header.label,
-            index: header.index,
-        });
-    }
-
-    this[columnBarElementSymbol].setOption("columns", columns);
+	if (!this[columnBarElementSymbol]) {
+		return;
+	}
+
+	const columns = [];
+	for (const header of this.getOption("headers")) {
+		const mode = header.getInternal("mode");
+
+		if (mode === ATTRIBUTE_DATATABLE_MODE_FIXED) {
+			continue;
+		}
+
+		columns.push({
+			visible: mode !== ATTRIBUTE_DATATABLE_MODE_HIDDEN,
+			name: header.label,
+			index: header.index,
+		});
+	}
+
+	this[columnBarElementSymbol].setOption("columns", columns);
 }
 
 /**
  * @private
  */
 function updateHeaderFromColumnBar() {
-    if (!this[columnBarElementSymbol]) {
-        return;
-    }
+	if (!this[columnBarElementSymbol]) {
+		return;
+	}
 
-    const options = this[columnBarElementSymbol].getOption("columns");
-    if (!isArray(options)) return;
+	const options = this[columnBarElementSymbol].getOption("columns");
+	if (!isArray(options)) return;
 
-    const invisibleMap = {};
+	const invisibleMap = {};
 
-    for (let i = 0; i < options.length; i++) {
-        const option = options[i];
-        invisibleMap[option.index] = option.visible;
-    }
+	for (let i = 0; i < options.length; i++) {
+		const option = options[i];
+		invisibleMap[option.index] = option.visible;
+	}
 
-    for (const header of this.getOption("headers")) {
-        const mode = header.getInternal("mode");
+	for (const header of this.getOption("headers")) {
+		const mode = header.getInternal("mode");
 
-        if (mode === ATTRIBUTE_DATATABLE_MODE_FIXED) {
-            continue;
-        }
+		if (mode === ATTRIBUTE_DATATABLE_MODE_FIXED) {
+			continue;
+		}
 
-        if (invisibleMap[header.index] === false) {
-            header.setInternal("mode", ATTRIBUTE_DATATABLE_MODE_HIDDEN);
-        } else {
-            header.setInternal("mode", ATTRIBUTE_DATATABLE_MODE_VISIBLE);
-        }
-    }
+		if (invisibleMap[header.index] === false) {
+			header.setInternal("mode", ATTRIBUTE_DATATABLE_MODE_HIDDEN);
+		} else {
+			header.setInternal("mode", ATTRIBUTE_DATATABLE_MODE_VISIBLE);
+		}
+	}
 }
 
 /**
  * @private
  */
 function updateConfigColumnBar() {
-    if (!this[columnBarElementSymbol]) {
-        return;
-    }
-
-    const options = this[columnBarElementSymbol].getOption("columns");
-    if (!isArray(options)) return;
-
-    const map = {};
-    for (let i = 0; i < options.length; i++) {
-        const option = options[i];
-        map[option.name] = option.visible;
-    }
-
-    const document = getDocument();
-    const host = document.querySelector("monster-host");
-    if (!(host && this.id)) {
-        return;
-    }
-    const configKey = getColumnVisibilityConfigKey.call(this);
-
-    try {
-        host.setConfig(configKey, map);
-    } catch (error) {
-        addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, String(error));
-    }
+	if (!this[columnBarElementSymbol]) {
+		return;
+	}
+
+	const options = this[columnBarElementSymbol].getOption("columns");
+	if (!isArray(options)) return;
+
+	const map = {};
+	for (let i = 0; i < options.length; i++) {
+		const option = options[i];
+		map[option.name] = option.visible;
+	}
+
+	const document = getDocument();
+	const host = document.querySelector("monster-host");
+	if (!(host && this.id)) {
+		return;
+	}
+	const configKey = getColumnVisibilityConfigKey.call(this);
+
+	try {
+		host.setConfig(configKey, map);
+	} catch (error) {
+		addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, String(error));
+	}
 }
 
 /**
  * @private
  */
 function initEventHandler() {
-    const self = this;
-
-    getWindow().addEventListener("resize", (event) => {
-        updateGrid.call(self);
-    });
-
-    self[columnBarElementSymbol].attachObserver(
-        new Observer((e) => {
-            updateHeaderFromColumnBar.call(self);
-            updateGrid.call(self);
-            updateConfigColumnBar.call(self);
-        }),
-    );
-
-    self[gridHeadersElementSymbol].addEventListener("click", function (event) {
-        let element = null;
-        const datasource = self[datasourceLinkedElementSymbol];
-        if (!datasource) {
-            return;
-        }
-
-        element = findTargetElementFromEvent(event, ATTRIBUTE_DATATABLE_SORTABLE);
-        if (element) {
-            const index = element.parentNode.getAttribute(ATTRIBUTE_DATATABLE_INDEX);
-            const headers = self.getOption("headers");
-
-            event.preventDefault();
-
-            headers[index].changeDirection();
-
-            setTimeout(function () {
-                /** hotfix, normally this should be done via the updater, no idea why this is not possible. */
-                element.setAttribute(
-                    ATTRIBUTE_DATATABLE_SORTABLE,
-                    `${headers[index].field} ${headers[index].direction}`,
-                );
-
-                storeOrderStatement.call(self, true);
-
-            }, 0);
-        }
-    });
+	const self = this;
+
+	getWindow().addEventListener("resize", (event) => {
+		updateGrid.call(self);
+	});
+
+	self[columnBarElementSymbol].attachObserver(
+		new Observer((e) => {
+			updateHeaderFromColumnBar.call(self);
+			updateGrid.call(self);
+			updateConfigColumnBar.call(self);
+		}),
+	);
+
+	self[gridHeadersElementSymbol].addEventListener("click", function (event) {
+		let element = null;
+		const datasource = self[datasourceLinkedElementSymbol];
+		if (!datasource) {
+			return;
+		}
+
+		element = findTargetElementFromEvent(event, ATTRIBUTE_DATATABLE_SORTABLE);
+		if (element) {
+			const index = element.parentNode.getAttribute(ATTRIBUTE_DATATABLE_INDEX);
+			const headers = self.getOption("headers");
+
+			event.preventDefault();
+
+			headers[index].changeDirection();
+
+			setTimeout(function () {
+				/** hotfix, normally this should be done via the updater, no idea why this is not possible. */
+				element.setAttribute(
+					ATTRIBUTE_DATATABLE_SORTABLE,
+					`${headers[index].field} ${headers[index].direction}`,
+				);
+
+				storeOrderStatement.call(self, true);
+			}, 0);
+		}
+	});
 }
 
 /**
  * @private
  */
 function initGridAndStructs(hostConfig, headerOrderMap) {
-    const rowID = this.getOption("templateMapping.row-key");
-
-    if (!this[gridElementSymbol]) {
-        throw new Error("no grid element is defined");
-    }
-
-    let template;
-    getSlottedElements.call(this).forEach((e) => {
-        if (e instanceof HTMLTemplateElement && e.id === rowID) {
-            template = e;
-        }
-    });
-
-    if (!template) {
-        throw new Error("no template is defined");
-    }
-
-    const rowCount = template.content.children.length;
-
-    const headers = [];
-
-    for (let i = 0; i < rowCount; i++) {
-        let hClass = "";
-        const row = template.content.children[i];
-
-        let mode = "";
-        if (row.hasAttribute(ATTRIBUTE_DATATABLE_MODE)) {
-            mode = row.getAttribute(ATTRIBUTE_DATATABLE_MODE);
-        }
-
-        let grid = row.getAttribute(ATTRIBUTE_DATATABLE_GRID_TEMPLATE);
-        if (!grid || grid === "" || grid === "auto") {
-            grid = "minmax(0, 1fr)";
-        }
-
-        let label = "";
-        let labelKey = "";
-
-        if (row.hasAttribute(ATTRIBUTE_DATATABLE_HEAD)) {
-            label = row.getAttribute(ATTRIBUTE_DATATABLE_HEAD);
-            labelKey = label;
-
-            try {
-                if (label.startsWith("i18n:")) {
-                    label = label.substring(5, label.length);
-                    label = getDocumentTranslations().getText(label, label);
-                }
-            } catch (e) {
-                label = "i18n error " + label;
-            }
-        }
-
-        if (!label) {
-            label = i + 1 + "";
-            mode = ATTRIBUTE_DATATABLE_MODE_FIXED;
-            labelKey = label;
-        }
-
-        if (isObject(hostConfig) && hostConfig.hasOwnProperty(label)) {
-            if (hostConfig[label] === false) {
-                mode = ATTRIBUTE_DATATABLE_MODE_HIDDEN;
-            } else {
-                mode = ATTRIBUTE_DATATABLE_MODE_VISIBLE;
-            }
-        }
-
-        let align = "";
-        if (row.hasAttribute(ATTRIBUTE_DATATABLE_ALIGN)) {
-            align = row.getAttribute(ATTRIBUTE_DATATABLE_ALIGN);
-        }
-
-        switch (align) {
-            case "center":
-                hClass = "flex-center";
-                break;
-            case "end":
-                hClass = "flex-end";
-                break;
-            case "start":
-                hClass = "flex-start";
-                break;
-            default:
-                hClass = "flex-start";
-        }
-
-        let field = "";
-        if (row.hasAttribute(ATTRIBUTE_DATATABLE_SORTABLE)) {
-            field = row.getAttribute(ATTRIBUTE_DATATABLE_SORTABLE);
-        }
-
-        if (mode === ATTRIBUTE_DATATABLE_MODE_HIDDEN) {
-            hClass += " hidden";
-        }
-
-        const header = new Header();
-        header.setInternals({
-            field: field,
-            label: label,
-            classes: hClass,
-            index: i,
-            mode: mode,
-            grid: grid,
-            labelKey: labelKey,
-            direction: headerOrderMap.get(field) || DIRECTION_NONE,
-        });
-
-        headers.push(header);
-    }
-
-    this.setOption("headers", headers);
-    storeOrderStatement.call(this, this.getOption("features.autoInit"));
+	const rowID = this.getOption("templateMapping.row-key");
+
+	if (!this[gridElementSymbol]) {
+		throw new Error("no grid element is defined");
+	}
+
+	let template;
+	getSlottedElements.call(this).forEach((e) => {
+		if (e instanceof HTMLTemplateElement && e.id === rowID) {
+			template = e;
+		}
+	});
+
+	if (!template) {
+		throw new Error("no template is defined");
+	}
+
+	const rowCount = template.content.children.length;
+
+	const headers = [];
+
+	for (let i = 0; i < rowCount; i++) {
+		let hClass = "";
+		const row = template.content.children[i];
+
+		let mode = "";
+		if (row.hasAttribute(ATTRIBUTE_DATATABLE_MODE)) {
+			mode = row.getAttribute(ATTRIBUTE_DATATABLE_MODE);
+		}
+
+		let grid = row.getAttribute(ATTRIBUTE_DATATABLE_GRID_TEMPLATE);
+		if (!grid || grid === "" || grid === "auto") {
+			grid = "minmax(0, 1fr)";
+		}
+
+		let label = "";
+		let labelKey = "";
+
+		if (row.hasAttribute(ATTRIBUTE_DATATABLE_HEAD)) {
+			label = row.getAttribute(ATTRIBUTE_DATATABLE_HEAD);
+			labelKey = label;
+
+			try {
+				if (label.startsWith("i18n:")) {
+					label = label.substring(5, label.length);
+					label = getDocumentTranslations().getText(label, label);
+				}
+			} catch (e) {
+				label = "i18n error " + label;
+			}
+		}
+
+		if (!label) {
+			label = i + 1 + "";
+			mode = ATTRIBUTE_DATATABLE_MODE_FIXED;
+			labelKey = label;
+		}
+
+		if (isObject(hostConfig) && hostConfig.hasOwnProperty(label)) {
+			if (hostConfig[label] === false) {
+				mode = ATTRIBUTE_DATATABLE_MODE_HIDDEN;
+			} else {
+				mode = ATTRIBUTE_DATATABLE_MODE_VISIBLE;
+			}
+		}
+
+		let align = "";
+		if (row.hasAttribute(ATTRIBUTE_DATATABLE_ALIGN)) {
+			align = row.getAttribute(ATTRIBUTE_DATATABLE_ALIGN);
+		}
+
+		switch (align) {
+			case "center":
+				hClass = "flex-center";
+				break;
+			case "end":
+				hClass = "flex-end";
+				break;
+			case "start":
+				hClass = "flex-start";
+				break;
+			default:
+				hClass = "flex-start";
+		}
+
+		let field = "";
+		if (row.hasAttribute(ATTRIBUTE_DATATABLE_SORTABLE)) {
+			field = row.getAttribute(ATTRIBUTE_DATATABLE_SORTABLE);
+		}
+
+		if (mode === ATTRIBUTE_DATATABLE_MODE_HIDDEN) {
+			hClass += " hidden";
+		}
+
+		const header = new Header();
+		header.setInternals({
+			field: field,
+			label: label,
+			classes: hClass,
+			index: i,
+			mode: mode,
+			grid: grid,
+			labelKey: labelKey,
+			direction: headerOrderMap.get(field) || DIRECTION_NONE,
+		});
+
+		headers.push(header);
+	}
+
+	this.setOption("headers", headers);
+	storeOrderStatement.call(this, this.getOption("features.autoInit"));
 }
 
 /**
@@ -629,81 +626,79 @@ function initGridAndStructs(hostConfig, headerOrderMap) {
  * @returns {string}
  */
 export function getStoredOrderConfigKey() {
-    return generateUniqueConfigKey("datatable", this?.id, "stored-order");
+	return generateUniqueConfigKey("datatable", this?.id, "stored-order");
 }
 
-
 /**
  * @private
  */
 function storeOrderStatement(doFetch) {
-    const headers = this.getOption("headers");
-    const statement = createOrderStatement(headers);
-    setDataSource.call(this, {orderBy: statement}, doFetch);
-
-    const document = getDocument();
-    const host = document.querySelector("monster-host");
-    if (!(host && this.id)) {
-        return;
-    }
-
-    const configKey = getStoredOrderConfigKey.call(this);
-
-    // statement explode with , and remove all empty
-    const list = statement.split(",").filter((item) => item.trim() !== "");
-    if (list.length === 0) {
-        //     host.deleteConfig(configKey);
-        return;
-    }
-
-    host.setConfig(configKey, list);
-
+	const headers = this.getOption("headers");
+	const statement = createOrderStatement(headers);
+	setDataSource.call(this, { orderBy: statement }, doFetch);
+
+	const document = getDocument();
+	const host = document.querySelector("monster-host");
+	if (!(host && this.id)) {
+		return;
+	}
+
+	const configKey = getStoredOrderConfigKey.call(this);
+
+	// statement explode with , and remove all empty
+	const list = statement.split(",").filter((item) => item.trim() !== "");
+	if (list.length === 0) {
+		//     host.deleteConfig(configKey);
+		return;
+	}
+
+	host.setConfig(configKey, list);
 }
 
 /**
  * @private
  */
 function updateGrid() {
-    if (!this[gridElementSymbol]) {
-        throw new Error("no grid element is defined");
-    }
-
-    let gridTemplateColumns = "";
-
-    const headers = this.getOption("headers");
-
-    let styles = "";
-
-    for (let i = 0; i < headers.length; i++) {
-        const header = headers[i];
-
-        if (header.mode === ATTRIBUTE_DATATABLE_MODE_HIDDEN) {
-            styles += `[data-monster-role=datatable]>[data-monster-head="${header.labelKey}"] { display: none; }\n`;
-            styles += `[data-monster-role=datatable-headers]>[data-monster-index="${header.index}"] { display: none; }\n`;
-        } else {
-            gridTemplateColumns += `${header.grid} `;
-        }
-    }
-
-    const sheet = new CSSStyleSheet();
-    if (styles !== "") sheet.replaceSync(styles);
-    this.shadowRoot.adoptedStyleSheets = [...DataTable.getCSSStyleSheet(), sheet];
-
-    const bodyWidth = getDocument().body.getBoundingClientRect().width;
-
-    const breakpoint = this.getOption("responsive.breakpoint");
-
-    if (bodyWidth > breakpoint) {
-        this[
-            gridElementSymbol
-            ].style.gridTemplateColumns = `${gridTemplateColumns}`;
-        this[
-            gridHeadersElementSymbol
-            ].style.gridTemplateColumns = `${gridTemplateColumns}`;
-    } else {
-        this[gridElementSymbol].style.gridTemplateColumns = "auto";
-        this[gridHeadersElementSymbol].style.gridTemplateColumns = "auto";
-    }
+	if (!this[gridElementSymbol]) {
+		throw new Error("no grid element is defined");
+	}
+
+	let gridTemplateColumns = "";
+
+	const headers = this.getOption("headers");
+
+	let styles = "";
+
+	for (let i = 0; i < headers.length; i++) {
+		const header = headers[i];
+
+		if (header.mode === ATTRIBUTE_DATATABLE_MODE_HIDDEN) {
+			styles += `[data-monster-role=datatable]>[data-monster-head="${header.labelKey}"] { display: none; }\n`;
+			styles += `[data-monster-role=datatable-headers]>[data-monster-index="${header.index}"] { display: none; }\n`;
+		} else {
+			gridTemplateColumns += `${header.grid} `;
+		}
+	}
+
+	const sheet = new CSSStyleSheet();
+	if (styles !== "") sheet.replaceSync(styles);
+	this.shadowRoot.adoptedStyleSheets = [...DataTable.getCSSStyleSheet(), sheet];
+
+	const bodyWidth = getDocument().body.getBoundingClientRect().width;
+
+	const breakpoint = this.getOption("responsive.breakpoint");
+
+	if (bodyWidth > breakpoint) {
+		this[
+			gridElementSymbol
+		].style.gridTemplateColumns = `${gridTemplateColumns}`;
+		this[
+			gridHeadersElementSymbol
+		].style.gridTemplateColumns = `${gridTemplateColumns}`;
+	} else {
+		this[gridElementSymbol].style.gridTemplateColumns = "auto";
+		this[gridHeadersElementSymbol].style.gridTemplateColumns = "auto";
+	}
 }
 
 /**
@@ -711,20 +706,20 @@ function updateGrid() {
  * @param {Monster.Components.Datatable.Header[]} headers
  * @param {bool} doFetch
  */
-function setDataSource({orderBy}, doFetch) {
-    const datasource = this[datasourceLinkedElementSymbol];
+function setDataSource({ orderBy }, doFetch) {
+	const datasource = this[datasourceLinkedElementSymbol];
 
-    if (!datasource) {
-        return;
-    }
+	if (!datasource) {
+		return;
+	}
 
-    if (isFunction(datasource?.setParameters)) {
-        datasource.setParameters({orderBy});
-    }
+	if (isFunction(datasource?.setParameters)) {
+		datasource.setParameters({ orderBy });
+	}
 
-    if (doFetch !== false && isFunction(datasource?.fetch)) {
-        datasource.fetch();
-    }
+	if (doFetch !== false && isFunction(datasource?.fetch)) {
+		datasource.fetch();
+	}
 }
 
 /**
@@ -732,20 +727,20 @@ function setDataSource({orderBy}, doFetch) {
  * @return {Monster.Components.Datatable.Form}
  */
 function initControlReferences() {
-    if (!this.shadowRoot) {
-        throw new Error("no shadow-root is defined");
-    }
-
-    this[gridElementSymbol] = this.shadowRoot.querySelector(
-        "[data-monster-role=datatable]",
-    );
-    this[gridHeadersElementSymbol] = this.shadowRoot.querySelector(
-        "[data-monster-role=datatable-headers]",
-    );
-    this[columnBarElementSymbol] =
-        this.shadowRoot.querySelector("monster-column-bar");
-
-    return this;
+	if (!this.shadowRoot) {
+		throw new Error("no shadow-root is defined");
+	}
+
+	this[gridElementSymbol] = this.shadowRoot.querySelector(
+		"[data-monster-role=datatable]",
+	);
+	this[gridHeadersElementSymbol] = this.shadowRoot.querySelector(
+		"[data-monster-role=datatable-headers]",
+	);
+	this[columnBarElementSymbol] =
+		this.shadowRoot.querySelector("monster-column-bar");
+
+	return this;
 }
 
 /**
@@ -755,22 +750,22 @@ function initControlReferences() {
  * @throws {Error} the datasource could not be initialized
  */
 function initOptionsFromArguments() {
-    const options = {};
-    const selector = this.getAttribute(ATTRIBUTE_DATASOURCE_SELECTOR);
-
-    if (selector) {
-        options.datasource = {selector: selector};
-    }
-
-    const breakpoint = this.getAttribute(
-        ATTRIBUTE_DATATABLE_RESPONSIVE_BREAKPOINT,
-    );
-    if (breakpoint) {
-        options.responsive = {};
-        options.responsive.breakpoint = parseInt(breakpoint);
-    }
-
-    return options;
+	const options = {};
+	const selector = this.getAttribute(ATTRIBUTE_DATASOURCE_SELECTOR);
+
+	if (selector) {
+		options.datasource = { selector: selector };
+	}
+
+	const breakpoint = this.getAttribute(
+		ATTRIBUTE_DATATABLE_RESPONSIVE_BREAKPOINT,
+	);
+	if (breakpoint) {
+		options.responsive = {};
+		options.responsive.breakpoint = parseInt(breakpoint);
+	}
+
+	return options;
 }
 
 /**
@@ -778,7 +773,7 @@ function initOptionsFromArguments() {
  * @return {string}
  */
 function getEmptyTemplate() {
-    return `<monster-state data-monster-role="empty-without-action">
+	return `<monster-state data-monster-role="empty-without-action">
     <div part="visual">
         <svg width="4rem" height="4rem" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
             <path d="m21.5 22h-19c-1.378 0-2.5-1.121-2.5-2.5v-7c0-.07.015-.141.044-.205l3.969-8.82c.404-.896 1.299-1.475 2.28-1.475h11.414c.981 0 1.876.579 2.28 1.475l3.969 8.82c.029.064.044.135.044.205v7c0 1.379-1.122 2.5-2.5 2.5zm-20.5-9.393v6.893c0 .827.673 1.5 1.5 1.5h19c.827 0 1.5-.673 1.5-1.5v-6.893l-3.925-8.723c-.242-.536-.779-.884-1.368-.884h-11.414c-.589 0-1.126.348-1.368.885z"/>
@@ -796,8 +791,8 @@ function getEmptyTemplate() {
  * @return {string}
  */
 function getTemplate() {
-    // language=HTML
-    return `
+	// language=HTML
+	return `
         <div data-monster-role="control" part="control">
             <template id="headers-row">
                 <div data-monster-attributes="class path:headers-row.classname,