Merge pull request #38 from pennions/feat/flightkit-table-hide-rows

feat(flightkit): Table now is able to hide rows based on values in a column

dist/flightkit-v0.0.18/flightkit.js → dist/flightkit-v0.0.19/flightkit.js

@@ -505,9 +505,11 @@
         _selectedIds = new Set(); /** used to sync selections */
         _templates = {}; /** html templates to use for columns and caption/tfoot */
         _templateClasses = {};
+        _hideValues = [];
+        _hideColumn = "";
 
         static get observedAttributes() {
-            return ['contents', 'columns', 'order', 'filter', 'selection-property', 'templates', 'annotations'];
+            return ['contents', 'columns', 'order', 'filter', 'selection-property', 'templates', 'annotations', 'hide'];
         };
 
         get columnOrder() {
@@ -582,6 +584,7 @@
             this.setColumnOrder(this.getAttribute('columns'));
             this.filter = this.getAttribute('filter') || '';
             this.setAnnotations(this.getAttribute('annotations'));
+            this.setHiddenRows(this.getAttribute('hide'));
 
             const presetOrder = this.getAttribute('order');
             if (presetOrder) {
@@ -639,6 +642,10 @@
                     this.setAnnotations(newValue);
                     break;
                 }
+                case "hide": {
+                    this.setHiddenRows(newValue);
+                    break;
+                }
             }
             /** in Vue3 this is not triggered. You need to set a :key property and handle that */
             this.createHtml();
@@ -817,6 +824,19 @@
             }
         }
 
+        /** signature: column|value1,value2,value3 */
+        setHiddenRows(hideRows) {
+            if (hideRows) {
+                const parts = hideRows.split("|");
+                this._hideColumn = parts[0];
+                this._hideValues = parts[1].split(',');
+            }
+            else {
+                this._hideValues = [];
+                this._hideColumn = "";
+            }
+        }
+
         analyzeData(value) {
             /** reset */
             this.properties = new Set();
@@ -1035,6 +1055,9 @@
         createBody(data) {
             const tableBody = document.createElement('tbody');
             for (const rowContent of data) {
+                /** check if we should hide this row */
+                if (rowContent[this._hideColumn] && this._hideValues.includes(rowContent[this._hideColumn].toString())) continue;
+
                 const tableRow = this.createRow(rowContent);
                 tableBody.append(tableRow);
             }