Covalent Layout Data table Users

<!DOCTYPE html>
<html>
  <head>
    <title>Covalent Plnkr</title>
        <base href="">
    <!-- Load common libraries -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/2.4.2/typescript.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.8.12/zone.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.41/system.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
    
    <!-- Configure SystemJS -->
    <script src="systemjs.config.js"></script>

    <script>
      System
        .import('main.ts')
        .catch(console.error.bind(console));
    </script>
    
    <!-- Load the Covalent platform stylesheet -->
    <link href="https://unpkg.com/@covalent/core@1.0.0-rc.0/common/platform.css" rel="stylesheet">

    <!-- Load the Covalent/Material prebuilt theme -->
    <link href="https://unpkg.com/@covalent/core@1.0.0-rc.0/theming/prebuilt/blue-orange.css" rel="stylesheet">
    
  </head>

  <body>
    <covalent-app>
      <div style="padding: 20%;text-align:center;">
        <img src="https://camo.githubusercontent.com/5e708dbe0cf622ebdbdab5be0ede859ceb08ab91/68747470733a2f2f63646e2e7261776769742e636f6d2f54657261646174612f636f76616c656e742f646576656c6f702f7372632f6170702f6173736574732f69636f6e732f636f76616c656e742e737667" width="100">
        <h3>Covalent Loading...</h3>
      </div>
    </covalent-app>
  </body>

</html>

<!--
© 2017 Teradata. All rights reserved.
-->

<td-layout>
  <td-navigation-drawer flex sidenavTitle="Covalent" logo="" name="Firstname Lastname" email="firstname.lastname@company.com">
    <mat-nav-list>
      <a *ngFor="let item of routes" mat-list-item>
        <mat-icon>{{item.icon}}</mat-icon>{{item.title}}</a>
    </mat-nav-list>
    <div td-navigation-drawer-menu>
      <mat-nav-list>
        <a *ngFor="let item of usermenu" mat-list-item>
          <mat-icon>{{item.icon}}</mat-icon>{{item.title}}</a>
      </mat-nav-list>
    </div>
  </td-navigation-drawer>
  <td-layout-nav color="accent">
    <div td-toolbar-content layout="row" layout-align="start center" flex>
      <button mat-icon-button td-menu-button tdLayoutToggle>
        <mat-icon>menu</mat-icon>
      </button>
      <mat-icon [routerLink]="['/']" class="mat-icon-logo cursor-pointer" svgIcon=""></mat-icon>
      <span [routerLink]="['/']" class="cursor-pointer">Covalent</span>
      <span flex></span>
      <a mat-icon-button matTooltip="Docs" href="https://teradata.github.io/covalent/" target="_blank">
        <mat-icon>chrome_reader_mode</mat-icon>
      </a>
      <a mat-icon-button matTooltip="Github" href="https://github.com/teradata/covalent" target="_blank">
        <mat-icon svgIcon=""></mat-icon>
      </a>
    </div>
    <td-layout-manage-list #manageList [opened]="media.registerQuery('gt-sm') | async" [mode]="(media.registerQuery('gt-sm') | async) ? 'side' :  'over'" [sidenavWidth]="(media.registerQuery('gt-xs') | async) ? '257px' : '100%'">
      <mat-toolbar td-sidenav-content>
        <span>Optional Title</span>
      </mat-toolbar>
      <mat-nav-list td-sidenav-content [tdLayoutManageListClose]="!media.query('gt-sm')">
        <ng-template let-item let-last="last" ngFor [ngForOf]="navmenu">
          <a mat-list-item>
            <mat-icon matListIcon>{{item.icon}}</mat-icon> {{item.title}}
          </a>
        </ng-template>
      </mat-nav-list>
      <mat-toolbar>
        <div layout="row" layout-align="start center" flex>
          <button mat-icon-button tdLayoutManageListOpen [hideWhenOpened]="true">
            <mat-icon>arrow_back</mat-icon>
          </button>
          <span>Content Title</span>
          <span flex></span>
          <button mat-icon-button>
            <mat-icon>settings</mat-icon>
          </button>
        </div>
      </mat-toolbar>
      <div layout-gt-sm="row" tdMediaToggle="gt-xs" [mediaClasses]="['push-sm']">
        <div flex-gt-sm="60">
          <mat-card>
            <mat-card-title>Users</mat-card-title>
            <mat-card-subtitle>users list</mat-card-subtitle>
            <mat-divider></mat-divider>
            <mat-card-content>
              {{filteredData | json}}
              <td-data-table #dataTable [data]="filteredData" [columns]="columns" [sortable]="true" [sortBy]="sortBy" [sortOrder]="sortOrder" [selectable]="selectable" [(ngModel)]="selectedRows" (sortChange)="sort($event)" [style.height.px]="200">
                <ng-template class="col-1" tdDataTableTemplate="{{id}}" let-value="value" let-row="row" let-column="column">
                </ng-template>
              </td-data-table>
              <div class="card-actions">
                <button (click)=selectedRowsx() style="height: 30px;width: 100px;" title="Selected Rows" > Selected Row
                  <i class="fa fa-download"></i>
                </button>
              </div>
            </mat-card-content>
          </mat-card>
        </div>
      </div>
    </td-layout-manage-list>
    <td-layout-footer>
      <div layout="row" layout-align="start center">
        <span class="md-caption">Copyright &copy; 2017 Teradata. All rights reserved</span>
      </div>
    </td-layout-footer>
  </td-layout-nav>
</td-layout>

<!--
© 2017 Teradata. All rights reserved.
-->


import { Component, OnInit, Input, Output, AfterViewInit,ChangeDetectionStrategy, ChangeDetectorRef, EventEmitter, ViewChild, TemplateRef } from '@angular/core';
import { IPageChangeEvent } from '@covalent/core/paging';
import {HttpInterceptorService} from '@covalent/http'
import {bootstrap} from '@angular/platform-browser-dynamic';
import {UsersService} from './users.service';
import { TdMediaService, TdDataTableService, TdDataTableSortingOrder, ITdDataTableSortChangeEvent, ITdDataTableColumn,TdDataTableComponent } from '@covalent/core';


interface IUser {
  id: number;
  first_name: string;
  last_name: string;
  avatar: string;
}

@Component({
  selector: 'covalent-app',
  templateUrl: 'app.component.html',
  styles: ['img.avatar{max-height: 30px}']
})
export class AppComponent implements OnInit {
 
 datatable: TdDataTableComponent;
 
 //@ViewChild(TdDataTableComponent) dataTableRef: TdDataTableComponent
 data: IUser[] = [];
 columns: ITdDataTableColumn[] = [
    { name: 'id',  label: 'ID', sortable: true },
    { name: 'first_name',  label: 'First Name', sortable: true, width: 150 },
    { name: 'last_name', label: 'Last Name', filter: true, sortable: false },
    { name: 'avatar', label: '' }
  ];
  filteredData: any[] = this.data;
  filteredTotal: number = this.data.length;
  sortBy: string = 'first_name';
  sortOrder: TdDataTableSortingOrder = TdDataTableSortingOrder.Descending;
  fromRow = 1;
  currentPage = 1;
  pageSize = 2;
  id: 'id';
  selectable: boolean = true;
  selectedRows: any[] = [];
  
  

  routes: Object[] = [{
      icon: 'home',
      route: '.',
      title: 'Home',
    }, {
      icon: 'library_books',
      route: '.',
      title: 'Documentation',
    }
  ];
  usermenu: Object[] = [];
  navmenu: Object[] = [{
      icon: 'looks_one',
      route: '.',
      title: 'First item',
      description: 'Item description',
    }, {
      icon: 'looks_two',
      route: '.',
      title: 'Second item',
      description: 'Item description',
    }
  ];

  constructor(private _http: HttpInterceptorService,
  private usersService: UsersService, 
  public media: TdMediaService,
  private _dataTableService: TdDataTableService) {
    this.filter();
  }
  
  ngOnInit(){
    this.usersService.query().subscribe(resp=> {
      this.data = resp.data
      return this.filter();
    });
  }
  
  sort(sortEvent: ITdDataTableSortChangeEvent): void {
    this.sortBy = sortEvent.name;
    this.sortOrder = sortEvent.order;
    this.filter();
  }

  filter(): void {
    let newData: any[] = this.data;
    let excludedColumns: string[] = this.columns
    .filter((column: ITdDataTableColumn) => {
      return ((column.filter === undefined && column.hidden === true) ||
              (column.filter !== undefined && column.filter === false));
    }).map((column: ITdDataTableColumn) => {
      return column.name;
    });
    newData = this._dataTableService.filterData(newData, this.searchTerm, true, excludedColumns);
    this.filteredTotal = newData.length;
    newData = this._dataTableService.sortData(newData, this.sortBy, this.sortOrder);
    newData = this._dataTableService.pageData(newData, this.fromRow, this.currentPage * this.pageSize);
    // THIS EXAMPLE WORKS ONLY WITH .map !
    this.filteredData = newData; //.map(row => row);
  }
  selectedRowsx(): void {
   debugger;
   let select : this.datatable.selectedRows;
  }
}

/*
© 2017 Teradata. All rights reserved.
*/

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {AppComponent} from './app.component';
import {MatCardModule, MatIconModule, MatListModule, MatToolbarModule, MatButtonModule} from '@angular/material';
import {CovalentLayoutModule, CovalentMediaModule,CovalentDataTableModule } from '@covalent/core';
import {CovalentHttpModule} from '@covalent/http';
import {UsersService} from './users.service'
import { RouterModule } from '@angular/router';
import { FormsModule } from '@angular/forms';

const ROUTES = [];

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    MatCardModule,
    MatIconModule,
    MatListModule,
    MatToolbarModule,
    MatButtonModule,
    CovalentLayoutModule,
    CovalentMediaModule,
    CovalentDataTableModule,
    CovalentHttpModule.forRoot(),
    RouterModule.forRoot(ROUTES),
    FormsModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: [UsersService]
})
export class PlunkerAppModule {}

platformBrowserDynamic().bootstrapModule(PlunkerAppModule);

/*
© 2017 Teradata. All rights reserved.
*/

// modify this to point to different versions (an empty string '' would mean latest)
let angularVer = '@5.0.1';
let cdkVer = '@5.0.0-rc0';
let materialVer = '@5.0.0-rc0';
let covalentVer = '@1.0.0-rc.0';
let rxjsVer = '@5.5.2';
let tsLibVer = '@1.7.1';

/** Add Transpiler for Typescript */
System.config({
  transpiler: 'typescript',
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  packages: {
    '.': {
      defaultExtension: 'ts'
    },
    'vendor': {
      defaultExtension: 'js'
    }
  }
});

System.config({
  map: {
    'main': 'main.js',
    
    // Angular specific mappings.
    '@angular/animations': 'https://unpkg.com/@angular/animations'+ angularVer +'/bundles/animations.umd.js',
    '@angular/animations/browser': 'https://unpkg.com/@angular/animations'+ angularVer +'/bundles/animations-browser.umd.js',
    '@angular/core': 'https://unpkg.com/@angular/core'+ angularVer +'/bundles/core.umd.js',
    '@angular/common': 'https://unpkg.com/@angular/common'+ angularVer +'/bundles/common.umd.js',
    '@angular/common/http': 'https://unpkg.com/@angular/common'+ angularVer +'/bundles/common-http.umd.js',
    '@angular/compiler': 'https://unpkg.com/@angular/compiler'+ angularVer +'/bundles/compiler.umd.js',
    '@angular/http': 'https://unpkg.com/@angular/http'+ angularVer +'/bundles/http.umd.js',
    '@angular/forms': 'https://unpkg.com/@angular/forms'+ angularVer +'/bundles/forms.umd.js',
    '@angular/router': 'https://unpkg.com/@angular/router'+ angularVer +'/bundles/router.umd.js',
    '@angular/platform-browser': 'https://unpkg.com/@angular/platform-browser'+ angularVer +'/bundles/platform-browser.umd.js',
    '@angular/platform-browser/animations': 'https://unpkg.com/@angular/platform-browser'+ angularVer +'/bundles/platform-browser-animations.umd.js',
    '@angular/platform-browser-dynamic': 'https://unpkg.com/@angular/platform-browser-dynamic'+ angularVer +'/bundles/platform-browser-dynamic.umd.js',
    
    '@angular/cdk/a11y': 'https://unpkg.com/@angular/cdk'+ cdkVer +'/bundles/cdk-a11y.umd.js',
    '@angular/cdk/keycodes': 'https://unpkg.com/@angular/cdk'+ cdkVer +'/bundles/cdk-keycodes.umd.js',
    '@angular/cdk/portal': 'https://unpkg.com/@angular/cdk'+ cdkVer +'/bundles/cdk-portal.umd.js',
    '@angular/cdk/overlay': 'https://unpkg.com/@angular/cdk'+ cdkVer +'/bundles/cdk-overlay.umd.js',
    '@angular/cdk/coercion': 'https://unpkg.com/@angular/cdk'+ cdkVer +'/bundles/cdk-coercion.umd.js',
    '@angular/cdk/scrolling': 'https://unpkg.com/@angular/cdk'+ cdkVer +'/bundles/cdk-scrolling.umd.js',
    '@angular/cdk/table': 'https://unpkg.com/@angular/cdk'+ cdkVer +'/bundles/cdk-table.umd.js',
    '@angular/cdk/layout': 'https://unpkg.com/@angular/cdk'+ cdkVer +'/bundles/cdk-layout.umd.js',
    '@angular/cdk/accordion': 'https://unpkg.com/@angular/cdk'+ cdkVer +'/bundles/cdk-accordion.umd.js',
    '@angular/cdk/collections': 'https://unpkg.com/@angular/cdk'+ cdkVer +'/bundles/cdk-collections.umd.js',
    '@angular/cdk/platform': 'https://unpkg.com/@angular/cdk'+ cdkVer +'/bundles/cdk-platform.umd.js',
    '@angular/cdk/bidi': 'https://unpkg.com/@angular/cdk'+ cdkVer +'/bundles/cdk-bidi.umd.js',
    '@angular/cdk/observers': 'https://unpkg.com/@angular/cdk'+ cdkVer +'/bundles/cdk-observers.umd.js',
    '@angular/cdk/stepper': 'https://unpkg.com/@angular/cdk'+ cdkVer +'/bundles/cdk-stepper.umd.js',
    '@angular/material': 'https://unpkg.com/@angular/material'+ materialVer +'/bundles/material.umd.js',
    
    // Covalent specific mappings.
    '@covalent/core': 'https://unpkg.com/@covalent/core'+ covalentVer +'/bundles/core.umd.min.js',
    '@covalent/http': 'https://unpkg.com/@covalent/http'+ covalentVer +'/bundles/http.umd.min.js',
    '@covalent/dynamic-forms': 'https://unpkg.com/@covalent/dynamic-forms'+ covalentVer +'/bundles/dynamic-forms.min.umd.js',
    
    // Rxjs/tsLib mapping
    'rxjs': 'https://unpkg.com/rxjs' + rxjsVer,
    'tslib': 'https://unpkg.com/tslib' + tsLibVer,
  },
  packages: {
    // Thirdparty barrels.
    'rxjs': { main: 'index' },
  }
});


/*
© 2017 Teradata. All rights reserved.
*/

## Covalent Plunker

This `plnkr` should be used for *demos*, *issue replication* and *idea sharing*.

Go to our [documentation](http://getcovalent.com) site or [repo](https://github.com/Teradata/covalent) for more info.


© 2017 Teradata. All rights reserved.

import { Injectable } from '@angular/core';
import { Response, Http, Headers } from '@angular/http';
import { RESTService, HttpInterceptorService } from '@covalent/http';

@Injectable()
export class UsersService extends RESTService<any> {

  constructor(private _http: Http /* or HttpInterceptorService */) {
    super(_http, {
      baseUrl: 'https://reqres.in',
      path: '/api/users',
      headers: new Headers(),
      dynamicHeaders: () => new Headers(),
      transform: (res: Response): any => res.json(),
    });
  }
}