minor fixes examples readme

Author: ivosdc

README.md

@@ -68,7 +68,7 @@ Just include the table as seen in the example below.
 <table-pager></table-pager>
 ```
 
-###  Svelte-Component:
+###  Svelte-Component - implementation example:
 ```
     import SvelteGenericCrudTable from "svelte-generic-crud-table";
     import GenericTablePager from "svelte-generic-table-pager";
@@ -85,14 +85,16 @@ Just include the table as seen in the example below.
         get().then( (result) => {
                 myData = result;
         }).catch((error) => {
-           // throw new Error('refresh');
         }).finally(() =>{
-       //--- initialize the component ---!
-            let elem = document.getElementById('right');
-            elem.click();
+            initComponent();
         });
     }
 
+    function initComponent() {
+        let elem = document.getElementById('right');
+        elem.click();
+    }
+
     function handleCreate(event) {
         post({name: "new entry"})
                 .then(() => {

dist/crud-table-config-html.js

@@ -3,10 +3,10 @@ let table_config = {
     name: 'Awesome',
     options: ['CREATE', 'EDIT', 'DELETE', 'DETAILS'],
     columns_setting: [
-        {name: 'id', show: false, edit: true, width: '200px'},
-        {name: 'job', show: true, edit: true, width: '100px'},
-        {name: 'name', show: true, edit: true, width: '200px'},
-        {name: 'private', show: true, edit: false, width: '200px'}
+        {name: 'id', show: false, edit: true, size: '200px'},
+        {name: 'job', show: true, edit: true, size: '200px'},
+        {name: 'name', show: true, edit: true, size: '200px'},
+        {name: 'private', show: true, edit: false, size: '200px'}
     ]
 }
 
@@ -31,7 +31,6 @@ genericCrudTable.addEventListener('details', (e) => {
 genericCrudTable.addEventListener('update', (e) => {
     console.log('update');
     console.log(e.detail.body);
-    let BreakException = {};
     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;

dist/test-data.js

@@ -6,6 +6,18 @@ let myData = [
     {id: '131', name: 'John', job: 'tester', private: 'books'},
     {id: '132', name: 'Alice', job: 'code', private: 'OSS'},
     {id: '133', name: 'Nicole', job: 'design', private: 'painting'},
+    {id: '128', name: 'myRealName', job: 'hmm', private: 'personal info'},
+    {id: '129', name: 'Your Name', job: 'no', private: '122/456789'},
+    {id: '130', name: 'Jim', job: 'code', private: '[email protected]'},
+    {id: '131', name: 'John', job: 'tester', private: 'books'},
+    {id: '132', name: 'Alice', job: 'code', private: 'OSS'},
+    {id: '133', name: 'Nicole', job: 'design', private: 'painting'},
+    {id: '128', name: 'myRealName', job: 'hmm', private: 'personal info'},
+    {id: '129', name: 'Your Name', job: 'no', private: '122/456789'},
+    {id: '130', name: 'Jim', job: 'code', private: '[email protected]'},
+    {id: '131', name: 'John', job: 'tester', private: 'books'},
+    {id: '132', name: 'Alice', job: 'code', private: 'OSS'},
+    {id: '133', name: 'Nicole', job: 'design', private: 'painting'},
     {id: '134', name: 'Denis', job: 'coder', private: 'sports'},
     {id: '135', name: 'Marc', job: 'trainer', private: 'rc models'},
     {id: '136', name: 'Timme', job: 'diverse', private: 'timme'},

package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-generic-crud-table",
-  "version": "1.5.20",
+  "version": "1.5.21",
   "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",

src/SvelteGenericCrudTable.svelte

@@ -136,7 +136,6 @@
         dispatcher('sort', column, event);
     }
 
-
 </script>
 
 <main>
@@ -424,11 +423,4 @@
         max-height: 1.3em;
     }
 
-    .disable-css-transitions {
-        -webkit-transition: none !important;
-        -moz-transition: none !important;
-        -o-transition: none !important;
-        transition: none !important;
-    }
-
 </style>