fix default value for configured field width

Author: ivosdc

README.md

@@ -114,10 +114,10 @@ Just include the table as seen in the example below.
                                 name: 'Awesome:',
                                 options: ['CREATE', 'EDIT', 'DELETE', 'DETAILS'],
                                 columns_setting: [
-                                    {name: 'id', show: false, edit: true, size: '200px'},
-                                    {name: 'name', show: true, edit: true, size: '200px'},
-                                    {name: 'why', show: true, edit: true, size: '200px'},
-                                    {name: 'sthg', show: true, edit: false, size: '200px'}
+                                    {name: 'id', show: false, edit: true, width: '200px'},
+                                    {name: 'name', show: true, edit: true, width: '200px'},
+                                    {name: 'why', show: true, edit: true, width: '200px'},
+                                    {name: 'sthg', show: true, edit: false, width: '200px'}
                                 ]
                             }}
                             table_data={page_data}></SvelteGenericCrudTable>

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, 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'}
+        {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'}
     ]
 }
 

package.json

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

@@ -161,7 +161,7 @@
                             {#each table_config.columns_setting as elem}
                             <!-- /* istanbul ignore next line */ -->
                                 <td class="headline {genericCrudTable.isShowField(elem.name) === false ? 'hidden' : 'shown'}"
-                                    style="width:{genericCrudTable.getShowFieldWidth(elem.name)}"
+                                    style="max-width:{genericCrudTable.getShowFieldWidth(elem.name)}"
                                     aria-label="Sort{elem.name}"
                                     on:click={(e) => handleSort(elem.name, e)}>
                                     <textarea class="sortable"
@@ -185,7 +185,7 @@
                             <!-- /* istanbul ignore next */ -->
                                 {#if (column_order.name === genericCrudTable.getKey(elem))}
                                 <td class="{genericCrudTable.isShowField(column_order.name) === false ? 'hidden' : 'shown'}"
-                                    style="width:{genericCrudTable.getShowFieldWidth(column_order.name)}">
+                                    style="max-width:{genericCrudTable.getShowFieldWidth(column_order.name)}">
                                     <textarea id={name + column_order.name + i}
                                               aria-label={name + column_order.name + i}
                                               disabled>{table_data[i][column_order.name]}</textarea>
@@ -296,7 +296,6 @@
         text-align: left;
         border-collapse: collapse;
         table-layout: fixed;
-        width: 100%;
         margin-left: 1em;
     }
 

src/SvelteGenericCrudTableService.js

@@ -134,19 +134,18 @@ export class SvelteGenericCrudTableService {
     }
 
     getShowFieldWidth(field) {
-        return (this.getColumnSetting('width', field, '100px') !== undefined) ? this.getColumnSetting('width', field, '100px') : '';
+        return (this.isShowField(field)) ? this.getColumnSetting('width', field, '100px') : 0;
     }
 
     getColumnSetting(attr, column, preset) {
-        let val = preset;
-        let column_setting = {};
+        let column_setting = [];
         this.table_config.columns_setting.forEach((elem) => {
             if (elem.name === column) {
                 column_setting = elem;
             }
         });
 
-        return column_setting[attr];
+        return (column_setting[attr] !== undefined) ? column_setting[attr] : preset;
     }
 }
 

src/SvelteGenericCrudTableService.spec.js

@@ -268,7 +268,7 @@ function runTest(shadowed) {
         const genericCrudTable = new SvelteGenericCrudTableService(config, shadowed);
         let actual = genericCrudTable.getShowFieldWidth('name');
 
-        expect(actual).toBe('');
+        expect(actual).toBe('100px');
     })
 
 };