Skip to content

Commit

Permalink
Fixed #98
Browse files Browse the repository at this point in the history
  • Loading branch information
Çağatay Çivici committed Aug 30, 2016
1 parent 8c105e1 commit e921ca1
Show file tree
Hide file tree
Showing 5 changed files with 73 additions and 42 deletions.
65 changes: 40 additions & 25 deletions components/common/shared.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,32 +67,30 @@ export class Column implements AfterContentInit{
@ContentChildren(PrimeTemplate) templates: QueryList<any>;
@ContentChild(TemplateRef) template: TemplateRef<any>;

protected bodyTemplate: TemplateRef<any>;
protected headerTemplate: TemplateRef<any>;
protected bodyTemplate: TemplateRef<any>;
protected footerTemplate: TemplateRef<any>;

ngAfterContentInit():void {
if(this.templates.length) {
this.templates.forEach((item) => {
switch(item.type) {
case 'header':
this.headerTemplate = item.template;
break;

case 'body':
this.bodyTemplate = item.template;
break;

default:
this.bodyTemplate = item.template;
break;
}
});
}
//backward compatibility, deprecated and will be removed later
else {
console.log('Templates without type attribute is deprecated, apply pTemplate directive on template element with type="header|body|footer" instead.');
this.bodyTemplate = this.template;
}
this.templates.forEach((item) => {
switch(item.type) {
case 'header':
this.headerTemplate = item.template;
break;

case 'body':
this.bodyTemplate = item.template;
break;

case 'footer':
this.footerTemplate = item.template;
break;

default:
this.bodyTemplate = item.template;
break;
}
});
}
}

Expand Down Expand Up @@ -136,9 +134,26 @@ export class ColumnHeaderTemplateLoader {
}
}

@Component({
selector: 'p-columnFooterTemplateLoader',
template: ``
})
export class ColumnFooterTemplateLoader {

@Input() column: any;

constructor(protected viewContainer: ViewContainerRef) {}

ngOnInit() {
let view = this.viewContainer.createEmbeddedView(this.column.footerTemplate, {
'\$implicit': this.column
});
}
}

@NgModule({
imports: [CommonModule],
exports: [Header,Footer,Column,TemplateWrapper,ColumnHeaderTemplateLoader,ColumnBodyTemplateLoader,PrimeTemplate],
declarations: [Header,Footer,Column,TemplateWrapper,ColumnHeaderTemplateLoader,ColumnBodyTemplateLoader,PrimeTemplate]
exports: [Header,Footer,Column,TemplateWrapper,ColumnHeaderTemplateLoader,ColumnBodyTemplateLoader,ColumnFooterTemplateLoader,PrimeTemplate],
declarations: [Header,Footer,Column,TemplateWrapper,ColumnHeaderTemplateLoader,ColumnBodyTemplateLoader,ColumnFooterTemplateLoader,PrimeTemplate]
})
export class SharedModule { }
7 changes: 6 additions & 1 deletion components/datatable/datatable.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,12 @@ export class RowExpansionLoader {
</thead>
<tfoot *ngIf="hasFooter()">
<tr *ngIf="!footerRows">
<th *ngFor="let col of columns" [ngStyle]="col.style" [class]="col.styleClass" [ngClass]="{'ui-state-default':true}" [style.display]="col.hidden ? 'none' : 'table-cell'">{{col.footer}}</th>
<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">
<p-columnFooterTemplateLoader [column]="col"></p-columnFooterTemplateLoader>
</span>
</th>
</tr>
<tr *ngFor="let footerRow of footerRows">
<th *ngFor="let col of footerRow.columns" [ngStyle]="col.style" [class]="col.styleClass"
Expand Down
15 changes: 11 additions & 4 deletions showcase/demo/datatable/datatabledemo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -246,17 +246,24 @@ <h3>Dynamic Colums</h3>
</pre>

<h3>Templates</h3>
<p>Field data of a corresponding row is displayed as the cell content by default, this can be customized using templating. The implicit variable is the column definition and data of current row can be accessed using
rowData property. In addition index of the current can be access using the optional rowIndex variable.</p>
<p>Field data of a corresponding row is displayed as the cell content by default, this can be customized using templating where the implicit variable passed to the template
is the column definition and data of current row is the rowData property. In addition index of the current can be accessed using the optional rowIndex variable.
Similarly, custom content can be placed at the header and footer of a column with templating.</p>

<p>A template inside a column must be decorated with pTemplate directive along with the type property to indicate where the template belongs to. Possible values
are "header", "body" and "footer".</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-column field="color" header="Color"&gt;
&lt;template let-col #car="rowData" #ri="rowIndex"&gt;
&lt;template let-col #car="rowData" #ri="rowIndex" pTemplate type="body"&gt;
&lt;span"&gt;{{car[col.field]}}&lt;/span&gt;
&lt;/template&gt;
&lt;/p-column&gt;
&lt;p-column&gt;
&lt;template let-car="rowData"&gt;
&lt;template pTemplate type="header"&gt;
&lt;button type="button" pButton (click)="selectAllCars()" icon="fa-check"&gt;&lt;/button&gt;
&lt;/template&gt;
&lt;template let-car="rowData" pTemplate type="body"&gt;
&lt;button type="button" pButton (click)="selectCar(car)" icon="fa-search"&gt;&lt;/button&gt;
&lt;/template&gt;
&lt;/p-column&gt;
Expand Down
22 changes: 13 additions & 9 deletions showcase/demo/datatable/datatabletemplatingdemo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
<div class="ContentSideSections">
<div>
<span class="fontSize30 TextShadow orange marginBottom20 dispBlock">DataTable - <span class="subitem">Templating</span></span>
<span class="defaultText">Field data of a corresponding row is displayed as the cell content by default, this can be customized using templating.</span>
<span class="defaultText">Field data of a corresponding row is displayed as the cell content by default, this can be customized using templating. Similarly,
custom content can be placed at the header and footer of a column with templating.</span>
</div>
</div>

Expand All @@ -15,15 +16,15 @@
<p-column field="year" header="Year"></p-column>
<p-column field="brand" header="Brand"></p-column>
<p-column field="color" header="Color">
<template let-col let-car="rowData" type="body">
<span [style.color]="car[col.field]">{{car[col.field]}}</span>
</template>
<template let-col type="header">
<template let-col let-car="rowData" pTemplate type="body">
<span [style.color]="car[col.field]">{{car[col.field]}}</span>
</template>
</p-column>
<p-column styleClass="col-button">
<template let-car="rowData" type="body">
<template pTemplate type="header">
<button type="button" pButton icon="fa-refresh"></button>
</template>
<template let-car="rowData" pTemplate type="body">
<button type="button" pButton (click)="selectCar(car)" icon="fa-search"></button>
</template>
</p-column>
Expand Down Expand Up @@ -66,12 +67,15 @@
&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;template let-col let-car="rowData"&gt;
&lt;span [style.color]="car[col.field]"&gt;{{car[col.field]}}&lt;/span&gt;
&lt;template let-col let-car="rowData" pTemplate type="body"&gt;
&lt;span [style.color]="car[col.field]"&gt;&#123;&#123;car[col.field]&#125;&#125;&lt;/span&gt;
&lt;/template&gt;
&lt;/p-column&gt;
&lt;p-column styleClass="col-button"&gt;
&lt;template let-car="rowData"&gt;
&lt;template pTemplate type="header"&gt;
&lt;button type="button" pButton icon="fa-refresh"&gt;&lt;/button&gt;
&lt;/template&gt;
&lt;template let-car="rowData" pTemplate type="body"&gt;
&lt;button type="button" pButton (click)="selectCar(car)" icon="fa-search"&gt;&lt;/button&gt;
&lt;/template&gt;
&lt;/p-column&gt;
Expand Down
6 changes: 3 additions & 3 deletions showcase/resources/data/cars-small.json
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
{
"data": [
{"brand": "VW", "year": 2012, "color": "White", "vin": "dsad231ff"},
{"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff"},
{"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345"},
{"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr"},
{"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh"},
{"brand": "Mercedes", "year": 1995, "color": "White", "vin": "hrtwy34"},
{"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34"},
{"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj"},
{"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr"},
{"brand": "Jaguar", "year": 2013, "color": "White", "vin": "greg34"},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34"},
{"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5"},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s"}
]
Expand Down

1 comment on commit e921ca1

@mcfin1
Copy link

@mcfin1 mcfin1 commented on e921ca1 Oct 12, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi,

In datatable.ts, the logic branches on "scrollable". This feature was not implemented taking that into account.
Pull request #938 has a fix for it.

Any idea when this pull request is going to be reviewed?

Thanks

Please sign in to comment.