Date format support for datatable columns

This commit is contained in:
Denys Vuika
2016-07-04 17:56:52 +01:00
parent 7d6b1c922b
commit b02a465f27
3 changed files with 27 additions and 7 deletions

View File

@@ -41,15 +41,19 @@
</td>
<td *ngFor="let col of data.getColumns()" [ngSwitch]="col.type"
class="mdl-data-table__cell--non-numeric non-selectable data-cell {{col.cssClass}}"
(click)="onRowClick(row, $event)" (dblclick)="onRowDblClick(row, $event)">
<div *ngSwitchCase="'image'">
(click)="onRowClick(row, $event)"
(dblclick)="onRowDblClick(row, $event)">
<div *ngSwitchCase="'image'" class="cell-value">
<i *ngIf="isIconValue(row, col)" class="material-icons icon-cell">{{asIconValue(row, col)}}</i>
<img *ngIf="!isIconValue(row, col)" class="image-cell" alt="" src="{{data.getValue(row, col)}}">
</div>
<div *ngSwitchCase="'text'">
<div *ngSwitchCase="'date'" class="cell-value">
{{data.getValue(row, col)}}
</div>
<span *ngSwitchDefault>
<div *ngSwitchCase="'text'" class="cell-value">
{{data.getValue(row, col)}}
</div>
<span *ngSwitchDefault class="cell-value">
<!-- empty cell for unknown column type -->
</span>

View File

@@ -25,7 +25,7 @@ export interface DataTableAdapter {
getSorting(): DataSorting;
setSorting(sorting: DataSorting): void;
sort(key?: string, direction?: string): void;
}
export interface DataRow {
@@ -39,7 +39,8 @@ export interface DataRow {
export interface DataColumn {
key: string;
type: string; // text|image
type: string; // text|image|date
format?: string;
sortable?: boolean;
title?: string;
srTitle?: string;

View File

@@ -15,6 +15,8 @@
* limitations under the License.
*/
import { DatePipe } from '@angular/common';
import {
DataTableAdapter,
DataRow,
@@ -78,7 +80,20 @@ export class ObjectDataTableAdapter implements DataTableAdapter {
if (!col) {
throw new Error('Column not found');
}
return row.getValue(col.key);
let value = row.getValue(col.key);
if (col.type === 'date') {
let datePipe = new DatePipe();
let format = col.format || 'medium';
try {
return datePipe.transform(value, format);
} catch (err) {
console.error(`DocumentList: error parsing date ${value} to format ${format}`);
}
}
return value;
}
getSorting(): DataSorting {