diff --git a/src/platform/core/data-table/data-table.component.html b/src/platform/core/data-table/data-table.component.html index bb605c55b4..ac272290c8 100644 --- a/src/platform/core/data-table/data-table.component.html +++ b/src/platform/core/data-table/data-table.component.html @@ -1,10 +1,10 @@
- -
+ [class.mat-selectable]="isSelectable"> + @@ -14,17 +14,17 @@ *ngFor="let column of columns" [name]="column.name" [numeric]="column.numeric" - [active]="(column.sortable || _sortable) && column === _sortBy" - [sortable]="column.sortable || _sortable" - [sortOrder]="_sortOrder" + [active]="(column.sortable || isSortable) && column === sortByColumn" + [sortable]="column.sortable || isSortable" + [sortOrder]="sortOrderEnum" (sortChange)="handleSort(column)"> {{column.label}}
+ [class.mat-selected]="isSelectable && isRowSelected(row)" + *ngFor="let row of data" + (click)="isSelectable && select(row, !isRowSelected(row), $event)"> + diff --git a/src/platform/core/data-table/data-table.component.ts b/src/platform/core/data-table/data-table.component.ts index 7e6ae281d3..738f75f5f9 100644 --- a/src/platform/core/data-table/data-table.component.ts +++ b/src/platform/core/data-table/data-table.component.ts @@ -94,10 +94,13 @@ export class TdDataTableComponent implements ControlValueAccessor, AfterContentI * Sets the data to be rendered as rows. */ @Input('data') - set data(data: Object[]) { + set data(data: any[]) { this._data = data; this.refresh(); } + get data(): any[] { + return this._data; + } /** * columns?: ITdDataTableColumn[] @@ -134,8 +137,11 @@ export class TdDataTableComponent implements ControlValueAccessor, AfterContentI * Defaults to 'false' */ @Input('selectable') - set selectable(_selectable: string | boolean) { - this._selectable = _selectable !== '' ? (_selectable === 'true' || _selectable === true) : true; + set selectable(selectable: string | boolean) { + this._selectable = selectable !== '' ? (selectable === 'true' || selectable === true) : true; + } + get isSelectable(): boolean { + return this._selectable; } /** @@ -147,6 +153,9 @@ export class TdDataTableComponent implements ControlValueAccessor, AfterContentI set multiple(multiple: string | boolean) { this._multiple = multiple !== '' ? (multiple === 'true' || multiple === true) : true; } + get isMultiple(): boolean { + return this._multiple; + } /** * sortable?: boolean @@ -157,6 +166,9 @@ export class TdDataTableComponent implements ControlValueAccessor, AfterContentI set sortable(sortable: string | boolean) { this._sortable = sortable !== '' ? (sortable === 'true' || sortable === true) : true; } + get isSortable(): boolean { + return this._sortable; + } /** * sortBy?: string @@ -174,6 +186,9 @@ export class TdDataTableComponent implements ControlValueAccessor, AfterContentI this._sortBy = column; } + get sortByColumn(): ITdDataTableColumn { + return this._sortBy; + } /** * sortOrder?: ['ASC' | 'DESC'] or TdDataTableSortingOrder @@ -190,6 +205,9 @@ export class TdDataTableComponent implements ControlValueAccessor, AfterContentI this._sortOrder = sortOrder === 'ASC' ? TdDataTableSortingOrder.Ascending : TdDataTableSortingOrder.Descending; } + get sortOrderEnum(): TdDataTableSortingOrder { + return this._sortOrder; + } get hasData(): boolean { return this._data && this._data.length > 0;