diff --git a/src/demo-app/data-table/data-table-demo.html b/src/demo-app/data-table/data-table-demo.html index 36a38c8e5cd..403a04f2b8a 100644 --- a/src/demo-app/data-table/data-table-demo.html +++ b/src/demo-app/data-table/data-table-demo.html @@ -27,61 +27,57 @@ -
+

CdkTable Example

- - - - - - - + + + ID - {{row.id}} - + {{row.id}} + - - - + + Progress - -
{{row.progress}}%
-
-
-
- - + +
{{row.progress}}%
+
+
+
+ + - - - + + + Name - {{row.name}} - + {{row.name}} + - - - + + Color - {{row.color}} - + {{row.color}} + - - + - - + + +

MdTable Example

+ +
+ + + + + + + + + ID + {{row.id}} + + + + + Progress + +
{{row.progress}}%
+
+
+
+ + + + + + Name + {{row.name}} + + + + + Color + {{row.color}} + + + + + + + -
+
\ No newline at end of file diff --git a/src/demo-app/data-table/data-table-demo.scss b/src/demo-app/data-table/data-table-demo.scss index a9abc92603d..939e7acf1ae 100644 --- a/src/demo-app/data-table/data-table-demo.scss +++ b/src/demo-app/data-table/data-table-demo.scss @@ -1,17 +1,3 @@ -/* Structure */ -.demo-table-container { - display: flex; - flex-direction: column; - max-height: 800px; - background: white; - - // Table fills in the remaining area with a scroll - .cdk-table { - flex: 1 1 auto; - overflow: auto; - } -} - .demo-data-source-actions { & > div { margin: 16px 0; @@ -36,45 +22,45 @@ .demo-row-highlight-even { background: #ff0099; } .demo-row-highlight-odd { background: #83f52c; } -/* - * Styles to make the demo's cdk-table match the material design spec - * https://material.io/guidelines/components/data-tables.html - */ +/** Styles so that the CDK Table columns have width and font size. */ .cdk-table { - display: block; -} - -.cdk-row, .cdk-header-row { - display: flex; - border-bottom: 1px solid #ccc; - align-items: center; - height: 48px; - padding: 0 8px; -} - -.cdk-cell, .cdk-header-cell { - width: 150px; - padding: 10px; - position: relative; - flex: 1; -} - -.cdk-header-cell { font-size: 12px; - font-weight: bold; - color: rgba(0, 0, 0, 0.54); - &.mat-sort-header-sorted { - color: black; + .cdk-row, .cdk-header-row { + display: flex; + } + + .cdk-cell, .cdk-header-cell { + flex: 1; + } + + .cdk-header-cell { + font-weight: bold; + + &.mat-sort-header-sorted { + color: black; + } } } -.cdk-cell { - font-size: 13px; - color: rgba(0, 0, 0, 0.87); +.demo-mat-table-example { + table-header-demo { + background: white; + } } -/* Column and cell styles */ + /* Structure so that the table is contained on a card */ +.demo-table-container { + max-height: 800px; + display: flex; + flex-direction: column; + + md-table { + overflow: auto; + } +} + +/* Column max widths */ .cdk-column-userId { max-width: 32px; text-align: right; @@ -82,13 +68,17 @@ } .cdk-column-userName { - max-width: 80px; + max-width: 120px; } +.cdk-column-color { + max-width: 160px; +} + +/* Progress bar styling */ .cdk-column-progress { - &.cdk-cell { + &.cdk-cell, &.mat-cell { display: flex; - position: relative; .demo-progress-stat { width: 32px; @@ -96,7 +86,6 @@ } .demo-progress-indicator-container { - position: relative; flex-grow: 1; display: flex; align-items: center; @@ -107,13 +96,3 @@ } } } - -.cdk-column-color { - max-width: 160px; - - &.cdk-cell { - font-weight: bold; - font-size: 16px; - font-family: cursive; - } -} diff --git a/src/demo-app/data-table/table-header-demo.scss b/src/demo-app/data-table/table-header-demo.scss index 7304532ab81..17fa696df99 100644 --- a/src/demo-app/data-table/table-header-demo.scss +++ b/src/demo-app/data-table/table-header-demo.scss @@ -3,7 +3,7 @@ align-items: center; justify-content: space-between; min-height: 64px; - padding: 0 16px; + padding: 0 24px; } .title { diff --git a/src/demo-app/demo-app-module.ts b/src/demo-app/demo-app-module.ts index dc3557f834a..89f5f4cbcda 100644 --- a/src/demo-app/demo-app-module.ts +++ b/src/demo-app/demo-app-module.ts @@ -52,6 +52,7 @@ import { MdCheckboxModule, MdChipsModule, MdCoreModule, + MdTableModule, MdDatepickerModule, MdDialogModule, MdExpansionModule, @@ -91,6 +92,7 @@ import {TableHeaderDemo} from './data-table/table-header-demo'; MdCardModule, MdCheckboxModule, MdChipsModule, + MdTableModule, MdDatepickerModule, MdDialogModule, MdExpansionModule, diff --git a/src/lib/core/compatibility/compatibility.ts b/src/lib/core/compatibility/compatibility.ts index dcf5203ca01..bbb5ec11027 100644 --- a/src/lib/core/compatibility/compatibility.ts +++ b/src/lib/core/compatibility/compatibility.ts @@ -50,6 +50,7 @@ export const MAT_ELEMENTS_SELECTOR = ` mat-card-subtitle, mat-card-title, mat-card-title-group, + mat-cell, mat-checkbox, mat-chip, mat-dialog-actions, @@ -61,6 +62,7 @@ export const MAT_ELEMENTS_SELECTOR = ` mat-grid-tile, mat-grid-tile-footer, mat-grid-tile-header, + mat-header-cell, mat-hint, mat-icon, mat-list, @@ -73,12 +75,14 @@ export const MAT_ELEMENTS_SELECTOR = ` mat-pseudo-checkbox, mat-radio-button, mat-radio-group, + mat-row, mat-select, mat-sidenav, mat-sidenav-container, mat-slider, mat-spinner, mat-tab, + mat-table, mat-tab-group, mat-toolbar`; @@ -112,6 +116,7 @@ export const MD_ELEMENTS_SELECTOR = ` md-card-subtitle, md-card-title, md-card-title-group, + md-cell, md-checkbox, md-chip, md-dialog-actions, @@ -123,6 +128,7 @@ export const MD_ELEMENTS_SELECTOR = ` md-grid-tile, md-grid-tile-footer, md-grid-tile-header, + md-header-cell, md-hint, md-icon, md-list, @@ -135,12 +141,14 @@ export const MD_ELEMENTS_SELECTOR = ` md-pseudo-checkbox, md-radio-button, md-radio-group, + md-row, md-select, md-sidenav, md-sidenav-container, md-slider, md-spinner, md-tab, + md-table, md-tab-group, md-toolbar`; diff --git a/src/lib/core/data-table/data-table.ts b/src/lib/core/data-table/data-table.ts index 13ce573050f..34178aa48c7 100644 --- a/src/lib/core/data-table/data-table.ts +++ b/src/lib/core/data-table/data-table.ts @@ -65,16 +65,21 @@ export class HeaderRowPlaceholder { constructor(public viewContainer: ViewContainerRef) { } } +/** + * The table template that can be used by the md-table. Should not be used outside of the + * material library. + */ +export const CDK_TABLE_TEMPLATE = ` + + `; + /** * A data table that connects with a data source to retrieve data of type T and renders * a header row and data rows. Updates the rows when new data is provided by the data source. */ @Component({ selector: 'cdk-table', - template: ` - - - `, + template: CDK_TABLE_TEMPLATE, host: { 'class': 'cdk-table', }, @@ -347,6 +352,7 @@ export class CdkTable implements CollectionViewer { * as defined by its list of columns to display. */ private _getHeaderCellTemplatesForRow(headerDef: CdkHeaderRowDef): CdkHeaderCellDef[] { + if (!headerDef.columns) { return []; } return headerDef.columns.map(columnId => { const column = this._columnDefinitionsByName.get(columnId); @@ -363,6 +369,7 @@ export class CdkTable implements CollectionViewer { * as defined by its list of columns to display. */ private _getCellTemplatesForRow(rowDef: CdkRowDef): CdkCellDef[] { + if (!rowDef.columns) { return []; } return rowDef.columns.map(columnId => { const column = this._columnDefinitionsByName.get(columnId); diff --git a/src/lib/core/data-table/index.ts b/src/lib/core/data-table/index.ts index afa44b9a3a2..08d486f3fc4 100644 --- a/src/lib/core/data-table/index.ts +++ b/src/lib/core/data-table/index.ts @@ -15,18 +15,26 @@ import {CdkColumnDef, CdkHeaderCellDef, CdkHeaderCell, CdkCell, CdkCellDef} from export * from './data-source'; export * from './data-table'; +const EXPORTED_DECLARATIONS = [ + CdkTable, + CdkRowDef, + CdkCellDef, + CdkCellOutlet, + CdkHeaderCellDef, + CdkColumnDef, + CdkCell, + CdkRow, + CdkHeaderCell, + CdkHeaderRow, + CdkHeaderRowDef, + RowPlaceholder, + HeaderRowPlaceholder, +]; + @NgModule({ imports: [CommonModule], - exports: [ - CdkTable, CdkRowDef, CdkCellDef, CdkCellOutlet, CdkHeaderCellDef, - CdkColumnDef, CdkCell, CdkRow, - CdkHeaderCell, CdkHeaderRow, CdkHeaderRowDef], - declarations: [ - CdkTable, CdkRowDef, CdkCellDef, CdkCellOutlet, CdkHeaderCellDef, - CdkColumnDef, CdkCell, CdkRow, - CdkHeaderCell, CdkHeaderRow, CdkHeaderRowDef, - RowPlaceholder, HeaderRowPlaceholder, - ] + exports: [EXPORTED_DECLARATIONS], + declarations: [EXPORTED_DECLARATIONS] }) export class CdkDataTableModule { } diff --git a/src/lib/core/data-table/row.ts b/src/lib/core/data-table/row.ts index a212034da04..21f4bad30ae 100644 --- a/src/lib/core/data-table/row.ts +++ b/src/lib/core/data-table/row.ts @@ -19,6 +19,12 @@ import { import {CdkCellDef} from './cell'; import {Subject} from 'rxjs/Subject'; +/** + * The row template that can be used by the md-table. Should not be used outside of the + * material library. + */ +export const CDK_ROW_TEMPLATE = ``; + /** * Base class for the CdkHeaderRowDef and CdkRowDef that handles checking their columns inputs * for changes and notifying the table. @@ -45,7 +51,7 @@ export abstract class BaseRowDef { ngOnChanges(changes: SimpleChanges): void { // Create a new columns differ if one does not yet exist. Initialize it based on initial value // of the columns property. - if (!this._columnsDiffer) { + if (!this._columnsDiffer && changes['columns'].currentValue) { this._columnsDiffer = this._differs.find(changes['columns'].currentValue).create(); } } @@ -142,7 +148,7 @@ export class CdkCellOutlet { /** Header template container that contains the cell outlet. Adds the right class and role. */ @Component({ selector: 'cdk-header-row', - template: '', + template: CDK_ROW_TEMPLATE, host: { 'class': 'cdk-header-row', 'role': 'row', @@ -154,7 +160,7 @@ export class CdkHeaderRow { } /** Data row template container that contains the cell outlet. Adds the right class and role. */ @Component({ selector: 'cdk-row', - template: '', + template: CDK_ROW_TEMPLATE, host: { 'class': 'cdk-row', 'role': 'row', diff --git a/src/lib/core/theming/_all-theme.scss b/src/lib/core/theming/_all-theme.scss index 2d2de07d1fb..a7c7c80161e 100644 --- a/src/lib/core/theming/_all-theme.scss +++ b/src/lib/core/theming/_all-theme.scss @@ -6,6 +6,7 @@ @import '../../card/card-theme'; @import '../../checkbox/checkbox-theme'; @import '../../chips/chips-theme'; +@import '../../table/table-theme'; @import '../../datepicker/datepicker-theme'; @import '../../dialog/dialog-theme'; @import '../../expansion/expansion-theme'; @@ -37,6 +38,7 @@ @include mat-card-theme($theme); @include mat-checkbox-theme($theme); @include mat-chips-theme($theme); + @include mat-table-theme($theme); @include mat-datepicker-theme($theme); @include mat-dialog-theme($theme); @include mat-expansion-panel-theme($theme); diff --git a/src/lib/core/typography/_all-typography.scss b/src/lib/core/typography/_all-typography.scss index 3ad42da491a..f7c7bebb40c 100644 --- a/src/lib/core/typography/_all-typography.scss +++ b/src/lib/core/typography/_all-typography.scss @@ -5,6 +5,7 @@ @import '../../card/card-theme'; @import '../../checkbox/checkbox-theme'; @import '../../chips/chips-theme'; +@import '../../table/table-theme'; @import '../../datepicker/datepicker-theme'; @import '../../dialog/dialog-theme'; @import '../../grid-list/grid-list-theme'; @@ -37,6 +38,7 @@ @include mat-card-typography($config); @include mat-checkbox-typography($config); @include mat-chips-typography($config); + @include mat-table-typography($config); @include mat-datepicker-typography($config); @include mat-dialog-typography($config); @include mat-grid-list-typography($config); diff --git a/src/lib/module.ts b/src/lib/module.ts index f64de2a236c..ba40512768c 100644 --- a/src/lib/module.ts +++ b/src/lib/module.ts @@ -10,9 +10,9 @@ import {NgModule} from '@angular/core'; import { A11yModule, + BidiModule, MdCommonModule, MdRippleModule, - BidiModule, ObserveContentModule, OverlayModule, PortalModule @@ -46,6 +46,7 @@ import {StyleModule} from './core/style/index'; import {MdDatepickerModule} from './datepicker/index'; import {CdkDataTableModule} from './core/data-table/index'; import {MdExpansionModule} from './expansion/index'; +import {MdTableModule} from './table/index'; import {MdSortModule} from './sort/index'; import {MdPaginatorModule} from './paginator/index'; @@ -57,6 +58,7 @@ const MATERIAL_MODULES = [ MdChipsModule, MdCheckboxModule, MdDatepickerModule, + MdTableModule, MdDialogModule, MdExpansionModule, MdGridListModule, @@ -86,7 +88,7 @@ const MATERIAL_MODULES = [ PlatformModule, MdCommonModule, ObserveContentModule, - CdkDataTableModule + CdkDataTableModule, ]; /** @deprecated */ diff --git a/src/lib/paginator/_paginator-theme.scss b/src/lib/paginator/_paginator-theme.scss index 1da4de91b21..a76cddbba90 100644 --- a/src/lib/paginator/_paginator-theme.scss +++ b/src/lib/paginator/_paginator-theme.scss @@ -5,6 +5,11 @@ @mixin mat-paginator-theme($theme) { $foreground: map-get($theme, foreground); + $background: map-get($theme, background); + + .mat-paginator { + background: mat-color($background, 'card'); + } .mat-paginator, .mat-paginator-page-size .mat-select-trigger { diff --git a/src/lib/public_api.ts b/src/lib/public_api.ts index 19d003d3d1c..0e28ac5a616 100644 --- a/src/lib/public_api.ts +++ b/src/lib/public_api.ts @@ -22,6 +22,7 @@ export * from './card/index'; export * from './chips/index'; export * from './checkbox/index'; export * from './core/data-table/index'; +export * from './table/index'; export * from './datepicker/index'; export * from './dialog/index'; export * from './expansion/index'; diff --git a/src/lib/table/_table-theme.scss b/src/lib/table/_table-theme.scss new file mode 100644 index 00000000000..fa5e56d6320 --- /dev/null +++ b/src/lib/table/_table-theme.scss @@ -0,0 +1,37 @@ +@import '../core/theming/palette'; +@import '../core/theming/theming'; +@import '../core/typography/typography-utils'; + +@mixin mat-table-theme($theme) { + $background: map-get($theme, background); + $foreground: map-get($theme, foreground); + + .mat-table { + background: mat-color($background, 'card'); + } + + .mat-row, .mat-header-row { + border-bottom-color: mat-color($foreground, divider); + } + + .mat-header-cell { + color: mat-color($foreground, secondary-text); + } + + .mat-cell { + color: mat-color($foreground, text); + } +} + +@mixin mat-table-typography($config) { + $font-family: mat-font-family($config); + + .mat-header-cell { + font-size: mat-font-size($config, caption); + font-weight: mat-font-weight($config, body-2); + } + + .mat-cell { + font-size: mat-font-size($config, body-1); + } +} diff --git a/src/lib/table/cell.ts b/src/lib/table/cell.ts new file mode 100644 index 00000000000..6105497c45e --- /dev/null +++ b/src/lib/table/cell.ts @@ -0,0 +1,44 @@ +/** + * @license + * Copyright Google Inc. All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ + +import {Directive, ElementRef, Renderer2} from '@angular/core'; +import {CdkCell, CdkColumnDef, CdkHeaderCell} from '../core/data-table/cell'; + +/** Header cell template container that adds the right classes and role. */ +@Directive({ + selector: 'md-header-cell, mat-header-cell', + host: { + 'class': 'mat-header-cell', + 'role': 'columnheader', + }, +}) +export class MdHeaderCell extends CdkHeaderCell { + constructor(columnDef: CdkColumnDef, + elementRef: ElementRef, + renderer: Renderer2) { + super(columnDef, elementRef, renderer); + renderer.addClass(elementRef.nativeElement, `mat-column-${columnDef.name}`); + } +} + +/** Cell template container that adds the right classes and role. */ +@Directive({ + selector: 'md-cell, mat-cell', + host: { + 'class': 'mat-cell', + 'role': 'gridcell', + }, +}) +export class MdCell extends CdkCell { + constructor(columnDef: CdkColumnDef, + elementRef: ElementRef, + renderer: Renderer2) { + super(columnDef, elementRef, renderer); + renderer.addClass(elementRef.nativeElement, `mat-column-${columnDef.name}`); + } +} diff --git a/src/lib/table/index.ts b/src/lib/table/index.ts new file mode 100644 index 00000000000..ed946593a09 --- /dev/null +++ b/src/lib/table/index.ts @@ -0,0 +1,26 @@ +/** + * @license + * Copyright Google Inc. All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ + +import {NgModule} from '@angular/core'; +import {MdTable} from './table'; +import {CdkDataTableModule} from '../core/data-table/index'; +import {MdCell, MdHeaderCell} from './cell'; +import {MdHeaderRow, MdRow} from './row'; +import {CommonModule} from '@angular/common'; +import {MdCommonModule} from '../core'; + +export * from './cell'; +export * from './table'; +export * from './row'; + +@NgModule({ + imports: [CdkDataTableModule, CommonModule, MdCommonModule], + exports: [MdTable, MdHeaderCell, MdCell, MdHeaderRow, MdRow], + declarations: [MdTable, MdHeaderCell, MdCell, MdHeaderRow, MdRow], +}) +export class MdTableModule {} diff --git a/src/lib/table/row.ts b/src/lib/table/row.ts new file mode 100644 index 00000000000..348b15bbb31 --- /dev/null +++ b/src/lib/table/row.ts @@ -0,0 +1,34 @@ +/** + * @license + * Copyright Google Inc. All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ + +import {ChangeDetectionStrategy, Component} from '@angular/core'; +import {CdkHeaderRow, CdkRow, CDK_ROW_TEMPLATE} from '../core/data-table/row'; + +/** Header template container that contains the cell outlet. Adds the right class and role. */ +@Component({ + selector: 'md-header-row, mat-header-row', + template: CDK_ROW_TEMPLATE, + host: { + 'class': 'mat-header-row', + 'role': 'row', + }, + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class MdHeaderRow extends CdkHeaderRow { } + +/** Data row template container that contains the cell outlet. Adds the right class and role. */ +@Component({ + selector: 'md-row, mat-row', + template: CDK_ROW_TEMPLATE, + host: { + 'class': 'mat-row', + 'role': 'row', + }, + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class MdRow extends CdkRow { } diff --git a/src/lib/table/table.scss b/src/lib/table/table.scss new file mode 100644 index 00000000000..05a301059d2 --- /dev/null +++ b/src/lib/table/table.scss @@ -0,0 +1,19 @@ +$mat-row-height: 48px; +$mat-row-horizontal-padding: 24px; + +.mat-table { + display: block; +} + +.mat-row, .mat-header-row { + display: flex; + border-bottom-width: 1px; + border-bottom-style: solid; + align-items: center; + height: $mat-row-height; + padding: 0 $mat-row-horizontal-padding; +} + +.mat-cell, .mat-header-cell { + flex: 1; +} diff --git a/src/lib/table/table.spec.ts b/src/lib/table/table.spec.ts new file mode 100644 index 00000000000..f4fc5f37209 --- /dev/null +++ b/src/lib/table/table.spec.ts @@ -0,0 +1,114 @@ +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; +import {Component, ViewChild} from '@angular/core'; +import {CdkTable} from '../core/data-table/data-table'; +import {DataSource} from '../core/data-table/data-source'; +import {BehaviorSubject} from 'rxjs/BehaviorSubject'; +import {Observable} from 'rxjs/Observable'; +import {CdkDataTableModule} from '../core/data-table/index'; +import {MdTableModule} from './index'; + +describe('MdTable', () => { + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [MdTableModule, CdkDataTableModule], + declarations: [SimpleMdTableApp], + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SimpleMdTableApp); + fixture.detectChanges(); + fixture.detectChanges(); + }); + + it('should create a table with the right content', () => { + const tableElement = fixture.nativeElement.querySelector('.mat-table'); + const headerRow = tableElement.querySelectorAll('.mat-header-cell'); + expectTextContent(headerRow[0], 'Column A'); + expectTextContent(headerRow[1], 'Column B'); + expectTextContent(headerRow[2], 'Column C'); + + const rows = tableElement.querySelectorAll('.mat-row'); + for (let i = 0; i < rows.length; i++) { + const cells = rows[i].querySelectorAll('.mat-cell'); + expectTextContent(cells[0], `a_${i + 1}`); + expectTextContent(cells[1], `b_${i + 1}`); + expectTextContent(cells[2], `c_${i + 1}`); + } + }); +}); + +function expectTextContent(el, text) { + if (el && el.textContent) { + expect(el.textContent.trim()).toBe(text); + } else { + fail(`Missing text content of ${text} in element ${el}`); + } +} + +interface TestData { + a: string; + b: string; + c: string; +} + +class FakeDataSource extends DataSource { + _dataChange = new BehaviorSubject([]); + set data(data: TestData[]) { this._dataChange.next(data); } + get data() { return this._dataChange.getValue(); } + + constructor() { + super(); + for (let i = 0; i < 3; i++) { this.addData(); } + } + + connect(): Observable { + return this._dataChange; + } + + addData() { + const nextIndex = this.data.length + 1; + + let copiedData = this.data.slice(); + copiedData.push({ + a: `a_${nextIndex}`, + b: `b_${nextIndex}`, + c: `c_${nextIndex}` + }); + + this.data = copiedData; + } +} + +@Component({ + template: ` + + + Column A + {{row.a}} + + + + Column B + {{row.b}} + + + + Column C + {{row.c}} + + + + + + ` +}) +class SimpleMdTableApp { + dataSource: FakeDataSource | null = new FakeDataSource(); + columnsToRender = ['column_a', 'column_b', 'column_c']; + + @ViewChild(CdkTable) table: CdkTable; +} + diff --git a/src/lib/table/table.ts b/src/lib/table/table.ts new file mode 100644 index 00000000000..064455c29f9 --- /dev/null +++ b/src/lib/table/table.ts @@ -0,0 +1,26 @@ +/** + * @license + * Copyright Google Inc. All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ + +import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core'; +import {CDK_TABLE_TEMPLATE, CdkTable} from '../core/data-table/data-table'; + +/** + * Wrapper for the CdkTable with Material design styles. + */ +@Component({ + moduleId: module.id, + selector: 'md-table, mat-table', + template: CDK_TABLE_TEMPLATE, + styleUrls: ['table.css'], + host: { + 'class': 'mat-table', + }, + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class MdTable extends CdkTable { }