Add searching in one column only

TODO: sum works only in general search, not in one column only search
See issue #3

packages/data-table-view/README.md

@@ -19,6 +19,8 @@
     - example `<vpu-data-table-view exportable></pu-data-table-view>`
 - `export-name` (optional, default: 'Data Export'): add name for download file (without extension)
     - example `<vpu-data-table-view exportable export-name="All Items"></pu-data-table-view>`
+- `column-searching` (optional, default false): add search fields for every column
+    - example `<vpu-data-table-view column-searching></pu-data-table-view>`
 
 # Local development
 ```bash

packages/data-table-view/src/vpu-data-table-view-demo.js

 import 'vpu-auth';
 import './vpu-data-table-view.js';
 import {i18n} from './i18n';
-import {html, css, LitElement} from 'lit-element';
+import {css, html, LitElement} from 'lit-element';
 import * as commonUtils from 'vpu-common/utils';
 import * as commonStyles from 'vpu-common/styles';
 
@@ -41,7 +41,8 @@ class DataTableViewDemo extends LitElement {
                 }
                 vdtv1.set_columns([{title:'Bezeichnung'}, {title:'Nummer'}, {title:'Datum'}, null, null])
                     .set_columnDefs(vdtv1_columnDefs)
-                    .set_datatable(tbl);
+                    .set_datatable(tbl)
+                    .on('draw', this.vdtv_preDraw.bind(this));
             }
 
             /*
@@ -55,7 +56,7 @@ class DataTableViewDemo extends LitElement {
                     { targets: [3, 4], searchable: false },
                     { targets: [4], sortable: false }
                 ];
-                vdtv2.set_columns([{title:'Bezeichnung'}, {title:'Nummer'}, {title:'Datum'}, null, null])
+                vdtv2.set_columns([{title:'Bezeichnung-2'}, {title:'Nummer-2'}, {title:'Datum-2'}, null, null])
                     .set_columnDefs(vdtv2_columnDefs)
                     .set_datatable([]);
             }
@@ -86,6 +87,15 @@ class DataTableViewDemo extends LitElement {
         ];
     }
 
+    vdtv_preDraw() {
+        const vdtv1 = this.shadowRoot.querySelector('#vdtv1');
+        const value = vdtv1.columnReduce(1, function (a, b) {
+            return a + b;
+        });
+        console.log('preDraw sum=' + value);
+        this.shadowRoot.querySelector('#id-sum').value = value;
+    }
+
     vdtv2_add_rows() {
         console.log('vdtv2_add_rows() clicked');
         const vdtv2 = this.shadowRoot.querySelector('#vdtv2');
@@ -163,7 +173,9 @@ class DataTableViewDemo extends LitElement {
                 <div class="content">
                     <h4>DataTable: with data, paging and searching AND exportable</h4>
                      <div class="box">
-                        <vpu-data-table-view paging searching exportable export-name="Demo Export"
+                        <label for="id-sum">Sum of Number</label>
+                        <input type="text" readonly value="" name="sum" id="id-sum">
+                        <vpu-data-table-view paging searching exportable export-name="Demo Export" column-searching
                                              lang="${this.lang}" id="vdtv1"></vpu-data-table-view>
                     </div>
                     <h4>DataTable: no data, no paging, no searching</h4>

packages/data-table-view/src/vpu-data-table-view.js

@@ -38,6 +38,7 @@ class DataTableView extends LitElement {
         this.cssStyle = '';
         this.exportable = false;
         this.exportName = 'Data Export';
+        this.columnSearching = false;
     }
 
     setCSSStyle(style) {
@@ -55,7 +56,8 @@ class DataTableView extends LitElement {
             data: { type: Array, attribute: false },
             cssStyle: { type: String, attribute: false },
             exportable: { type: Boolean },
-            exportName: { type: String, attribute: 'export-name' }
+            exportName: { type: String, attribute: 'export-name' },
+            columnSearching: { type: Boolean, attribute: 'column-searching'},
         };
     }
 
@@ -76,14 +78,24 @@ class DataTableView extends LitElement {
         this.table.draw();
         return this;
     }
+    columnSearch(col, str) {
+        this.table.column(col).search(str).draw();
+    }
+    columnReduce(col, func, init=0) {
+        return this.table.column(col, { search: 'applied' }).data().reduce( func, init);
+    }
+    on(eventName, func) {
+        this.table.on(eventName, func);
+        return this;
+    }
 
     set_datatable(data) {
         const lang_obj = this.lang === 'de' ? de : en;
 
-        if (!this.columns.length) {
+        if (typeof this.columns === 'undefined' || !this.columns.length) {
             if (data.length)
                 throw new Error('columns not set-up');
-            return;
+            return this;
         }
 
         this.table = $(this.shadowRoot.querySelector('table')).DataTable({
@@ -136,11 +148,48 @@ class DataTableView extends LitElement {
 
         this.data = data;
 
-        this.table.clear().rows.add(this.data).draw();
+        this.table.clear();
+        if (this.data.length) { this.table.rows.add(this.data); }
+        this.table.draw();
 
         new $.fn.dataTable.Responsive(this.table, {
             details: true
         });
+
+        if (this.columnSearching) {
+            const existing_tfoot = this.shadowRoot.querySelector('table tfoot');
+            if (existing_tfoot === null || !existing_tfoot.hasChildNodes()) {
+                const thisTable = this.table;
+                const fragment = document.createDocumentFragment();
+                const tfoot = document.createElement('tfoot');
+                const tr = document.createElement('tr');
+                const that = this;
+                this.columns.forEach(function (element, index) {
+                    const th = document.createElement('th');
+                    if (element !== null
+                        && (typeof element.visible === 'undefined' || element.visible !== false)
+                        && (typeof element.searchable === 'undefined' || element.searchable !== false)) {
+                        const inp = document.createElement('input');
+                        inp.type = 'text';
+                        inp.placeholder = 'Search ' + element.title;
+                        inp.addEventListener('keyup', function () {
+                            thisTable.column(index).search(inp.value).draw();
+//                            console.log('on keyup: '+index+','+inp.value+' sum = '+that.columnReduce(index, function(a,b){return a+b;}));
+
+                        });
+                        th.appendChild(inp);
+                        console.log('inp for ' + element.title);
+                    }
+                    tr.appendChild(th);
+                    //fragment.appendChild(th);
+                });
+                tfoot.appendChild(tr);
+                fragment.appendChild(tfoot);
+                //this.shadowRoot.querySelector('tfoot').appendChild(fragment);
+                this.shadowRoot.querySelector('table').appendChild(fragment);
+            }
+        }
+        return this;
     }
 
     update(changedProperties) {