diff --git a/.gitlab/issue_templates/default.md b/.gitlab/issue_templates/default.md
index 33dcb6d459dda74c19f31d7744d20c2b16dd15aa..624bd36605dcca625906e4e5d754cfa3195f758a 100644
--- a/.gitlab/issue_templates/default.md
+++ b/.gitlab/issue_templates/default.md
@@ -2,11 +2,13 @@
<!---
-* [ ] Can you reproduce the problem in playgrounds?
-* [ ] Are you running the latest version?
-* [ ] Did you check the FAQs?
* [ ] Are you reporting to the correct repository?
-* [ ] May you report a bug? Use the template for bugs (select the template from the drop-down menu above).
+* [ ] Did you check the documentation?
+* [ ] Are you using the latest version of Monster?
+* [ ] Can you reproduce the problem in the playground?
+* [ ] May you report a bug?
+ Use the template for bugs (select the template
+ from the drop-down menu above).
You can erase any parts of this template
not applicable to your Issue.
diff --git a/development/issues/182.js b/development/issues/182.js
deleted file mode 100644
index 019ab4844d1875262614f1cc7f67d039ad16e6ec..0000000000000000000000000000000000000000
--- a/development/issues/182.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import "../../source/components/style/property.pcss";
-import "../../source/components/style/normalize.pcss";
-// import "../../source/components/style/color.pcss";
-// import "../../source/components/style/link.pcss";
-// import "../../source/components/style/button.pcss";
-// import "../../source/components/style/theme.pcss";
-import "../../source/components/style/typography.pcss";
-import "../../source/components/form/select.mjs";
-
-
-
-import "../../source/components/form/button.mjs";
-import "../../source/components/host/overlay.mjs";
-import "../../source/components/datatable/datatable.mjs";
-import "../../source/components/datatable/dataset.mjs";
-import "../../source/components/datatable/datasource/dom.mjs";
-import "../../source/components/datatable/datasource/rest.mjs";
-import "../../source/components/datatable/save-button.mjs";
-
-import "../../source/components/style/color.pcss";
-import "../../source/components/style/theme.pcss";
-import "../../source/components/style/table.pcss";
-import "../../source/components/style/property.pcss";
-import "../../source/components/style/badge.pcss";
-import "../../source/components/style/button.pcss";
-import "../../source/components/style/link.pcss";
-import "../../source/components/style/data-grid.pcss";
-import "../../source/components/style/property.pcss";
-import "../../source/components/style/typography.pcss";
-import "../../source/components/style/display.pcss";
-import "../../source/components/datatable/datasource/rest.mjs";
-import "../../source/components/datatable/filter.mjs";
-import "../../source/components/datatable/filter-button.mjs";
-import "../../source/components/datatable/embedded-pagination.mjs";
-import "../../source/components/datatable/datatable.mjs";
-import "../../source/components/datatable/dataset.mjs";
-import "../../source/components/datatable/status.mjs";
-import "../../source/components/datatable/save-button.mjs";
-import "../../source/components/datatable/change-button.mjs";
-import "../../source/components/datatable/filter/range.mjs";
-import "../../source/components/datatable/filter/select.mjs";
-import "../../source/components/datatable/filter/input.mjs";
-import "../../source/components/datatable/filter/date-range.mjs";
-import {windowReady} from "../../source/dom/ready.mjs";
-import "../../source/components/host/host.mjs";
-import "../../source/components/form/button.mjs";
-import "../../source/components/form/button-bar.mjs";
-import "../../source/components/form/popper-button.mjs";
-import "../../source/components/layout/tabs.mjs";
-import "../../source/components/layout/width-toggle.mjs";
-
-//
-// let form = document.getElementById("form");
-// let checkbox = document.getElementById("checkbox1");
-// console.log(checkbox);
-// checkbox.defaultValue = "true1";
-// checkbox.value = "true2";
-//
-// let butjon = document.getElementById("button");
-// button.addEventListener("click", function() {
-//
-// let formDana = new FormData(form);
-// for (let [key, value] of formData.entries()) {
-// console.log(key, value);
-// }
-//
-//
-// console.log("Button clicked");
-// })
-
-
-//
-// console.log("Hello world");
-// setTimeout(() => {
-// console.log("Hello world");
-// }
\ No newline at end of file
diff --git a/development/issues/closed/183.html b/development/issues/closed/183.html
new file mode 100644
index 0000000000000000000000000000000000000000..10c2b04a61f534db8797e26e4b6f776224fba0dd
--- /dev/null
+++ b/development/issues/closed/183.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
+
+ <title>Issues</title>
+ <script src="./183.js" type="module"></script>
+</head>
+<body>
+
+
+<main>
+
+ <h1>Issues 183</h1>
+ <ul>
+ <li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/183"
+ target="_blank">issues/183</a></li>
+ <li><a href="../../">Back to overview</a></li>
+ </ul>
+
+
+ <monster-datatable-change-button>
+
+
+ </monster-datatable-change-button>
+
+
+
+
+</main>
+
+</body>
+</html>
diff --git a/development/issues/closed/183.js b/development/issues/closed/183.js
new file mode 100644
index 0000000000000000000000000000000000000000..e7ebd4da191b1cc3e26a268ea74939a496f8a2e1
--- /dev/null
+++ b/development/issues/closed/183.js
@@ -0,0 +1,4 @@
+import "../../../source/components/style/property.pcss";
+import "../../../source/components/style/normalize.pcss";
+import "../../../source/components//datatable/change-button.mjs";
+
diff --git a/development/issues/182.html b/development/issues/open/182.html
similarity index 100%
rename from development/issues/182.html
rename to development/issues/open/182.html
diff --git a/development/issues/open/182.js b/development/issues/open/182.js
new file mode 100644
index 0000000000000000000000000000000000000000..d4a892fdfac1e59f62d1ba492da327cc065f68c1
--- /dev/null
+++ b/development/issues/open/182.js
@@ -0,0 +1,76 @@
+import "../../../source/components/style/property.pcss";
+import "../../../source/components/style/normalize.pcss";
+// import "../../../source/components/style/color.pcss";
+// import "../../../source/components/style/link.pcss";
+// import "../../../source/components/style/button.pcss";
+// import "../../../source/components/style/theme.pcss";
+import "../../../source/components/style/typography.pcss";
+import "../../../source/components/form/select.mjs";
+
+
+
+import "../../../source/components/form/button.mjs";
+import "../../../source/components/host/overlay.mjs";
+import "../../../source/components/datatable/datatable.mjs";
+import "../../../source/components/datatable/dataset.mjs";
+import "../../../source/components/datatable/datasource/dom.mjs";
+import "../../../source/components/datatable/datasource/rest.mjs";
+import "../../../source/components/datatable/save-button.mjs";
+
+import "../../../source/components/style/color.pcss";
+import "../../../source/components/style/theme.pcss";
+import "../../../source/components/style/table.pcss";
+import "../../../source/components/style/property.pcss";
+import "../../../source/components/style/badge.pcss";
+import "../../../source/components/style/button.pcss";
+import "../../../source/components/style/link.pcss";
+import "../../../source/components/style/data-grid.pcss";
+import "../../../source/components/style/property.pcss";
+import "../../../source/components/style/typography.pcss";
+import "../../../source/components/style/display.pcss";
+import "../../../source/components/datatable/datasource/rest.mjs";
+import "../../../source/components/datatable/filter.mjs";
+import "../../../source/components/datatable/filter-button.mjs";
+import "../../../source/components/datatable/embedded-pagination.mjs";
+import "../../../source/components/datatable/datatable.mjs";
+import "../../../source/components/datatable/dataset.mjs";
+import "../../../source/components/datatable/status.mjs";
+import "../../../source/components/datatable/save-button.mjs";
+import "../../../source/components/datatable/change-button.mjs";
+import "../../../source/components/datatable/filter/range.mjs";
+import "../../../source/components/datatable/filter/select.mjs";
+import "../../../source/components/datatable/filter/input.mjs";
+import "../../../source/components/datatable/filter/date-range.mjs";
+import {windowReady} from "../../../source/dom/ready.mjs";
+import "../../../source/components/host/host.mjs";
+import "../../../source/components/form/button.mjs";
+import "../../../source/components/form/button-bar.mjs";
+import "../../../source/components/form/popper-button.mjs";
+import "../../../source/components/layout/tabs.mjs";
+import "../../../source/components/layout/width-toggle.mjs";
+
+//
+// let form = document.getElementById("form");
+// let checkbox = document.getElementById("checkbox1");
+// console.log(checkbox);
+// checkbox.defaultValue = "true1";
+// checkbox.value = "true2";
+//
+// let butjon = document.getElementById("button");
+// button.addEventListener("click", function() {
+//
+// let formDana = new FormData(form);
+// for (let [key, value] of formData.entries()) {
+// console.log(key, value);
+// }
+//
+//
+// console.log("Button clicked");
+// })
+
+
+//
+// console.log("Hello world");
+// setTimeout(() => {
+// console.log("Hello world");
+// }
\ No newline at end of file
diff --git a/development/issues/generic.pcss b/development/issues/open/generic.pcss
similarity index 100%
rename from development/issues/generic.pcss
rename to development/issues/open/generic.pcss
diff --git a/source/components/datatable/change-button.mjs b/source/components/datatable/change-button.mjs
index 1d5fbb952eace8466aa488d67aed655e36ed6a13..747c9f2817ca8a458d0491f9029cd4301f0ce8e9 100644
--- a/source/components/datatable/change-button.mjs
+++ b/source/components/datatable/change-button.mjs
@@ -4,7 +4,6 @@
*/
import { instanceSymbol } from "../../constants.mjs";
-import { diff } from "../../data/diff.mjs";
import { addAttributeToken } from "../../dom/attributes.mjs";
import { ATTRIBUTE_ERRORMESSAGE } from "../../dom/constants.mjs";
import {
@@ -12,10 +11,9 @@ import {
CustomElement,
registerCustomElement,
} from "../../dom/customelement.mjs";
-import { isString, isArray } from "../../types/is.mjs";
-import { Observer } from "../../types/observer.mjs";
-import { clone } from "../../util/clone.mjs";
+import { isString } from "../../types/is.mjs";
import { State } from "../form/types/state.mjs";
+import "../form/state-button.mjs";
import { ATTRIBUTE_DATASOURCE_SELECTOR } from "./constants.mjs";
import { ChangeButtonStyleSheet } from "./stylesheet/change-button.mjs";
@@ -38,6 +36,47 @@ const datasetLinkedElementSymbol = Symbol("datasetLinkedElement");
*/
const overlayLinkedElementSymbol = Symbol("overlayLinkedElement");
+
+
+/**
+ * The ColumnBar component is used to show and configure the columns of a datatable.
+ *
+ * <img src="./images/change-button.png">
+ *
+ * You can create this control either by specifying the HTML tag <monster-datatable-change-button />` directly in the HTML or using
+ * Javascript via the `document.createElement('monster-datatable-change-button');` method.
+ *
+ * ```html
+ * <monster-datatable-change-button></monster-datatable-change-button>
+ * ```
+ *
+ * Or you can create this CustomControl directly in Javascript:
+ *
+ * ```js
+ * import '@schukai/monster/components/datatable/change-button.mjs';
+ * document.createElement('monster-datatable-change-button');
+ * ```
+ *
+ * The Body should have a class "hidden" to ensure that the
+ * styles are applied correctly.
+ *
+ * ```css
+ * body.hidden {
+ * visibility: hidden;
+ * }
+ * ```
+ *
+ * @startuml change-button.png
+ * skinparam monochrome true
+ * skinparam shadowing false
+ * HTMLElement <|-- CustomElement
+ * CustomElement <|-- ChangeButton
+ * @enduml
+ *
+ * @copyright schukai GmbH
+ * @memberOf Monster.Components.Datatable
+ * @summary A data set
+ */
class ChangeButton extends CustomElement {
/**
* This method is called by the `instanceof` operator.
diff --git a/source/components/datatable/columnbar.mjs b/source/components/datatable/columnbar.mjs
index 349206876fb42434bfc8c29e9c158f36e6f5af90..9ae6c99b2e2dc0c4a8c284c72168069acd69c1ea 100644
--- a/source/components/datatable/columnbar.mjs
+++ b/source/components/datatable/columnbar.mjs
@@ -51,8 +51,6 @@ const popperInstanceSymbol = Symbol("popperInstance");
*
* <img src="./images/column-bar.png">
*
- * Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library
- *
* You can create this control either by specifying the HTML tag <monster-column-bar />` directly in the HTML or using
* Javascript via the `document.createElement('monster-column-bar');` method.
*
@@ -63,7 +61,7 @@ const popperInstanceSymbol = Symbol("popperInstance");
* Or you can create this CustomControl directly in Javascript:
*
* ```js
- * import '@schukai/component-datatable/source/columnbar.mjs';
+ * import '@schukai/monster/components/datatable/column-bar.mjs';
* document.createElement('monster-column-bar');
* ```
*