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)}} 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';