feat: add hide column configuration property (#1151)

akveo · Oct 29, 2020 · 0d43219 · 0d43219
1 parent b129d6f
commit 0d43219
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 7 deletions.
diff --git a/projects/demo/src/app/pages/documentation/documentation.component.html b/projects/demo/src/app/pages/documentation/documentation.component.html
@@ -88,6 +88,14 @@ <h3><a id="configuration" class="anchor" href="#configuration" aria-hidden="true
         Column width, example: <span class="highlight">'20px'</span>, <span class="highlight">'20%'</span>
       </td>
     </tr>
+    <tr>
+      <td>hide</td>
+      <td><span class="highlight">boolean</span></td>
+      <td>false</td>
+      <td>
+        Whether to hide this column or not
+      </td>
+    </tr>
     <tr>
       <td>editable</td>
       <td><span class="highlight">boolean</span></td>

diff --git a/projects/ng2-smart-table/src/lib/components/tbody/tbody.component.html b/projects/ng2-smart-table/src/lib/components/tbody/tbody.component.html
@@ -18,7 +18,7 @@
    <td *ngIf="row.isInEditing && showActionColumnLeft"  class="ng2-smart-actions">
     <ng2-st-tbody-create-cancel [grid]="grid" [row]="row" [editConfirm]="editConfirm"></ng2-st-tbody-create-cancel>
   </td>
-  <td *ngFor="let cell of row.cells">
+  <td *ngFor="let cell of getVisibleCells(row.cells)">
     <ng2-smart-table-cell [cell]="cell"
                           [grid]="grid"
                           [row]="row"

diff --git a/projects/ng2-smart-table/src/lib/components/tbody/tbody.component.ts b/projects/ng2-smart-table/src/lib/components/tbody/tbody.component.ts
@@ -1,9 +1,8 @@
 import {Component, Input, Output, EventEmitter, } from '@angular/core';
 
 import { Grid } from '../../lib/grid';
-import { Row } from '../../lib/data-set/row';
 import { DataSource } from '../../lib/data-source/data-source';
-import {Column} from "../../lib/data-set/column";
+import { Cell } from '../../lib/data-set/cell';
 
 @Component({
   selector: '[ng2-st-tbody]',
@@ -55,4 +54,8 @@ export class Ng2SmartTableTbodyComponent {
     this.isActionDelete = this.grid.getSetting('actions.delete');
     this.noDataMessage = this.grid.getSetting('noDataMessage');
   }
+
+  getVisibleCells(cells: Array<Cell>): Array<Cell> {
+    return (cells || []).filter((cell: Cell) => !cell.getColumn().hide);
+  }
 }
diff --git a/projects/ng2-smart-table/src/lib/components/thead/rows/thead-filters-row.component.ts b/projects/ng2-smart-table/src/lib/components/thead/rows/thead-filters-row.component.ts
@@ -12,7 +12,7 @@ import { Column } from "../../../lib/data-set/column";
                           [grid]="grid"
                           (create)="create.emit($event)">
     </th>
-    <th *ngFor="let column of grid.getColumns()" class="ng2-smart-th {{ column.id }}">
+    <th *ngFor="let column of getVisibleColumns(grid.getColumns())" class="ng2-smart-th {{ column.id }}">
       <ng2-smart-table-filter [source]="source"
                               [column]="column"
                               [inputClass]="filterInputClass"
@@ -45,4 +45,8 @@ export class TheadFitlersRowComponent implements OnChanges {
     this.showActionColumnRight = this.grid.showActionColumn('right');
     this.filterInputClass = this.grid.getSetting('filter.inputClass');
   }
+
+  getVisibleColumns(columns: Array<Column>): Array<Column> {
+    return (columns || []).filter((column: Column) => !column.hide);
+  }
 }
diff --git a/projects/ng2-smart-table/src/lib/components/thead/rows/thead-form-row.component.ts b/projects/ng2-smart-table/src/lib/components/thead/rows/thead-form-row.component.ts
@@ -2,6 +2,7 @@ import { Component, Input, Output, EventEmitter, OnChanges } from '@angular/core
 
 import { Grid } from '../../../lib/grid';
 import { Row } from '../../../lib/data-set/row';
+import { Cell } from '../../../lib/data-set/cell';
 
 @Component({
   selector: '[ng2-st-thead-form-row]',
@@ -10,7 +11,7 @@ import { Row } from '../../../lib/data-set/row';
       <td  *ngIf="showActionColumnLeft"  class="ng2-smart-actions">
         <ng2-st-actions [grid]="grid" (create)="onCreate($event)"></ng2-st-actions>
       </td>
-      <td *ngFor="let cell of grid.getNewRow().getCells()">
+      <td *ngFor="let cell of getVisibleCells(grid.getNewRow().getCells())">
         <ng2-smart-table-cell [cell]="cell"
                               [grid]="grid"
                               [isNew]="true"
@@ -50,4 +51,8 @@ export class TheadFormRowComponent implements OnChanges {
     this.showActionColumnRight = this.grid.showActionColumn('right');
     this.addInputClass = this.grid.getSetting('add.inputClass');
   }
+
+  getVisibleCells(cells: Array<Cell>): Array<Cell> {
+    return (cells || []).filter((cell: Cell) => !cell.getColumn().hide);
+  }
 }
diff --git a/projects/ng2-smart-table/src/lib/components/thead/rows/thead-titles-row.component.ts b/projects/ng2-smart-table/src/lib/components/thead/rows/thead-titles-row.component.ts
@@ -14,8 +14,10 @@ import { Column } from "../../../lib/data-set/column";
                                    (click)="selectAllRows.emit($event)">
     </th>
     <th ng2-st-actions-title *ngIf="showActionColumnLeft" [grid]="grid"></th>
-    <th *ngFor="let column of grid.getColumns()" class="ng2-smart-th {{ column.id }}" [ngClass]="column.class"
-      [style.width]="column.width" >
+    <th *ngFor="let column of getVisibleColumns(grid.getColumns())"
+        class="ng2-smart-th {{ column.id }}"
+        [ngClass]="column.class"
+        [style.width]="column.width">
       <ng2-st-column-title [source]="source" [column]="column" (sort)="sort.emit($event)"></ng2-st-column-title>
     </th>
     <th ng2-st-actions-title *ngIf="showActionColumnRight" [grid]="grid"></th>
@@ -41,4 +43,7 @@ export class TheadTitlesRowComponent implements OnChanges {
     this.showActionColumnRight = this.grid.showActionColumn('right');
   }
 
+  getVisibleColumns(columns: Array<Column>): Array<Column> {
+    return (columns || []).filter((column: Column) => !column.hide);
+  }
 }
diff --git a/projects/ng2-smart-table/src/lib/lib/data-set/column.ts b/projects/ng2-smart-table/src/lib/lib/data-set/column.ts
@@ -6,6 +6,7 @@ export class Column {
   type: string = '';
   class: string = '';
   width: string = '';
+  hide: boolean = false;
   isSortable: boolean = false;
   isEditable: boolean = true;
   isAddable: boolean = true;
@@ -56,6 +57,7 @@ export class Column {
     this.title = this.settings['title'];
     this.class = this.settings['class'];
     this.width = this.settings['width'];
+    this.hide = !!this.settings['hide'];
     this.type = this.prepareType();
     this.editor = this.settings['editor'];
     this.filter = this.settings['filter'];