From 867fce30c2164ecf3da0a31095f26ea1ac9cd634 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=87a=C4=9Fatay=20=C3=87ivici?=
 <cagatay.civici@github.com>
Date: Sat, 22 Oct 2016 02:19:42 +0300
Subject: [PATCH] Fixed #1100

---
 components/common/shared.ts                   | 32 ++++++-
 components/datatable/datatable.ts             | 64 +++++++------
 showcase/demo/datatable/datatabledemo.html    | 66 +++++++-------
 .../demo/datatable/datatablegroupdemo.html    | 91 +++++++++++--------
 showcase/demo/datatable/datatablegroupdemo.ts | 37 --------
 webpack.config.js                             |  4 +-
 6 files changed, 155 insertions(+), 139 deletions(-)

diff --git a/components/common/shared.ts b/components/common/shared.ts
index a22d38acf1c..b85f8ce2579 100644
--- a/components/common/shared.ts
+++ b/components/common/shared.ts
@@ -94,6 +94,34 @@ export class Column implements AfterContentInit{
     }
 }
 
+@Component({
+    selector: 'p-row',
+    template: ``
+})
+export class Row {
+    
+    @ContentChildren(Column) columns: QueryList<Column>;
+    
+}
+
+@Component({
+    selector: 'p-headerColumnGroup',
+    template: ``
+})
+export class HeaderColumnGroup {
+        
+    @ContentChildren(Row) rows: QueryList<any>;
+}
+
+@Component({
+    selector: 'p-footerColumnGroup',
+    template: ``
+})
+export class FooterColumnGroup {
+        
+    @ContentChildren(Row) rows: QueryList<any>;
+}
+
 @Component({
     selector: 'p-columnBodyTemplateLoader',
     template: ``
@@ -170,7 +198,7 @@ export class TemplateLoader {
 
 @NgModule({
     imports: [CommonModule],
-    exports: [Header,Footer,Column,TemplateWrapper,ColumnHeaderTemplateLoader,ColumnBodyTemplateLoader,ColumnFooterTemplateLoader,PrimeTemplate,TemplateLoader],
-    declarations: [Header,Footer,Column,TemplateWrapper,ColumnHeaderTemplateLoader,ColumnBodyTemplateLoader,ColumnFooterTemplateLoader,PrimeTemplate,TemplateLoader]
+    exports: [Header,Footer,Column,TemplateWrapper,ColumnHeaderTemplateLoader,ColumnBodyTemplateLoader,ColumnFooterTemplateLoader,PrimeTemplate,TemplateLoader,Row,HeaderColumnGroup,FooterColumnGroup],
+    declarations: [Header,Footer,Column,TemplateWrapper,ColumnHeaderTemplateLoader,ColumnBodyTemplateLoader,ColumnFooterTemplateLoader,PrimeTemplate,TemplateLoader,Row,HeaderColumnGroup,FooterColumnGroup]
 })
 export class SharedModule { }
\ No newline at end of file
diff --git a/components/datatable/datatable.ts b/components/datatable/datatable.ts
index 1560c707028..277926920c9 100644
--- a/components/datatable/datatable.ts
+++ b/components/datatable/datatable.ts
@@ -5,7 +5,7 @@ import {FormsModule} from '@angular/forms'
 import {SharedModule} from '../common/shared';
 import {PaginatorModule} from '../paginator/paginator';
 import {InputTextModule} from '../inputtext/inputtext';
-import {Column,Header,Footer} from '../common/shared';
+import {Column,Header,Footer,HeaderColumnGroup,FooterColumnGroup} from '../common/shared';
 import {LazyLoadEvent,FilterMetadata,SortMeta} from '../common/api';
 import {DomHandler} from '../dom/domhandler';
 import {Subscription} from 'rxjs/Subscription';
@@ -100,7 +100,7 @@ export class RowExpansionLoader {
             <div class="ui-datatable-tablewrapper" *ngIf="!scrollable">
                 <table>
                     <thead>
-                        <tr *ngIf="!headerRows" class="ui-state-default">
+                        <tr *ngIf="!headerColumnGroup" class="ui-state-default">
                             <th #headerCell *ngFor="let col of columns;let lastCol = last" [ngStyle]="col.style" [class]="col.styleClass" [style.display]="col.hidden ? 'none' : 'table-cell'"
                                 (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-state-focus': headerCell === focusedHeader && col.sortable,
@@ -118,22 +118,27 @@ export class RowExpansionLoader {
                                 <p-dtCheckbox *ngIf="col.selectionMode=='multiple'" (onChange)="toggleRowsWithCheckbox($event)" [checked]="allSelected" [disabled]="isEmpty()"></p-dtCheckbox>
                             </th>
                         </tr>
-                        <tr *ngFor="let headerRow of headerRows" class="ui-state-default">
-                            <th #headerCell *ngFor="let col of headerRow.columns" [ngStyle]="col.style" [class]="col.styleClass" [attr.colspan]="col.colspan" [attr.rowspan]="col.rowspan"
-                                (click)="sort($event,col)" (mouseenter)="hoveredHeader = $event.target" (mouseleave)="hoveredHeader = null" [style.display]="col.hidden ? 'none' : 'table-cell'"
-                                [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), 'ui-resizable-column': resizableColumns}"
-                                [tabindex]="col.sortable ? tabindex : -1" (focus)="focusedHeader=$event.target" (blur)="focusedHeader=null" (keydown)="onHeaderKeydown($event,col)">
-                                <span class="ui-column-resizer" *ngIf="resizableColumns && ((columnResizeMode == 'fit' && !lastCol) || columnResizeMode == 'expand')" (mousedown)="initColumnResize($event)"></span>
-                                <span class="ui-column-title">{{col.header}}</span>
-                                <span class="ui-sortable-column-icon fa fa-fw fa-sort" *ngIf="col.sortable"
-                                     [ngClass]="{'fa-sort-desc': (getSortOrder(col) == -1),'fa-sort-asc': (getSortOrder(col) == 1)}"></span>
-                                <input type="text" pInputText class="ui-column-filter" *ngIf="col.filter" [value]="filters[col.field] ? filters[col.field].value : ''" (click)="onFilterInputClick($event)" (keyup)="onFilterKeyup($event.target.value, col.field, col.filterMatchMode)"/>
-                            </th>
-                        </tr>
+                        <template [ngIf]="headerColumnGroup">
+                            <tr *ngFor="let headerRow of headerColumnGroup.rows" class="ui-state-default">
+                                <th #headerCell *ngFor="let col of headerRow.columns" [ngStyle]="col.style" [class]="col.styleClass" [attr.colspan]="col.colspan" [attr.rowspan]="col.rowspan"
+                                    (click)="sort($event,col)" (mouseenter)="hoveredHeader = $event.target" (mouseleave)="hoveredHeader = null" [style.display]="col.hidden ? 'none' : 'table-cell'"
+                                    [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), 'ui-resizable-column': resizableColumns}"
+                                    [tabindex]="col.sortable ? tabindex : -1" (focus)="focusedHeader=$event.target" (blur)="focusedHeader=null" (keydown)="onHeaderKeydown($event,col)">
+                                    <span class="ui-column-resizer" *ngIf="resizableColumns && ((columnResizeMode == 'fit' && !lastCol) || columnResizeMode == 'expand')" (mousedown)="initColumnResize($event)"></span>
+                                    <span class="ui-column-title" *ngIf="!col.selectionMode&&!col.headerTemplate">{{col.header}}</span>
+                                    <span class="ui-column-title" *ngIf="col.headerTemplate">
+                                        <p-columnHeaderTemplateLoader [column]="col"></p-columnHeaderTemplateLoader>
+                                    </span>
+                                    <span class="ui-sortable-column-icon fa fa-fw fa-sort" *ngIf="col.sortable"
+                                         [ngClass]="{'fa-sort-desc': (getSortOrder(col) == -1),'fa-sort-asc': (getSortOrder(col) == 1)}"></span>
+                                    <input type="text" pInputText class="ui-column-filter" *ngIf="col.filter" [value]="filters[col.field] ? filters[col.field].value : ''" (click)="onFilterInputClick($event)" (keyup)="onFilterKeyup($event.target.value, col.field, col.filterMatchMode)"/>
+                                </th>
+                            </tr>
+                        </template>
                     </thead>
                     <tfoot *ngIf="hasFooter()">
-                        <tr *ngIf="!footerRows">
+                        <tr *ngIf="!footerColumnGroup">
                             <th *ngFor="let col of columns" [ngStyle]="col.style" [class]="col.styleClass" [ngClass]="{'ui-state-default':true}" [style.display]="col.hidden ? 'none' : 'table-cell'">
                                 <span class="ui-column-footer" *ngIf="!col.footerTemplate">{{col.footer}}</span>
                                 <span class="ui-column-footer" *ngIf="col.footerTemplate">
@@ -141,11 +146,18 @@ export class RowExpansionLoader {
                                 </span>
                             </th>
                         </tr>
-                        <tr *ngFor="let footerRow of footerRows">
-                            <th *ngFor="let col of footerRow.columns" [ngStyle]="col.style" [class]="col.styleClass"
-                                [attr.colspan]="col.colspan" [attr.rowspan]="col.rowspan" [style.display]="col.hidden ? 'none' : 'table-cell'"
-                                [ngClass]="{'ui-state-default':true}">{{col.footer}}</th>
-                        </tr>
+                        <template [ngIf]="footerColumnGroup">
+                            <tr *ngFor="let footerRow of footerColumnGroup.rows">
+                                <th *ngFor="let col of footerRow.columns" [ngStyle]="col.style" [class]="col.styleClass"
+                                    [attr.colspan]="col.colspan" [attr.rowspan]="col.rowspan" [style.display]="col.hidden ? 'none' : 'table-cell'"
+                                    [ngClass]="{'ui-state-default':true}">
+                                    <span class="ui-column-footer" *ngIf="!col.footerTemplate">{{col.footer}}</span>
+                                    <span class="ui-column-footer" *ngIf="col.footerTemplate">
+                                        <p-columnFooterTemplateLoader [column]="col"></p-columnFooterTemplateLoader>
+                                    </span>
+                                </th>
+                            </tr>
+                        </template>
                     </tfoot>
                     <tbody class="ui-datatable-data ui-widget-content">
                         <template ngFor let-rowData [ngForOf]="dataToRender" let-even="even" let-odd="odd" let-rowIndex="index">
@@ -302,10 +314,6 @@ export class DataTable implements AfterViewChecked,AfterViewInit,AfterContentIni
 
     @Input() scrollWidth: any;
 
-    @Input() headerRows: any;
-
-    @Input() footerRows: any;
-
     @Input() style: any;
 
     @Input() styleClass: string;
@@ -360,6 +368,10 @@ export class DataTable implements AfterViewChecked,AfterViewInit,AfterContentIni
     
     @ContentChildren(Column) cols: QueryList<Column>;
     
+    @ContentChild(HeaderColumnGroup) headerColumnGroup: HeaderColumnGroup;
+    
+    @ContentChild(FooterColumnGroup) footerColumnGroup: FooterColumnGroup;
+    
     protected dataToRender: any[];
 
     protected first: number = 0;
@@ -1275,7 +1287,7 @@ export class DataTable implements AfterViewChecked,AfterViewInit,AfterContentIni
     }
 
     hasFooter() {
-        if(this.footerRows) {
+        if(this.footerColumnGroup) {
             return true;
         }
         else {
diff --git a/showcase/demo/datatable/datatabledemo.html b/showcase/demo/datatable/datatabledemo.html
index 33fd48ad0c7..deacb6de94e 100644
--- a/showcase/demo/datatable/datatabledemo.html
+++ b/showcase/demo/datatable/datatabledemo.html
@@ -295,43 +295,43 @@ <h3>Facets</h3>
             <p>See the <a [routerLink]="['/datatablefacets']">live example.</a></p>
 
             <h3>Grouping</h3>
-            <p>Columns can be grouped at header and footer using headerRows and footerRows properties that both define an array
-                of columns each having colspan and rowspan.</p>
+            <p>Columns can be grouped at header and footer using headerColumnGroup and footerColumnGroup components containing rows with
+                columns. Templating is also supported inside grouped columns.</p>
 <pre>
 <code class="language-markup" pCode>
-&lt;p-dataTable [value]="cars" [headerRows]="headerRows"&gt;
-    &lt;p-column field="vin" header="Vin"&gt;&lt;/p-column&gt;
-    &lt;p-column field="year" header="Year"&gt;&lt;/p-column&gt;
-    &lt;p-column field="brand" header="Brand"&gt;&lt;/p-column&gt;
-    &lt;p-column field="color" header="Color"&gt;&lt;/p-column&gt;
+&lt;p-dataTable [value]="sales"&gt;
+    &lt;p-headerColumnGroup&gt;
+        &lt;p-row&gt;
+            &lt;p-column header="Brand" rowspan="3"&gt;&lt;/p-column&gt;
+            &lt;p-column header="Sale Rate" colspan="4"&gt;&lt;/p-column&gt;
+        &lt;/p-row&gt;
+        &lt;p-row&gt;
+            &lt;p-column header="Sales" colspan="2"&gt;&lt;/p-column&gt;
+            &lt;p-column header="Profits" colspan="2"&gt;&lt;/p-column&gt;
+        &lt;/p-row&gt;
+        &lt;p-row&gt;
+            &lt;p-column header="Last Year"&gt;&lt;/p-column&gt;
+            &lt;p-column header="This Year"&gt;&lt;/p-column&gt;
+            &lt;p-column header="Last Year"&gt;&lt;/p-column&gt;
+            &lt;p-column header="This Year"&gt;&lt;/p-column&gt;
+        &lt;/p-row&gt;
+    &lt;/p-headerColumnGroup&gt;
+    
+    &lt;p-column field="brand"&gt;&lt;/p-column&gt;
+    &lt;p-column field="lastYearSale"&gt;&lt;/p-column&gt;
+    &lt;p-column field="thisYearSale"&gt;&lt;/p-column&gt;
+    &lt;p-column field="lastYearProfit"&gt;&lt;/p-column&gt;
+    &lt;p-column field="thisYearProfit"&gt;&lt;/p-column&gt;
+    
+    &lt;p-footerColumnGroup&gt;
+        &lt;p-row&gt;
+            &lt;p-column footer="Totals:" colspan="3"&gt;&lt;/p-column&gt;
+            &lt;p-column footer="$506,202"&gt;&lt;/p-column&gt;
+            &lt;p-column footer="$531,020"&gt;&lt;/p-column&gt;
+        &lt;/p-row&gt;
+    &lt;/p-footerColumnGroup&gt;
 &lt;/p-dataTable&gt;
 </code>
-</pre>
-<pre>
-<code class="language-typescript" pCode>
-this.headerRows = [
-    &#123;
-        columns: [
-            &#123;headerText: 'Brand', rowspan: 3&#125;,
-            &#123;headerText: 'Sale Rate', colspan: 4&#125;
-        ]
-    &#125;,
-    &#123;
-        columns: [
-            &#123;headerText: 'Brand', colspan: 2&#125;,
-            &#123;headerText: 'Sale Rate', colspan: 2&#125;
-        ]
-    &#125;,
-    &#123;
-        columns: [
-            &#123;headerText: 'Last Year'&#125;,
-            &#123;headerText: 'This Year'&#125;,
-            &#123;headerText: 'Last Year'&#125;,
-            &#123;headerText: 'This Year'&#125;
-        ]
-    &#125;
-];
-</code>
 </pre>
             <p>See the <a [routerLink]="['/datatablegroup']">live example.</a></p>
 
diff --git a/showcase/demo/datatable/datatablegroupdemo.html b/showcase/demo/datatable/datatablegroupdemo.html
index 596d82f7034..5948c41df51 100644
--- a/showcase/demo/datatable/datatablegroupdemo.html
+++ b/showcase/demo/datatable/datatablegroupdemo.html
@@ -9,12 +9,37 @@
 </div>
 
 <div class="ContentSideSections Implementation">
-    <p-dataTable [value]="sales" [headerRows]="headerRows" [footerRows]="footerRows">
+    <p-dataTable [value]="sales">
+        <p-headerColumnGroup>
+            <p-row>
+                <p-column header="Brand" rowspan="3"></p-column>
+                <p-column header="Sale Rate" colspan="4"></p-column>
+            </p-row>
+            <p-row>
+                <p-column header="Sales" colspan="2"></p-column>
+                <p-column header="Profits" colspan="2"></p-column>
+            </p-row>
+            <p-row>
+                <p-column header="Last Year"></p-column>
+                <p-column header="This Year"></p-column>
+                <p-column header="Last Year"></p-column>
+                <p-column header="This Year"></p-column>
+            </p-row>
+        </p-headerColumnGroup>
+        
         <p-column field="brand"></p-column>
         <p-column field="lastYearSale"></p-column>
         <p-column field="thisYearSale"></p-column>
         <p-column field="lastYearProfit"></p-column>
         <p-column field="thisYearProfit"></p-column>
+        
+        <p-footerColumnGroup>
+            <p-row>
+                <p-column footer="Totals:" colspan="3"></p-column>
+                <p-column footer="$506,202"></p-column>
+                <p-column footer="$531,020"></p-column>
+            </p-row>
+        </p-footerColumnGroup>
     </p-dataTable>
 </div>
 
@@ -27,10 +52,6 @@
 
     sales: any[];
 
-    headerRows: any[];
-    
-    footerRows: any[];
-
     ngOnInit() &#123;
         this.sales = [
             &#123;brand: 'Apple', lastYearSale: '51%', thisYearSale: '40%', lastYearProfit: '$54,406.00', thisYearProfit: '$43,342'&#125;,
@@ -44,39 +65,6 @@
             &#123;brand: 'HTC', lastYearSale: '90%', thisYearSale: '56%', lastYearProfit: '$765,442', thisYearProfit: '$296,232'&#125;,
             &#123;brand: 'Toshiba', lastYearSale: '75%', thisYearSale: '54%', lastYearProfit: '$21,212', thisYearProfit: '$12,533'&#125;
         ];
-        
-        this.headerRows = [
-            &#123;
-                columns: [
-                    &#123;header: 'Brand', rowspan: 3&#125;,
-                    &#123;header: 'Sale Rate', colspan: 4&#125;
-                ]
-            &#125;,
-            &#123;
-                columns: [
-                    &#123;header: 'Brand', colspan: 2&#125;,
-                    &#123;header: 'Sale Rate', colspan: 2&#125;
-                ]
-            &#125;,
-            &#123;
-                columns: [
-                    &#123;header: 'Last Year'&#125;,
-                    &#123;header: 'This Year'&#125;,
-                    &#123;header: 'Last Year'&#125;,
-                    &#123;header: 'This Year'&#125;
-                ]
-            &#125;
-        ];
-        
-        this.footerRows = [
-            &#123;
-                columns: [
-                    &#123;footer: 'Totals:', colspan: 3&#125;,
-                    &#123;footer: '$506,202'&#125;,
-                    &#123;footer: '$531,020'&#125;
-                ]
-            &#125;
-        ];
     &#125;
 &#125;
 </code>
@@ -86,12 +74,37 @@
         <p-tabPanel header="datatablegroupdemo.html">
 <pre>
 <code class="language-markup" pCode>
-&lt;p-dataTable [value]="sales" [headerRows]="headerRows" [footerRows]="footerRows"&gt;
+&lt;p-dataTable [value]="sales"&gt;
+    &lt;p-headerColumnGroup&gt;
+        &lt;p-row&gt;
+            &lt;p-column header="Brand" rowspan="3"&gt;&lt;/p-column&gt;
+            &lt;p-column header="Sale Rate" colspan="4"&gt;&lt;/p-column&gt;
+        &lt;/p-row&gt;
+        &lt;p-row&gt;
+            &lt;p-column header="Sales" colspan="2"&gt;&lt;/p-column&gt;
+            &lt;p-column header="Profits" colspan="2"&gt;&lt;/p-column&gt;
+        &lt;/p-row&gt;
+        &lt;p-row&gt;
+            &lt;p-column header="Last Year"&gt;&lt;/p-column&gt;
+            &lt;p-column header="This Year"&gt;&lt;/p-column&gt;
+            &lt;p-column header="Last Year"&gt;&lt;/p-column&gt;
+            &lt;p-column header="This Year"&gt;&lt;/p-column&gt;
+        &lt;/p-row&gt;
+    &lt;/p-headerColumnGroup&gt;
+    
     &lt;p-column field="brand"&gt;&lt;/p-column&gt;
     &lt;p-column field="lastYearSale"&gt;&lt;/p-column&gt;
     &lt;p-column field="thisYearSale"&gt;&lt;/p-column&gt;
     &lt;p-column field="lastYearProfit"&gt;&lt;/p-column&gt;
     &lt;p-column field="thisYearProfit"&gt;&lt;/p-column&gt;
+    
+    &lt;p-footerColumnGroup&gt;
+        &lt;p-row&gt;
+            &lt;p-column footer="Totals:" colspan="3"&gt;&lt;/p-column&gt;
+            &lt;p-column footer="$506,202"&gt;&lt;/p-column&gt;
+            &lt;p-column footer="$531,020"&gt;&lt;/p-column&gt;
+        &lt;/p-row&gt;
+    &lt;/p-footerColumnGroup&gt;
 &lt;/p-dataTable&gt;
 </code>
 </pre>
diff --git a/showcase/demo/datatable/datatablegroupdemo.ts b/showcase/demo/datatable/datatablegroupdemo.ts
index 02bb52945ea..0a33505ace1 100644
--- a/showcase/demo/datatable/datatablegroupdemo.ts
+++ b/showcase/demo/datatable/datatablegroupdemo.ts
@@ -7,10 +7,6 @@ export class DataTableGroupDemo implements OnInit {
 
     sales: any[];
 
-    headerRows: any[];
-    
-    footerRows: any[];
-
     ngOnInit() {
         this.sales = [
             {brand: 'Apple', lastYearSale: '51%', thisYearSale: '40%', lastYearProfit: '$54,406.00', thisYearProfit: '$43,342'},
@@ -24,38 +20,5 @@ export class DataTableGroupDemo implements OnInit {
             {brand: 'HTC', lastYearSale: '90%', thisYearSale: '56%', lastYearProfit: '$765,442', thisYearProfit: '$296,232'},
             {brand: 'Toshiba', lastYearSale: '75%', thisYearSale: '54%', lastYearProfit: '$21,212', thisYearProfit: '$12,533'}
         ];
-        
-        this.headerRows = [
-            {
-                columns: [
-                    {header: 'Brand', rowspan: 3},
-                    {header: 'Sale Rate', colspan: 4}
-                ]
-            },
-            {
-                columns: [
-                    {header: 'Brand', colspan: 2},
-                    {header: 'Sale Rate', colspan: 2}
-                ]
-            },
-            {
-                columns: [
-                    {header: 'Last Year'},
-                    {header: 'This Year'},
-                    {header: 'Last Year'},
-                    {header: 'This Year'}
-                ]
-            }
-        ];
-        
-        this.footerRows = [
-            {
-                columns: [
-                    {footer: 'Totals:', colspan: 3},
-                    {footer: '$506,202'},
-                    {footer: '$531,020'}
-                ]
-            }
-        ];
     }
 }
diff --git a/webpack.config.js b/webpack.config.js
index 0b6e1e65ce3..3fa298175db 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -13,12 +13,12 @@ module.exports = {
     plugins: [
         new webpack.optimize.CommonsChunkPlugin({
             name: ['application', 'vendor', 'polyfills']
-        }),
+        })/*,
         new webpack.optimize.UglifyJsPlugin({
             beautify: false,
             mangle: {screw_ie8: true, keep_fnames: true},
             compress: {screw_ie8: true},
             comments: false
-        })
+        })*/
     ]
 };
\ No newline at end of file