checkin

Author: andrewseguin

src/cdk/table/public-api.ts

@@ -12,6 +12,7 @@ export * from './row';
 export * from './table-module';
 export * from './sticky-styler';
 export * from './can-stick';
+export * from './text-column';
 
 /** Re-export DataSource for a more intuitive experience for users of just the table. */
 export {DataSource} from '@angular/cdk/collections';

src/cdk/table/table-module.ts

@@ -17,6 +17,7 @@ import {
   CdkColumnDef, CdkHeaderCellDef, CdkHeaderCell, CdkCell, CdkCellDef,
   CdkFooterCellDef, CdkFooterCell
 } from './cell';
+import {CdkTextColumn} from './text-column';
 
 const EXPORTED_DECLARATIONS = [
   CdkTable,
@@ -37,6 +38,7 @@ const EXPORTED_DECLARATIONS = [
   DataRowOutlet,
   HeaderRowOutlet,
   FooterRowOutlet,
+  CdkTextColumn,
 ];
 
 @NgModule({

src/cdk/table/text-column.ts

@@ -0,0 +1,92 @@
+/**
+ * @license
+ * Copyright Google LLC 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 {Component, Input, OnDestroy, OnInit, Optional, ViewChild} from '@angular/core';
+import {CdkColumnDef} from './cell';
+import {CdkTable} from './table';
+
+/**
+ * Column that shows simply shows text content for the header and row cells. Assumes that the table
+ * is using the native table implementation (`<table>`)
+ *
+ * By default, the name of this column will be assumed to be both the header text and data property
+ * used to access the data value to show in cells. The header text can be overridden with the
+ * `headerText` input. Cell values can be overridden with the `dataAccessor` input.
+ */
+@Component({
+  selector: 'cdk-text-column',
+  template: `
+    <ng-container cdkColumnDef>
+      <th cdk-header-cell *cdkHeaderCellDef [style.text-align]="justify">
+        {{headerText}}
+      </th>
+      <td cdk-cell *cdkCellDef="let data" [style.text-align]="justify">
+        {{getCellText(data)}}
+      </td>
+    </ng-container>
+  `,
+})
+export class CdkTextColumn<T> implements OnDestroy, OnInit {
+  /** Column name that should be used to reference this column. */
+  @Input()
+  get name(): string { return this._name; }
+  set name(name: string) {
+    this._name = name;
+    this.columnDef.name = name;
+  }
+  _name: string;
+
+  /**
+   * Text label that should be used for the column header. If this property is not
+   * set, the header text will default to the column name with its first letter capitalized.
+   */
+  @Input() headerText: string;
+
+  /**
+   * Accessor function to retrieve the data should be provided to the cell. If this
+   * property is not set, the data cells will assume that the column name is the same
+   * as the data property the cells should display.
+   */
+  @Input() dataAccessor: (data: T, name: string) => string;
+
+  /** Alignment of the cell values. */
+  @Input() justify: 'start' | 'end' = 'start';
+
+  @ViewChild(CdkColumnDef) columnDef: CdkColumnDef;
+
+  constructor(@Optional() public table: CdkTable<T>) { }
+
+  ngOnInit() {
+    // If there is no header text defined, set it to be the capitalized column name.
+    if (this.headerText === undefined) {
+      this.headerText = this.name.charAt(0).toUpperCase() + this.name.slice(1);
+    }
+
+    if (this.table) {
+      this.table.addColumnDef(this.columnDef);
+    }
+  }
+
+  ngOnDestroy() {
+    if (this.table) {
+      this.table.removeColumnDef(this.columnDef);
+    }
+  }
+
+  /**
+   * Provides the cell text by using the data accessor function if one was provided, or access the
+   * data property with the column name as the key.
+   */
+  getCellText(data: T): any {
+    if (this.dataAccessor) {
+      return this.dataAccessor(data, this.name);
+    }
+
+    return (data as any)[this.name];
+  }
+}

src/dev-app/table/table-demo.ts

@@ -12,9 +12,19 @@ import {EXAMPLE_COMPONENTS} from '@angular/material-examples';
 
 @Component({
   moduleId: module.id,
-  template: '<material-example-list [ids]="examples"></material-example-list>',
+  template: `
+    <material-example-list [ids]="examples" [expandAll]="examples.length < 4">
+    </material-example-list>
+  `,
 })
 export class TableDemo {
   examples = Object.keys(EXAMPLE_COMPONENTS)
       .filter(example => example.startsWith('table-') || example.startsWith('cdk-table-'));
+
+  constructor() {
+    this.examples = [
+      'table-text-column-advanced',
+      'table-text-column',
+    ];
+  }
 }

src/lib/table/cell.ts

@@ -31,6 +31,7 @@ export class MatCellDef extends CdkCellDef {}
  */
 @Directive({
   selector: '[matHeaderCellDef]',
+  exportAs: 'matHeaderCellDef',
   providers: [{provide: CdkHeaderCellDef, useExisting: MatHeaderCellDef}]
 })
 export class MatHeaderCellDef extends CdkHeaderCellDef {}
@@ -51,6 +52,7 @@ export class MatFooterCellDef extends CdkFooterCellDef {}
  */
 @Directive({
   selector: '[matColumnDef]',
+  exportAs: 'matColumnDef',
   providers: [
     {provide: CdkColumnDef, useExisting: MatColumnDef},
     {provide: 'MAT_SORT_HEADER_COLUMN_DEF', useExisting: MatColumnDef}

src/lib/table/public-api.ts

@@ -11,3 +11,4 @@ export * from './cell';
 export * from './table';
 export * from './row';
 export * from './table-data-source';
+export * from './text-column';

src/lib/table/table-module.ts

@@ -26,6 +26,7 @@ import {
   MatRow,
   MatRowDef
 } from './row';
+import {MatTextColumn} from './text-column';
 import {CommonModule} from '@angular/common';
 import {MatCommonModule} from '@angular/material/core';
 
@@ -51,10 +52,16 @@ const EXPORTED_DECLARATIONS = [
   MatHeaderRow,
   MatRow,
   MatFooterRow,
+
+  MatTextColumn,
 ];
 
 @NgModule({
-  imports: [CdkTableModule, CommonModule, MatCommonModule],
+  imports: [
+    CdkTableModule,
+    CommonModule,
+    MatCommonModule,
+  ],
   exports: EXPORTED_DECLARATIONS,
   declarations: EXPORTED_DECLARATIONS,
 })