diff --git a/playground/monster-bind-with-datasource/index.html b/playground/monster-bind-with-datasource/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..a60356c32192f97fa6236937474f83a80a1c4a90
--- /dev/null
+++ b/playground/monster-bind-with-datasource/index.html
@@ -0,0 +1,218 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Monster-Bind mit Datasource</title>
+ <script src="main.mjs" type="module"></script>
+</head>
+
+<body>
+ <main>
+ <div>
+ <!--
+ Datasource mit fest definieren Daten
+ -->
+
+ <monster-datasource-dom id="data1">
+ <script id="data" type="application/json">
+ {
+ "dataset": [
+ {
+ "erpID": "",
+ "erpName": "",
+ "erpNumber": "",
+ "erpLastUpdate": "2020-01-16T10:27:18",
+ "erpCreation": "2020-01-16T10:27:18",
+ "archived": false,
+ "oid": 1000,
+ "orderDate": "2019-01-16T10:27:18",
+ "orderState": 57,
+ "orderLastStatusChange": "2019-01-16T10:38:53",
+ "customerUID": 30,
+ "customerNotice": "",
+ "billingAddressAID": 16,
+ "deliveryAddressAID": 16,
+ "deliveryNotice": "",
+ "paymentPID": 101,
+ "assigndTickets": "",
+ "resubmissionDate": "1970-01-01T12:00:00",
+ "resubmissionInfo": "",
+ "acquisitionPartnerID": 0,
+ "acquisitionInfo": "",
+ "acquisitionRedirect": null,
+ "acquisitionDate": "1970-01-01T12:00:00",
+ "shippingNotice": "",
+ "shippingDCID": 2,
+ "retoureRID": 0,
+ "companySHID": 1,
+ "salesmanUID": 0,
+ "channelOrderID": "",
+ "channelOrderState": "0",
+ "channelOrderDate": null,
+ "channelOrderData": {}
+ },
+ {
+ "erpID": "",
+ "erpName": "",
+ "erpNumber": "",
+ "erpLastUpdate": "2020-01-16T10:27:18",
+ "erpCreation": "2020-01-16T10:27:18",
+ "archived": false,
+ "oid": 1000,
+ "orderDate": "2019-01-16T10:27:18",
+ "orderState": 57,
+ "orderLastStatusChange": "2019-01-16T10:38:53",
+ "customerUID": 30,
+ "customerNotice": "",
+ "billingAddressAID": 16,
+ "deliveryAddressAID": 16,
+ "deliveryNotice": "",
+ "paymentPID": 101,
+ "assigndTickets": "",
+ "resubmissionDate": "1970-01-01T12:00:00",
+ "resubmissionInfo": "",
+ "acquisitionPartnerID": 0,
+ "acquisitionInfo": "",
+ "acquisitionRedirect": null,
+ "acquisitionDate": "1970-01-01T12:00:00",
+ "shippingNotice": "",
+ "shippingDCID": 2,
+ "retoureRID": 0,
+ "companySHID": 1,
+ "salesmanUID": 0,
+ "channelOrderID": "",
+ "channelOrderState": "0",
+ "channelOrderDate": null,
+ "channelOrderData": {}
+ },
+ {
+ "erpID": "",
+ "erpName": "",
+ "erpNumber": "",
+ "erpLastUpdate": "2020-01-16T10:27:18",
+ "erpCreation": "2020-01-16T10:27:18",
+ "archived": false,
+ "oid": 1001,
+ "orderDate": "2019-01-16T10:27:18",
+ "orderState": 57,
+ "orderLastStatusChange": "2019-02-16T10:38:53",
+ "customerUID": 30,
+ "customerNotice": "",
+ "billingAddressAID": 16,
+ "deliveryAddressAID": 16,
+ "deliveryNotice": "",
+ "paymentPID": 101,
+ "assigndTickets": "",
+ "resubmissionDate": "1970-01-01T12:00:00",
+ "resubmissionInfo": "",
+ "acquisitionPartnerID": 0,
+ "acquisitionInfo": "",
+ "acquisitionRedirect": null,
+ "acquisitionDate": "1970-01-01T12:00:00",
+ "shippingNotice": "",
+ "shippingDCID": 2,
+ "retoureRID": 0,
+ "companySHID": 1,
+ "salesmanUID": 0,
+ "channelOrderID": "",
+ "channelOrderState": "0",
+ "channelOrderDate": null,
+ "channelOrderData": {}
+ },
+ {
+ "erpID": "",
+ "erpName": "",
+ "erpNumber": "",
+ "erpLastUpdate": "2020-01-16T10:27:18",
+ "erpCreation": "2020-01-16T10:27:18",
+ "archived": false,
+ "oid": 1002,
+ "orderDate": "2019-01-16T10:27:18",
+ "orderState": 57,
+ "orderLastStatusChange": "2019-03-16T10:38:53",
+ "customerUID": 30,
+ "customerNotice": "",
+ "billingAddressAID": 16,
+ "deliveryAddressAID": 16,
+ "deliveryNotice": "",
+ "paymentPID": 101,
+ "assigndTickets": "",
+ "resubmissionDate": "1970-01-01T12:00:00",
+ "resubmissionInfo": "",
+ "acquisitionPartnerID": 0,
+ "acquisitionInfo": "",
+ "acquisitionRedirect": null,
+ "acquisitionDate": "1970-01-01T12:00:00",
+ "shippingNotice": "",
+ "shippingDCID": 2,
+ "retoureRID": 0,
+ "companySHID": 1,
+ "salesmanUID": 0,
+ "channelOrderID": "",
+ "channelOrderState": "0",
+ "channelOrderDate": null,
+ "channelOrderData": {}
+ }
+ ],
+ "sys": {
+ "pagination": {
+ "currentPage": 1,
+ "nextOffset": 3,
+ "pages": 1,
+ "prevOffset": null,
+ "offset": 0,
+ "objectsPerPage": 20,
+ "total": 3
+ },
+ "message": "200 OK",
+ "code": 200
+ }
+ }
+ </script>
+ </monster-datasource-dom>
+
+ <h1>Bestellungen</h1>
+
+ <!--
+ Datatable stellt diese Daten dar
+ mit "data-monster-datasource-selector" wird die Datenquelle "#data1" definiert
+ -->
+ <monster-datatable id="test-datatable" data-monster-datasource-selector="#data1">
+ <template id="test-datatable-row">
+
+ <div data-monster-head="martin" data-monster-replace="path:test-datatable-row.martin "></div>
+ <div data-monster-head="OID" data-monster-mode="fixed" data-monster-sortable="oid" data-monster-replace="path:test-datatable-row.oid | tostring"></div>
+ <div data-monster-head="orderLastStatusChange" data-monster-replace="path:test-datatable-row.orderLastStatusChange"></div>
+ <div data-monster-head="customerUID" data-monster-replace="path:test-datatable-row.customerUID"></div>
+ <div data-monster-head="resubmissionDate" data-monster-replace="path:test-datatable-row.resubmissionDate"></div>
+ <div data-monster-head="billingAddressAID" data-monster-replace="path:test-datatable-row.billingAddressAID"></div>
+ <div data-monster-head="deliveryAddressAID" data-monster-replace="path:test-datatable-row.deliveryAddressAID"></div>
+
+ <div data-monster-head="aktion" data-alvine-role="actionHolder">
+ <monster-button data-alvine-role="changeButon" data-monster-attributes="data-alvine-oid path:test-datatable-row.index">
+ <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16">
+ <path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"></path>
+ <path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"></path>
+ </svg>
+ </monster-button>
+ </div>
+ </template>
+ </monster-datatable>
+
+ <h2>eine Bestellung im dataset</h2>
+
+ <monster-dataset id="test-dataset" data-monster-datasource-selector="#data1" >
+ <div data-monster-replace="path:data.oid ">xx</div>
+ <div data-monster-replace="path:data.orderState ">xx</div>
+ <div data-monster-replace="path:data.orderLastStatusChange ">xx</div>
+ <input data-monster-bind="path:data.customerUID" data-monster-attributes="value path:data.customerUID ">
+ </monster-dataset>
+
+ </div>
+
+ </main>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/playground/monster-bind-with-datasource/main.mjs b/playground/monster-bind-with-datasource/main.mjs
new file mode 100644
index 0000000000000000000000000000000000000000..ec3148b281bfcfe64b818b5e73a5c68e2ad84719
--- /dev/null
+++ b/playground/monster-bind-with-datasource/main.mjs
@@ -0,0 +1,60 @@
+
+import "../../source/components/form/button.mjs";
+import "../../source/components/datatable/datatable.mjs";
+import "../../source/components/datatable/dataset.mjs";
+import "../../source/components/datatable/datasource/dom.mjs";
+
+import { findTargetElementFromEvent } from "../../source/dom/events.mjs";
+
+document.addEventListener("monster-button-clicked", (event) => {
+
+ let changeButon = findTargetElementFromEvent(event, 'data-alvine-role', 'changeButon');
+ if (changeButon) {
+ //index des Datensatzes ermitteln
+ //aktuell 23.02.2024 nur über das attribute möglich
+ //der index steht immer hinten
+ let parent = changeButon.closest('[data-alvine-role="actionHolder"]')
+ let reference = parent.getAttribute("data-monster-insert-reference");
+ let index = reference.split("-")[3];
+
+ // Index sezten
+ dataset.setOption('mapping.index', index);
+ }
+
+});
+
+// let body = document.body;
+
+// let updater = new Updater(
+// body,
+// {
+// a: {
+// b: "hello"
+// }
+// }
+// );
+
+// /**
+// * Events an schalten
+// */
+// updater.enableEventProcessing();
+// updater.run().then(() => {
+// console.log('done');
+// });
+
+
+
+
+/**
+ * customElementUpdaterLinkSymbol
+ *
+ * datsource > datenquelle
+ *
+ * dataset
+ * const updaters = getLinkedObjects(self, customElementUpdaterLinkSymbol);
+ *
+ * proxyObserver > Updater
+ *
+ *
+ *
+ */