Material UI Table - Tuong-Nguyen/Angular-D3-Cometd GitHub Wiki

Import:

To use the material table and datasource you need import some modules:

// In your module file:
import { MdTableModule, //Table module which provide table component to use in HTML design.
         MdSortModule, // This module provide the property to enable sort feature on table.
       } from '@angular/material';
import { CdkTableModule} from '@angular/cdk'; // This module will provide components which use to define the table cell.
// you also need import some components in your component.ts file:
import { DataSource} from '@angular/cdk';
import { Observable} from 'rxjs/Observable';
import {MdSort} from '@angular/material';
// and some function to sort you data.
import 'rxjs/add/operator/startWith';
import 'rxjs/add/observable/merge';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/of';

Implement HTML code:

<md-table [dataSource]="dataSource" mdSort>
  <ng-container cdkColumnDef="dashboardName">
	<md-header-cell *cdkHeaderCellDef md-sort-header> Name </md-header-cell>
	<md-cell *cdkCellDef="let row">{{row.name}}</md-cell>
  </ng-container>
  <ng-container cdkColumnDef="Actions">
	<md-header-cell *cdkHeaderCellDef class="actionsColumn"> Actions </md-header-cell>
	<md-cell *cdkCellDef="let row" class="actionsColumn">
	  <div class="actions" fxLayoutAlign="center center" fxLayoutGap="10px">
		<button md-icon-button><md-icon>open_in_new</md-icon></button>
		<button md-icon-button><md-icon>settings</md-icon></button>
		<button md-icon-button><md-icon>delete_forever</md-icon></button>
	  </div>
	</md-cell>
  </ng-container>
  <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
  <md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row>
</md-table>
  • [dataSource]="dataSource" define your datasouce
  • mdSort enable sort table to user md-sort-header on table header.
  • <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row> define your table header with column name array.
  • <md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row> define the table row datas that will merge with column name array.

In <ng-container>:

  • cdkColumnDef="dashboardName" specify the column name. this name must be available in the displayedColumns array.
  • <md-header-cell *cdkHeaderCellDef md-sort-header> Name </md-header-cell> Specify the displayname of the column header.
  • <md-cell *cdkCellDef="let row">{{row.name}}</md-cell> specify the column cell data.

Implement Typescript code:

import {Component, OnInit, Input, ViewChild} from '@angular/core';
import { DataSource} from '@angular/cdk';
import { Observable} from 'rxjs/Observable';
import {MdSort} from '@angular/material';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/observable/merge';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/of';

@Component({
  selector: 'app-dashboard-management',
  templateUrl: './dashboard-management.component.html',
  styleUrls: ['./dashboard-management.component.css']
})
export class DashboardManagementComponent implements OnInit {
  @Input() dashboards: Dashboard[];
  displayedColumns = ['dashboardName', 'Actions'];
  dataSource: DashboardDataSource | null;

  @ViewChild(MdSort) sort: MdSort;
  ngOnInit() {
    this.dataSource = new DashboardDataSource(this.dashboards, this.sort);
    console.log(this.dataSource);
  }
}
// this is the data object (POJO)
export interface Dashboard {
  id: string;
  name: string;
}

export class DashboardDataSourceWithoutSort extends DataSource<any> {
  private _exampleDatabase: Dashboard[];
  constructor(exampleDatabase: Dashboard[]) {
    super();
    this._exampleDatabase = exampleDatabase;
  }
  /** Connect function called by the table to retrieve one stream containing the data to render. */
  connect(): Observable<Dashboard[]> {
    return Observable.of(this._exampleDatabase);
  }
  disconnect() {}
}

export class DashboardDataSource extends DataSource<any> {
  private _exampleDatabase: Dashboard[];
  private _sort: MdSort;
  constructor(exampleDatabase: Dashboard[], sort: MdSort) {
    super();
    this._exampleDatabase = exampleDatabase;
    this._sort = sort;
  }

  /** Connect function called by the table to retrieve one stream containing the data to render. */
  connect(): Observable<Dashboard[]> {
    const displayDataChanges = [
      this._exampleDatabase,
      this._sort.mdSortChange,
    ];

    return Observable.merge(...displayDataChanges).map(() => {
      return this.getSortedData();
    });
  }

  disconnect() {}

  getSortedData(): Dashboard[] {
    const data = this._exampleDatabase.slice();
    if (!this._sort.active || this._sort.direction === '') {
      return data;
    }

    return data.sort((a, b) => {
      let propertyA: number | string = '';
      let propertyB: number | string = '';

      switch (this._sort.active) {
        case 'dashboardName':
          [propertyA, propertyB] = [a.name, b.name];
          break;
      }

      const valueA = isNaN(+propertyA) ? propertyA : +propertyA;
      const valueB = isNaN(+propertyB) ? propertyB : +propertyB;

      return (valueA < valueB ? -1 : 1) * (this._sort.direction === 'asc' ? 1 : -1);
    });
  }
}

To know more about Material-ui Table

⚠️ **GitHub.com Fallback** ⚠️