crud-table sort and displayName

Author: ivosdc

README.md

@@ -3,8 +3,6 @@
 - or Svelte-component: `import SvelteGenericCrudTable from 'svelte-generic-crud-table'`
 
 A self-containing sortable table component with inline edit option.
-See `<table-pager>` with integrated paginator for pagination.
-[table-pager](https://www.npmjs.com/package/svelte-generic-table-pager/ "CrudTable with paginator Example")
 
 Allows CRUD-operations for Object-Arrays.
 
@@ -20,10 +18,6 @@ npm install svelte-generic-crud-table --save-dev
 ```
 
 
-### State (master):
-[![Build Status](https://travis-ci.com/ivosdc/svelte-generic-crud-table.svg?branch=master)](https://travis-ci.com/ivosdc/svelte-generic-crud-table)
-[![Coverage Status](https://coveralls.io/repos/github/ivosdc/svelte-generic-crud-table/badge.svg?branch=master)](https://coveralls.io/github/ivosdc/svelte-generic-crud-table?branch=master)
-
 # Usage
 Use the svelte-generic-crud-table in your component to show and, if you like, edit,update and delete it's content.
 Just include the table as seen in the example below.
@@ -39,15 +33,16 @@ Only wanted keys of your source array have to be mapped by columns_settings *nam
         options: ['CREATE', 'EDIT', 'DELETE', 'DETAILS'],
         columns_setting: [
             {name: 'id', show: false, edit: true, width: '0px'},
-            {name: 'job', show: true, edit: true, width: '150px', description: 'The job'},
-            {name: 'name', show: true, edit: true, width: '150px', tooltip: true},
+            {name: 'job', displayName: 'Top-Jobs', show: true, edit: true, width: '150px', description: 'The job'},
+            {name: 'name', displayName: 'Account-ID', show: true, edit: true, width: '150px', tooltip: true},
             {name: 'private', show: true, edit: false, width: '200px', description: 'your things', tooltip: true},
             {name: 'html', show: true, edit: true, width: '500px', type: 'html', description: 'You can use HTML', tooltip: true}
         ],
         details_text: 'detail'   // replace the standard icon with an text-link
     }
 ```
 - <b>*name*</b>: the key from your data-array. This is used as column name.
+- *displayName*: An alternative column header if *name* is not matching the needs.
 - *show*: true/false; Should this column displayed? (optional, default: false)
 - *edit*: true/false; Set this field editable or not. (optional, default: false)
 - *width*: px/em; set the field width.  (optional, default: 100px)
@@ -93,8 +88,6 @@ Only wanted keys of your source array have to be mapped by columns_settings *nam
     import {onMount} from 'svelte';
     import {goto} from "@sapper/app";
 
-    const sortStore = [];
-
     let myData = [];
 
     onMount(reload);
@@ -129,30 +122,7 @@ Only wanted keys of your source array have to be mapped by columns_settings *nam
         goto('/project/' + event.detail.body.id);
     }
 
-    function handleSort(event) {
-        const column = event.detail.column;
-        if (sortStore[column] === undefined || sortStore[column] === 'DESC') {
-            sortStore[column] = 'ASC';
-        } else {
-            sortStore[column] = 'DESC';
-        }
-
-        const tableSort = (a, b) => {
-            var keyA = a[column];
-            var keyB = b[column];
-            if (sortStore[column] === 'ASC') {
-                if (keyA < keyB) return -1;
-                if (keyA > keyB) return 1;
-            } else {
-                if (keyA < keyB) return 1;
-                if (keyA > keyB) return -1;
-            }
-            return 0;
-        };
-
-        myData = myData.sort(tableSort);
-    }
-
+    
     const table_config = {
         name: 'Awesome',
         options: ['CREATE', 'EDIT', 'DELETE', 'DETAILS'],
@@ -173,7 +143,6 @@ Only wanted keys of your source array have to be mapped by columns_settings *nam
                             on:update={handleUpdate}
                             on:create={handleCreate}
                             on:details={handleDetail}
-                            on:sort={handleSort}
                             table_config={table_config}
                             table_data={myData}/>
 </main>

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

@@ -14,7 +14,6 @@ let table_config = {
 
 // table-1
 let genericCrudTable = document.getElementById('crud-table-1');
-const sortStore = [];
 
 genericCrudTable.setAttribute('shadowed', 'true');
 genericCrudTable.setAttribute('table_config', JSON.stringify(table_config));
@@ -55,28 +54,3 @@ genericCrudTable.addEventListener('delete', (e) => {
     genericCrudTable.setAttribute('table_data', JSON.stringify(myData));
 });
 
-genericCrudTable.addEventListener('sort', (e) => {
-    console.log('sort: ' + e.detail.column);
-    const column = e.detail.column;
-    if (sortStore[column] === undefined || sortStore[column] === 'DESC') {
-        sortStore[column] = 'ASC';
-    } else {
-        sortStore[column] = 'DESC';
-    }
-
-    const tableSort = (a, b) => {
-        var keyA = a[column];
-        var keyB = b[column];
-        if (sortStore[column] === 'ASC') {
-            if (keyA < keyB) return -1;
-            if (keyA > keyB) return 1;
-        } else {
-            if (keyA < keyB) return 1;
-            if (keyA > keyB) return -1;
-        }
-        return 0;
-    };
-
-    myData = myData.sort(tableSort);
-    genericCrudTable.setAttribute('table_data', JSON.stringify(myData));
-});

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

@@ -14,7 +14,6 @@ let table_config2 = {
 
 // table-2
 let genericCrudTable2 = document.getElementById('crud-table-2');
-const sortStore2 = [];
 
 genericCrudTable2.setAttribute('shadowed', 'true');
 genericCrudTable2.setAttribute('table_config', JSON.stringify(table_config2));
@@ -54,29 +53,3 @@ genericCrudTable2.addEventListener('delete', (e) => {
     }
     genericCrudTable2.setAttribute('table_data', JSON.stringify(myData2));
 });
-
-genericCrudTable2.addEventListener('sort', (e) => {
-    console.log('sort: ' + e.detail.column);
-    const column = e.detail.column;
-    if (sortStore2[column] === undefined || sortStore2[column] === 'DESC') {
-        sortStore2[column] = 'ASC';
-    } else {
-        sortStore2[column] = 'DESC';
-    }
-
-    const tableSort = (a, b) => {
-        var keyA = a[column];
-        var keyB = b[column];
-        if (sortStore2[column] === 'ASC') {
-            if (keyA < keyB) return -1;
-            if (keyA > keyB) return 1;
-        } else {
-            if (keyA < keyB) return 1;
-            if (keyA > keyB) return -1;
-        }
-        return 0;
-    };
-
-    myData2 = myData2.sort(tableSort);
-    genericCrudTable2.setAttribute('table_data', JSON.stringify(myData2));
-});

dist/global.css

@@ -39,6 +39,7 @@ pre {
 }
 
 
+/* crud-table from here */
 :root {
 	--lightgrey1: #f4f4f4;
 	--lightgrey2: #efefef;
@@ -53,7 +54,7 @@ pre {
 	--button2: #4A849F;
 	--button3: #A4C8D8;
 	--textarea-font-size: 1em;
-	--textarea-background-color: #ffffff
+	--textarea-background-color: white;
 }
 
 main {
@@ -94,10 +95,10 @@ main {
 
 .thead {
 	display: inline-flex;
-	padding: .5em 2em .3em;
+	padding: 0 2em;
 	border-radius: inherit;
 	border-bottom: 1px solid var(--grey1);
-	line-height: 1em;
+	min-height: 2em;
 }
 
 .row {
@@ -144,7 +145,7 @@ main {
 }
 
 .td-disabled:hover {
-	background-color: white;
+	background-color: var(--lightgrey1);
 }
 
 .headline {
@@ -157,11 +158,15 @@ main {
 .headline-name:hover {
 	color: var(--darkgrey3);
 	font-weight: bolder;
+	border-top: 1px solid var(--grey1);
+	height: 2em;
 }
 
 .headline-name {
 	cursor: pointer;
-	padding-left: .5em;
+	padding: .5em;
+	border-radius: .2em;
+	border-top: 1px solid transparent;
 }
 
 .options-field {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-generic-crud-table",
-  "version": "1.5.101",
+  "version": "1.6.0",
   "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/ArrayService.mjs

@@ -0,0 +1,43 @@
+function setOrder(sortStore, column, order) {
+    if (order !== undefined) {
+        return order;
+    } else {
+        return (sortStore[column] === undefined || sortStore[column] === 'DESC') ? 'ASC' : 'DESC';
+    }
+}
+
+export function defaultSort(column, sortStore, arr, order) {
+    sortStore[column] = setOrder(sortStore, column, order);
+
+    const tableSort = (a, b) => {
+        let res = 0;
+            if (a[column] < b[column]) {
+                res = -1;
+            }
+            if (a[column] > b[column]) {
+                res = 1;
+            }
+        if (sortStore[column] === 'DESC') {
+            res = res * -1;
+        }
+        return res;
+    };
+    return arr.sort(tableSort);
+}
+
+export function arrayRemove(arr, value) {
+    let temp = clone(arr);
+    return temp.filter(function (_ele, i) {
+        return i !== value;
+    });
+}
+
+export function clone(arr) {
+    return JSON.parse(JSON.stringify(arr))
+}
+
+export default {
+	defaultSort,
+	arrayRemove,
+	clone
+};

src/ArrayService.spec.js

@@ -0,0 +1,49 @@
+import {defaultSort, arrayRemove, clone} from './ArrayService.mjs';
+import {describe, test} from "@jest/globals";
+import "regenerator-runtime/runtime";
+
+describe('Test ArrayService', () => {
+
+    let mySortStore = [];
+
+
+    test('defaultSort() ASC', async () => {
+        let arr = [{A_COLUMN_NAME: '3'},{A_COLUMN_NAME: '2'},{A_COLUMN_NAME:'4'},{A_COLUMN_NAME:'1'}];
+        let actual = defaultSort('A_COLUMN_NAME', mySortStore, arr, 'ASC')
+
+        expect(actual).toEqual([{A_COLUMN_NAME: '1'},{A_COLUMN_NAME: '2'},{A_COLUMN_NAME:'3'},{A_COLUMN_NAME:'4'}]);
+    })
+
+    test('defaultSort() DESC', async () => {
+        let arr = [{A_COLUMN_NAME: '3'},{A_COLUMN_NAME: '2'},{A_COLUMN_NAME:'4'},{A_COLUMN_NAME:'1'},{A_COLUMN_NAME:'4'}];
+        let actual = defaultSort('A_COLUMN_NAME', mySortStore, arr, 'DESC')
+
+        expect(actual).toEqual([{A_COLUMN_NAME:'4'},{A_COLUMN_NAME: '4'},{A_COLUMN_NAME: '3'},{A_COLUMN_NAME:'2'},{A_COLUMN_NAME:'1'}]);
+    })
+
+    test('defaultSort() undefined', async () => {
+        let arr = [{A_COLUMN_NAME: '3'},{A_COLUMN_NAME: '2'},{A_COLUMN_NAME:'4'},{A_COLUMN_NAME:'1'},{A_COLUMN_NAME:'4'}];
+        let actual = defaultSort('A_COLUMN_NAME', mySortStore, arr)
+
+        expect(actual).toEqual([{A_COLUMN_NAME: '1'},{A_COLUMN_NAME: '2'},{A_COLUMN_NAME:'3'},{A_COLUMN_NAME:'4'},{A_COLUMN_NAME:'4'}]);
+    })
+
+    test('arrayRemove()', async () => {
+        let arr = [{A_COLUMN_NAME: '3'},{A_COLUMN_NAME: '2'},{A_COLUMN_NAME:'4'},{A_COLUMN_NAME:'1'}];
+
+        let actual = arrayRemove(arr, 1)
+
+        expect(actual).toEqual([{A_COLUMN_NAME: '3'},{A_COLUMN_NAME:'4'},{A_COLUMN_NAME:'1'}]);
+    })
+
+    test('clone()', async () => {
+        let arr = [{A_COLUMN_NAME: '3'},{A_COLUMN_NAME: '2'},{A_COLUMN_NAME:'4'},{A_COLUMN_NAME:'1'}];
+
+        let actual = clone(arr)
+
+        expect(actual).toStrictEqual(arr);
+        expect(actual === arr).toBeFalsy();
+        expect(actual[0] === arr[0]).toBeFalsy();
+    })
+
+})