docs(material/table): create example with columns defined dynamically (#22811)

* docs(material/table): create example with columns defined dynamically

* docs(material/table): lint

(cherry picked from commit 97e4836)

Author: andrewseguin

src/components-examples/material/table/index.ts

@@ -46,6 +46,9 @@ import {TableHarnessExample} from './table-harness/table-harness-example';
 import {TableWithRipplesExample} from './table-with-ripples/table-with-ripples-example';
 import {TableColumnStylingExample} from './table-column-styling/table-column-styling-example';
 import {TableRowBindingExample} from './table-row-binding/table-row-binding-example';
+import {
+  TableGeneratedColumnsExample
+} from './table-generated-columns/table-generated-columns-example';
 
 export {
   TableBasicExample,          TableFlexBasicExample,
@@ -62,6 +65,7 @@ export {
   TableReorderableExample,    TableRecycleRowsExample,
   TableHarnessExample,        TableColumnStylingExample,
   TableRowBindingExample,     TableWithRipplesExample,
+  TableGeneratedColumnsExample,
 };
 
 const EXAMPLES = [
@@ -79,6 +83,7 @@ const EXAMPLES = [
   TableReorderableExample,    TableRecycleRowsExample,
   TableHarnessExample,        TableColumnStylingExample,
   TableRowBindingExample,     TableWithRipplesExample,
+  TableGeneratedColumnsExample,
 ];
 
 @NgModule({

src/components-examples/material/table/table-generated-columns/table-generated-columns-example.css

@@ -0,0 +1,3 @@
+.demo-table {
+  width: 100%;
+}

src/components-examples/material/table/table-generated-columns/table-generated-columns-example.html

@@ -0,0 +1,13 @@
+<table mat-table [dataSource]="dataSource" class="mat-elevation-z8 demo-table">
+  <ng-container *ngFor="let column of columns" [cdkColumnDef]="column.columnDef">
+    <mat-header-cell *cdkHeaderCellDef>
+      {{column.header}}
+    </mat-header-cell>
+    <mat-cell *cdkCellDef="let row">
+      {{column.cell(row)}}
+    </mat-cell>
+  </ng-container>
+
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+</table>

src/components-examples/material/table/table-generated-columns/table-generated-columns-example.ts

@@ -0,0 +1,56 @@
+import {Component} from '@angular/core';
+
+export interface PeriodicElement {
+  name: string;
+  position: number;
+  weight: number;
+  symbol: string;
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [
+  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
+  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
+  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
+  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
+  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
+  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
+  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
+  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
+  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
+  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
+];
+
+/**
+ * @title Table with columns defined using ngFor instead of statically written in the template.
+ */
+@Component({
+  selector: 'table-generated-columns-example',
+  styleUrls: ['table-generated-columns-example.css'],
+  templateUrl: 'table-generated-columns-example.html',
+})
+export class TableGeneratedColumnsExample {
+  columns = [
+    {
+      columnDef: 'position',
+      header: 'No.',
+      cell: (element: PeriodicElement) => `${element.position}`
+    },
+    {
+      columnDef: 'name',
+      header: 'Name',
+      cell: (element: PeriodicElement) => `${element.name}`
+    },
+    {
+      columnDef: 'weight',
+      header: 'Weight',
+      cell: (element: PeriodicElement) => `${element.weight}`
+    },
+    {
+      columnDef: 'symbol',
+      header: 'Symbol',
+      cell: (element: PeriodicElement) => `${element.symbol}`
+    }
+  ];
+  dataSource = ELEMENT_DATA;
+  displayedColumns = this.columns.map(c => c.columnDef);
+}