what makes ANGULAR MATERIAL tables super cool

npm install --save @angular/material 
npm install --save @angular/animations
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {Component} from '@angular/core';import {DataSource} from '@angular/cdk';import {BehaviorSubject} from 'rxjs/BehaviorSubject';import {Observable} from 'rxjs/Observable';import 'rxjs/add/operator/startWith';import 'rxjs/add/observable/merge';import 'rxjs/add/operator/map';
@Component({selector: 'table-basic-example',styleUrls: ['table-basic-example.css'],templateUrl: 'table-basic-example.html',})
export class TableBasicExample {displayedColumns = ['userId', 'userName', 'progress', 'color'];exampleDatabase = new ExampleDatabase();dataSource: ExampleDataSource | null;ngOnInit() {this.dataSource = new ExampleDataSource(this.exampleDatabase);}}
const COLORS = ['maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple','fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray'];const NAMES = ['Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack','Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper','Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth'];
export interface UserData {id: string;name: string;progress: string;color: string;}
export class ExampleDatabase {dataChange: BehaviorSubject<UserData[]> = new BehaviorSubject<UserData[]>([]);get data(): UserData[] { return this.dataChange.value; }constructor() {// Fill up the database with 100 users.for (let i = 0; i < 100; i++) { this.addUser(); }}addUser() {const copiedData = this.data.slice();copiedData.push(this.createNewUser());this.dataChange.next(copiedData);}private createNewUser() {const name =NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' +NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.';return {id: (this.data.length + 1).toString(),name: name,progress: Math.round(Math.random() * 100).toString(),color: COLORS[Math.round(Math.random() * (COLORS.length - 1))]};}}
export class ExampleDataSource extends DataSource<any> {constructor(private _exampleDatabase: ExampleDatabase) {super();}connect(): Observable<UserData[]> {return this._exampleDatabase.dataChange;}disconnect() {}}

Data is provided to the table through a DataSource.

<ng-container cdkColumnDef="color">
<md-header-cell *cdkHeaderCellDef>Color</md-header-cell>
<md-cell *cdkCellDef="let row" [style.color]="row.color"> {{row.color}} </md-cell>
</ng-container>
<md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
<md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row>
<ng-container *ngFor="let col of displayedColumns" cdkColumnDef= {{col}}>
<md-header-cell *cdkHeaderCellDef md-sort-header > {{ col }} </md-header-cell>
<md-cell *cdkCellDef="let row"> {{row[col]}} </md-cell>
</ng-container>

That’s it

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store