example with multiple tables

Author: ivosdc

dist/array-utils.js

@@ -1,9 +1,4 @@
 
-function refresh(table) {
-    table.setAttribute('table_data', JSON.stringify({}));
-    table.setAttribute('table_data', JSON.stringify(myData));
-}
-
 function arrayRemove(arr, value) {
     return arr.filter(function (ele, i) {
         return i !== value;

dist/build/crud-table.js

@@ -7,7 +7,7 @@ let table_config2 = {
         {name: 'name', show: true, edit: true, width: '150px', tooltip: true},
         {name: 'job', show: true, edit: true, width: '150px', description: 'The job'},
         {name: 'private', show: true, edit: true, width: '200px', description: 'your things', tooltip: true},
-        {name: 'html', show: true, edit: true, width: '500px', type: 'html', description: 'You can use HTML', tooltip: true}
+        {name: 'html', show: true, edit: true, width: '150px', type: 'html', description: 'You can use HTML', tooltip: true}
     ],
     row_settings: {height: '1.3em'}
 }
@@ -17,12 +17,12 @@ let genericCrudTable2 = document.getElementById('crud-table-2');
 const sortStore2 = [];
 
 genericCrudTable2.setAttribute('table_config', JSON.stringify(table_config2));
-genericCrudTable2.setAttribute('table_data', JSON.stringify(myData));
+genericCrudTable2.setAttribute('table_data', JSON.stringify(myData2));
 
 genericCrudTable2.addEventListener('create', () => {
     console.log('create');
-    myData.unshift({id: Date.now().toString(), name: 'A_NEW', job: 'none', private: 'set hard', html: 'a <b>b</b> <i>c</i>'});
-    refresh();
+    myData2.unshift({id: Date.now().toString(), name: 'A_NEW', job: 'none', private: 'set hard', html: 'a <b>b</b> <i>c</i>'});
+    genericCrudTable2.setAttribute('table_data', JSON.stringify(myData2));
 });
 
 genericCrudTable2.addEventListener('details', (e) => {
@@ -33,25 +33,25 @@ genericCrudTable2.addEventListener('details', (e) => {
 genericCrudTable2.addEventListener('update', (e) => {
     console.log('update');
     console.log(e.detail.body);
-    for(let i = 0; i < myData.length; i++) {
-        if (JSON.stringify(myData[i]) === JSON.stringify(table_data[e.detail.id])) {
-            myData[i] = e.detail.body;
+    for(let i = 0; i < myData2.length; i++) {
+        if (JSON.stringify(myData2[i]) === JSON.stringify(table_data[e.detail.id])) {
+            myData2[i] = e.detail.body;
             break;
         }
     }
-    refresh(genericCrudTable2);
+    genericCrudTable2.setAttribute('table_data', JSON.stringify(myData2));
 });
 
 genericCrudTable2.addEventListener('delete', (e) => {
     console.log('delete: ' + JSON.stringify(e.detail.body));
     console.log('offset in view:' + e.detail.id);
-    for(let i = 0; i < myData.length; i++) {
-        if (JSON.stringify(myData[i]) === JSON.stringify(myData[e.detail.id])) {
-            myData = arrayRemove(myData, i)
+    for(let i = 0; i < myData2.length; i++) {
+        if (JSON.stringify(myData2[i]) === JSON.stringify(myData2[e.detail.id])) {
+            myData2 = arrayRemove(myData2, i)
             break;
         }
     }
-    refresh(genericCrudTable2);
+    genericCrudTable2.setAttribute('table_data', JSON.stringify(myData2));
 });
 
 genericCrudTable2.addEventListener('sort', (e) => {
@@ -76,6 +76,6 @@ genericCrudTable2.addEventListener('sort', (e) => {
         return 0;
     };
 
-    myData = myData.sort(tableSort);
-    refresh(genericCrudTable2);
+    myData2 = myData2.sort(tableSort);
+    genericCrudTable2.setAttribute('table_data', JSON.stringify(myData2));
 });

dist/build/crud-table.mjs

@@ -14,6 +14,12 @@ <h1>&lt;crud-table&gt;&lt;/crud-table&gt;</h1>
 <p>Agnostic web-component for object-arrays with CRUD functionality.</p>
 <span style="background-color: #dddddd; padding: 0.4em; display:inline-block">&gt; npm install svelte-generic-crud-table --save-dev</span>
 <p></p>
+<hr>
+<p>Table 1:</p>
+<crud-table id="crud-table-2"></crud-table>
+<br>
+<hr>
+<p>Table 2 configuration example:</p>
 <blockquote><pre><code>
 const table_config = {
     name: 'Awesome',
@@ -28,7 +34,6 @@ <h1>&lt;crud-table&gt;&lt;/crud-table&gt;</h1>
     details_text: 'detail'   // replace the standard icon with an text-link
 }
 </code></pre></blockquote>
-<hr>
 <crud-table id="crud-table-1"></crud-table>
 <hr>
 </span style="text-align: right"><a href="https://ivolution.one">ivolution.one product - MIT License</a>
@@ -44,7 +49,9 @@ <h1>&lt;crud-table&gt;&lt;/crud-table&gt;</h1>
     <img src="https://github.com/ivosdc/svelte-generic-crud-table/raw/master/assets/donate.gif" title="donate">
 </a></p>
 </body>
-<script src='test-data.js'></script>
 <script src='array-utils.js'></script>
+<script src='test-data.js'></script>
 <script src='crud-table-1-config-html.js'></script>
+<script src='test-data2.js'></script>
+<script src='crud-table-2-config-html.js'></script>
 </html>

dist/crud-table-2-config-html.js

@@ -1,6 +1,6 @@
 {
   "name": "svelte-generic-crud-table",
-  "version": "1.5.82",
+  "version": "1.5.83",
   "description": "<crud-table> renders object-arrays with options-panel and inline edit per row. Dispatches events for ongoing data handling. As self-containing webcomponent or for Svelte in 60KB",
   "main": "dist/build/crud-table.js",
   "module": "dist/build/crud-table.mjs",

dist/index.html

@@ -8,9 +8,6 @@
     const CREATE = 'CREATE';
     const DETAILS = 'DETAILS';
 
-    const SHOW = true;
-    const HIDE = false;
-
     const table_config_default = {
         name: 'crud-table',
         options: ['CREATE', 'EDIT', 'DELETE', 'DETAILS'],
@@ -133,8 +130,8 @@
     const columnsWidth = [];
     const columnsResize = [];
 
-    function tableNameToId(name) {
-        return name.replace(':', '').replace(' ', '');
+    function tableNameToId(tableName) {
+        return tableName.replace(':', '').replace(' ', '');
     }
 
     function handleResize(event) {