Fixed #190

primefaces · Apr 13, 2016 · 94c4ebe · 94c4ebe
1 parent 01c76b5
commit 94c4ebe
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 7 deletions.
diff --git a/components/column/column.ts b/components/column/column.ts
@@ -19,6 +19,7 @@ export class Column {
     @Input() colspan: number;
     @Input() style: string;
     @Input() styleClass: string;
+    @Input() hidden: boolean;
     @ContentChild(TemplateRef) template: TemplateRef;
 
 }
diff --git a/components/datatable/datatable.ts b/components/datatable/datatable.ts
@@ -22,7 +22,7 @@ import {DomHandler} from '../dom/domhandler';
                 <table>
                     <thead>
                         <tr *ngIf="!headerRows" class="ui-state-default">
-                            <th #headerCell *ngFor="#col of columns" [attr.style]="col.style" [attr.class]="col.styleClass"
+                            <th #headerCell *ngFor="#col of columns" [attr.style]="col.style" [attr.class]="col.styleClass" [hidden]="col.hidden"
                                 (click)="sort($event,col)" (mouseenter)="hoveredHeader = $event.target" (mouseleave)="hoveredHeader = null"
                                 [ngClass]="{'ui-state-default ui-unselectable-text':true, 'ui-state-hover': headerCell === hoveredHeader && col.sortable,'ui-sortable-column': col.sortable,'ui-state-active': isSorted(col)}">
                                 <span class="ui-column-title">{{col.header}}</span>
@@ -33,7 +33,7 @@ import {DomHandler} from '../dom/domhandler';
                         </tr>
                         <tr *ngFor="#headerRow of headerRows" class="ui-state-default">
                             <th #headerCell *ngFor="#col of headerRow.columns" [attr.style]="col.style" [attr.class]="col.styleClass" [attr.colspan]="col.colspan" [attr.rowspan]="col.rowspan"
-                                (click)="sort($event,col)" (mouseenter)="hoveredHeader = $event.target" (mouseleave)="hoveredHeader = null"
+                                (click)="sort($event,col)" (mouseenter)="hoveredHeader = $event.target" (mouseleave)="hoveredHeader = null" [hidden]="col.hidden"
                                 [ngClass]="{'ui-state-default ui-unselectable-text':true, 'ui-state-hover': headerCell === hoveredHeader && col.sortable,'ui-sortable-column': col.sortable,'ui-state-active': isSorted(col)}">
                                 <span class="ui-column-title">{{col.header}}</span>
                                 <span class="ui-sortable-column-icon fa fa-fw fa-sort" *ngIf="col.sortable"
@@ -44,19 +44,19 @@ import {DomHandler} from '../dom/domhandler';
                     </thead>
                     <tfoot *ngIf="hasFooter()">
                         <tr *ngIf="!footerRows">
-                            <th *ngFor="#col of columns" [attr.style]="col.style" [attr.class]="col.styleClass" [ngClass]="{'ui-state-default':true}">{{col.footer}}</th>
+                            <th *ngFor="#col of columns" [attr.style]="col.style" [attr.class]="col.styleClass" [ngClass]="{'ui-state-default':true}" [hidden]="col.hidden">{{col.footer}}</th>
                         </tr>
                         <tr *ngFor="#footerRow of footerRows">
                             <th *ngFor="#col of footerRow.columns" [attr.style]="col.style" [attr.class]="col.styleClass"
-                                [attr.colspan]="col.colspan" [attr.rowspan]="col.rowspan"
+                                [attr.colspan]="col.colspan" [attr.rowspan]="col.rowspan" [hidden]="col.hidden"
                                 [ngClass]="{'ui-state-default':true}">{{col.footer}}</th>
                         </tr>
                     </tfoot>
                     <tbody class="ui-datatable-data ui-widget-content">
                         <tr #rowElement *ngFor="#rowData of dataToRender;#even = even; #odd = odd;" class="ui-widget-content" (mouseenter)="hoveredRow = $event.target" (mouseleave)="hoveredRow = null"
                                 (click)="onRowClick($event, rowData)" (dblclick)="rowDblclick($event,rowData)" (contextmenu)="onRowRightClick($event,rowData)"
                                 [ngClass]="{'ui-datatable-even':even,'ui-datatable-odd':odd,'ui-state-hover': (selectionMode && rowElement == hoveredRow), 'ui-state-highlight': isSelected(rowData)}">
-                            <td *ngFor="#col of columns" [attr.style]="col.style" [attr.class]="col.styleClass"
+                            <td *ngFor="#col of columns" [attr.style]="col.style" [attr.class]="col.styleClass" [hidden]="col.hidden"
                                 [ngClass]="{'ui-editable-column':col.editable}" (click)="switchCellToEditMode($event.target,col,rowData)">
                                 <span class="ui-column-title" *ngIf="responsive">{{col.header}}</span>
                                 <span class="ui-cell-data" *ngIf="!col.template">{{resolveFieldData(rowData,col.field)}}</span>
@@ -75,7 +75,7 @@ import {DomHandler} from '../dom/domhandler';
                     <table>
                         <thead>
                             <tr>
-                                <th #headerCell *ngFor="#col of columns" [attr.style]="col.style" [attr.class]="col.styleClass"
+                                <th #headerCell *ngFor="#col of columns" [attr.style]="col.style" [attr.class]="col.styleClass" [hidden]="col.hidden"
                                     (click)="sort($event,col)" (mouseenter)="hoveredHeader = $event.target" (mouseleave)="hoveredHeader = null"
                                     [ngClass]="{'ui-state-default ui-unselectable-text':true, 'ui-state-hover': headerCell === hoveredHeader && col.sortable,'ui-sortable-column': col.sortable,'ui-state-active': col.field === sortField}">
                                     <span class="ui-column-title">{{col.header}}</span>
@@ -94,7 +94,8 @@ import {DomHandler} from '../dom/domhandler';
                         <tr #rowElement *ngFor="#rowData of dataToRender;#even = even; #odd = odd;" class="ui-widget-content" (mouseenter)="hoveredRow = $event.target" (mouseleave)="hoveredRow = null"
                                 (click)="onRowClick($event, rowData)" (dblclick)="rowDblclick($event,rowData)"
                                 [ngClass]="{'ui-datatable-even':even,'ui-datatable-odd':odd,'ui-state-hover': (selectionMode && rowElement == hoveredRow), 'ui-state-highlight': isSelected(rowData)}">
-                            <td *ngFor="#col of columns" [attr.style]="col.style" [attr.class]="col.styleClass" [ngClass]="{'ui-editable-column':col.editable}" (click)="switchCellToEditMode($event.target,col,rowData)">
+                            <td *ngFor="#col of columns" [attr.style]="col.style" [attr.class]="col.styleClass" [hidden]="col.hidden"
+                                [ngClass]="{'ui-editable-column':col.editable}" (click)="switchCellToEditMode($event.target,col,rowData)">
                                 <span class="ui-column-title" *ngIf="responsive">{{col.header}}</span>
                                 <span class="ui-cell-data" *ngIf="!col.template">{{resolveFieldData(rowData,col.field)}}</span>
                                 <span class="ui-cell-data" *ngIf="col.template">

diff --git a/showcase/demo/datatable/datatabledemo.html b/showcase/demo/datatable/datatabledemo.html
@@ -179,6 +179,12 @@ <h3>Attributes</h3>
                             <td>null</td>
                             <td>Style class of the column.</td>
                         </tr>
+                        <tr>
+                            <td>hidden</td>
+                            <td>boolean</td>
+                            <td>false</td>
+                            <td>Controls visiblity of the column.</td>
+                        </tr>
                     </tbody>
                 </table>
             </div>