diff --git a/src/app/components/components/data-table/data-table.component.html b/src/app/components/components/data-table/data-table.component.html
index e75d5f3192..7403151e9e 100644
--- a/src/app/components/components/data-table/data-table.component.html
+++ b/src/app/components/components/data-table/data-table.component.html
@@ -97,6 +97,7 @@
with custom headings, columns, and inline editing
Basic Data Table
+ with nested data, formatting, and templates
@@ -137,8 +138,8 @@ Basic Data Table
})
export class Demo {
columns: ITdDataTableColumn[] = [
- { name: 'name', label: 'Dessert (100g serving)' },
- { name: 'type', label: 'Type' },
+ { name: 'food.name', label: 'Dessert (100g serving)' },
+ { name: 'food.type', label: 'Type' },
{ name: 'calories', label: 'Calories', numeric: true, format: NUMBER_FORMAT },
{ name: 'fat', label: 'Fat (g)', numeric: true, format: DECIMAL_FORMAT },
{ name: 'carbs', label: 'Carbs (g)', numeric: true, format: NUMBER_FORMAT },
@@ -151,8 +152,10 @@ Basic Data Table
basicData: any[] = [
{
'id': 1,
- 'name': 'Frozen yogurt',
- 'type': 'Ice cream',
+ 'food': {
+ 'name': 'Frozen yogurt',
+ 'type': 'Ice cream',
+ },
'calories': 159.0,
'fat': 6.0,
'carbs': 24.0,
@@ -163,8 +166,10 @@ Basic Data Table
'comments': 'I love froyo!',
}, {
'id': 2,
- 'name': 'Ice cream sandwich',
- 'type': 'Ice cream',
+ 'food': {
+ 'name': 'Ice cream sandwich',
+ 'type': 'Ice cream',
+ },
'calories': 237.0,
'fat': 9.0,
'carbs': 37.0,
@@ -174,8 +179,10 @@ Basic Data Table
'iron': 1.0,
}, {
'id': 3,
- 'name': 'Eclair',
- 'type': 'Pastry',
+ 'food': {
+ 'name': 'Eclair',
+ 'type': 'Pastry',
+ },
'calories': 262.0,
'fat': 16.0,
'carbs': 24.0,
diff --git a/src/app/components/components/data-table/data-table.component.ts b/src/app/components/components/data-table/data-table.component.ts
index 5703296626..02189a6356 100644
--- a/src/app/components/components/data-table/data-table.component.ts
+++ b/src/app/components/components/data-table/data-table.component.ts
@@ -60,6 +60,10 @@ export class DataTableDemoComponent implements OnInit {
Emits an [ITdDataTableSelectAllEvent] implemented object.`,
name: 'selectAll',
type: `function()`,
+ }, {
+ description: `Refreshes data table and updates [data] and [columns]`,
+ name: 'refresh',
+ type: `function()`,
}];
cellAttrs: Object[] = [{
@@ -122,7 +126,7 @@ export class DataTableDemoComponent implements OnInit {
];
data: any[] = [
- {
+ {
'id': 1,
'name': 'Frozen yogurt',
'type': 'Ice cream',
diff --git a/src/platform/core/data-table/README.md b/src/platform/core/data-table/README.md
index d65cf94241..50860e500c 100644
--- a/src/platform/core/data-table/README.md
+++ b/src/platform/core/data-table/README.md
@@ -20,6 +20,7 @@ Properties:
| `sortChange` | `function` | Event emitted when the column headers are clicked. [sortable] needs to be enabled. Emits an [ITdDataTableSortEvent] implemented object.
| `rowSelect` | `function` | Event emitted when a row is selected/deselected. [selectable] needs to be enabled. Emits an [ITdDataTableSelectEvent] implemented object.
| `selectAll` | `function` | Event emitted when all rows are selected/deselected by the all checkbox. [selectable] needs to be enabled. Emits an [ITdDataTableSelectAllEvent] implemented object.
+| `refresh` | `function` | Refreshes data table and rerenders [data] and [columns]
## Setup
diff --git a/src/platform/core/data-table/data-table.component.html b/src/platform/core/data-table/data-table.component.html
index 1915674e4a..6f356db751 100644
--- a/src/platform/core/data-table/data-table.component.html
+++ b/src/platform/core/data-table/data-table.component.html
@@ -15,6 +15,8 @@
[numeric]="column.numeric"
[active]="_sortable && column === _sortBy"
[sortable]="_sortable"
+ (mouseleave)="column.tooltip && tooltipRefresh()"
+ (mouseenter)="column.tooltip && tooltipRefresh()"
[sortOrder]="_sortOrder"
(sortChange)="handleSort(column)">
{{column.label}}
@@ -31,11 +33,11 @@
- {{column.format ? column.format(row[column.name]) : row[column.name]}}
+ {{column.format ? column.format(getCellValue(column, row)) : getCellValue(column, row)}}
+ [ngOutletContext]="{ value: getCellValue(column, row), row: row, column: column.name }">
|
diff --git a/src/platform/core/data-table/data-table.component.ts b/src/platform/core/data-table/data-table.component.ts
index b3d9aedcaf..dec4673a25 100644
--- a/src/platform/core/data-table/data-table.component.ts
+++ b/src/platform/core/data-table/data-table.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter, forwardRef,
+import { Component, Input, Output, EventEmitter, forwardRef, ChangeDetectionStrategy, ChangeDetectorRef,
ContentChildren, TemplateRef, AfterContentInit, QueryList } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
@@ -26,6 +26,7 @@ export interface ITdDataTableColumn {
tooltip?: string;
numeric?: boolean;
format?: (value: any) => any;
+ nested?: boolean;
};
export interface ITdDataTableSelectEvent {
@@ -43,6 +44,7 @@ export interface ITdDataTableSelectAllEvent {
selector: 'td-data-table',
styleUrls: [ 'data-table.component.scss' ],
templateUrl: 'data-table.component.html',
+ changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TdDataTableComponent implements ControlValueAccessor, AfterContentInit {
@@ -214,6 +216,8 @@ export class TdDataTableComponent implements ControlValueAccessor, AfterContentI
@Output('selectAll') onSelectAll: EventEmitter =
new EventEmitter();
+ constructor(private _changeDetectorRef: ChangeDetectorRef) {}
+
/**
* Loads templates and sets them in a map for faster access.
*/
@@ -224,7 +228,14 @@ export class TdDataTableComponent implements ControlValueAccessor, AfterContentI
this._templates.toArray()[i].templateRef
);
}
- }
+ }
+
+ getCellValue(column: ITdDataTableColumn, value: any): string {
+ if (column.nested === undefined || column.nested) {
+ return this._getNestedValue(column.name, value);
+ }
+ return value[column.name];
+ }
/**
* Getter method for template references
@@ -244,7 +255,16 @@ export class TdDataTableComponent implements ControlValueAccessor, AfterContentI
* Refreshes data table and rerenders [data] and [columns]
*/
refresh(): void {
- this.clearModel();
+ this._changeDetectorRef.markForCheck();
+ }
+
+ /**
+ * Workaround for https://github.com/angular/material2/issues/1825
+ */
+ tooltipRefresh(): void {
+ setTimeout(() => {
+ this.refresh();
+ }, 100);
}
/**
@@ -346,4 +366,16 @@ export class TdDataTableComponent implements ControlValueAccessor, AfterContentI
onChange = (_: any) => noop;
onTouched = () => noop;
+ private _getNestedValue(name: string, value: any): string {
+ if (!(value instanceof Object) || !name) {
+ return value;
+ }
+ if (name.indexOf('.') > -1) {
+ let splitName: string[] = name.split(/\.(.+)/, 2);
+ return this._getNestedValue(splitName[1], value[splitName[0]]);
+ } else {
+ return value[name];
+ }
+ }
+
}
diff --git a/src/platform/core/data-table/data-table.module.ts b/src/platform/core/data-table/data-table.module.ts
index f36c65df6a..9b5fa8a16e 100644
--- a/src/platform/core/data-table/data-table.module.ts
+++ b/src/platform/core/data-table/data-table.module.ts
@@ -22,7 +22,7 @@ const TD_DATA_TABLE: Type[] = [
];
export { TdDataTableComponent, TdDataTableSortingOrder,
- ITdDataTableColumn } from './data-table.component';
+ ITdDataTableColumn, ITdDataTableSelectEvent } from './data-table.component';
export { TdDataTableService } from './services/data-table.service';
export { TdDataTableColumnComponent,
ITdDataTableSortChangeEvent } from './data-table-column/data-table-column.component';