swimlane's ngx-datatable basic example

<!DOCTYPE html>
<html>

  <head>
    <title>angular2 playground</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/angular2-data-table/release/datatable.css" />
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/angular2-data-table/release/material.css" />
    <link href="https://file.myfontastic.com/Jnf54BZCm7mSjGCxNRbfp3/icons.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css" />
    
    <script src="https://unpkg.com/zone.js@0.6.23/dist/zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
    <script src="https://unpkg.com/typescript@1.8.10/lib/typescript.js"></script>
    <script src="config.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

  <body>
    <my-app>
    loading...
  </my-app>
  </body>

</html>

body{
  font-family: 'RobotoDraft', 'Roboto', 'Helvetica Neue, Helvetica, Arial', sans-serif;
  text-align: center;
  font-style: normal;
  font-weight: 300;
  font-size: 1.4rem;
  line-height: 2rem;
  letter-spacing: 0.01rem;
  color: #212121;
  background-color: #f5f5f5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  margin:20px
}

.datatable {
	text-align: left;
	width:75%;
	margin:0 auto;
}
.datatable.vertical-scroll {
  height:70vh;
}

# angular2-data-table basic example

var ver = {
  ng: '4.0.3'
};

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  paths: {
    'npm:': 'https://unpkg.com/'
  },
  //map tells the System loader where to look for things
  map: {
    app: "./src",
    '@angular/core': 'npm:@angular/core@' + ver.ng + '/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common@' + ver.ng + '/bundles/common.umd.js',
    '@angular/compiler': 'npm:@angular/compiler@' + ver.ng + '/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser@' + ver.ng + '/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@' + ver.ng + '/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http@' + ver.ng + '/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router@' + ver.ng + '/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms@' + ver.ng + '/bundles/forms.umd.js',

    'rxjs': 'npm:rxjs@^5.0.1',
    'typescript': 'npm:typescript@2.1.5/lib/typescript.js',
    
    '@swimlane/ngx-datatable': 'npm:@swimlane/ngx-datatable',
  
    '@ng-bootstrap/ng-bootstrap': 'npm:@ng-bootstrap/ng-bootstrap@1.0.0-alpha.25/bundles/ng-bootstrap.js'
  },
  //packages defines our app package
  packages: {
    app: {
      main: './bootstrap.ts',
      defaultExtension: 'ts'
    },
    rxjs: {
      defaultExtension: 'js'
    }
  }
});

//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';

platformBrowserDynamic().bootstrapModule(AppModule)

//our root app component
import {Component, NgModule, Input,ChangeDetectorRef, ViewChild} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { NgxDatatableModule, DatatableComponent } from '@swimlane/ngx-datatable';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { JsonpModule } from '@angular/http';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';

import {
  TableOptions,
  TableColumn,
  ColumnMode
} from '@swimlane/ngx-datatable';


@Component({
  selector: 'ngbd-modal-content',
  template: `
    <div class="modal-header">
      <h4 class="modal-title">Hi there!</h4>
      <button type="button" class="close" aria-label="Close" >
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <p>Hello, {{name}}!</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" >Close</button>
    </div>
  `
})
export class NgbdModalContent {
  
  @ViewChild(DatatableComponent) table: DatatableComponent;

  constructor(public activeModal: NgbActiveModal

  ) {}
}


@Component({
  selector: 'my-app',
  templateUrl:'./plate.html'
})
export class App {

  totalRows: any = [];
  rows = [
    {
      "header.status":"open",
      "id":"RCLqhgEEeTdTirDdO6Of9",
      "header.createdAt":"2017-03-16T09:17:39.118Z"
      
    },
    {
      "header.status":"open",
      "id":"BNdFYXCer6WURdTd6cgD4",
      "header.createdAt":"2017-03-15T23:47:18.465Z"
      
    },
    {
      "header.status":"close",
      "id":"aqy5LEIKeBO6f2EqB0FgW",
      "header.createdAt":"2017-03-15T23:44:08.283Z"
      
    },
    {
      "header.status":"open",
      "id":"N73ySBtLaSDVTXDgJMSN1",
      "header.createdAt":"2017-03-15T18:51:29.101Z"
    }
  ];
  columns = [
    {prop:"id"}
    {prop:"header.status",name:"Status"},
    {prop:"header.createdAt",name:"Created At"}
  ];

  constructor(private modalService:NgbModal,
     private _changeDetectorRef: ChangeDetectorRef,
  ) {
    /*this.fetch((data) => {
      this.rows.push(...data);
    });*/
    this.totalRows = this.rows;
  }
  
  public isShowed : boolean = false;
  
  meh(){
    this.isShowed = !this.isShowed;  
  }
  
  filterData(event) {
    console.log(event);
    let columnName = event.currentTarget.id;
    console.log(columnName);
    const val = event.target.value.toLowerCase();
    const filteredData = this.totalRows.filter(function (d) {
      return d[columnName].toLowerCase().indexOf(val) !== -1 || !val;
    });
    this.rows = filteredData;
    this.table.offset = 0;
  }

}


@NgModule({
  imports: [ BrowserModule, 
  FormsModule, 
  ReactiveFormsModule, 
  JsonpModule,
  NgxDatatableModule, 
  NgbModule.forRoot() ],
  entryComponents: [NgbdModalContent]
  declarations: [ App, NgbdModalContent ],
  bootstrap: [ App ]
})
export class AppModule {}

<div>
  <h3>basic</h3>
  <button (click)="meh()">Hello</button>
  {{isShowed}}
  <ngx-datatable #table class='material striped' [rows]='rows' [columns]='columns' [columnMode]='"force"' [headerHeight]='500' [footerHeight]='50' [rowHeight]='"auto"'>
    <ngx-datatable-column prop="id" [minWidth]="200">
      <ng-template let-column="column" height="200" ngx-datatable-header-template>
        <label style="height:10px;cursor:pointer">Id</label>
        <br/>
        <input type='text' id="id" style='width:100%;height:50px;border:1px;' placeholder='Filter..' (keyup)='filterData($event)' />
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column prop="header.status" name="Status" [minWidth]="200" height="100">
      <ng-template let-column="column" height="200" ngx-datatable-header-template>
        <label style="height:10px;cursor:pointer">Status</label>
        <br/>
        <input type='text' id="header.status" style='width:100%;height:50px;border:1px;' placeholder='Filter..' (keyup)='filterData($event)' />
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column prop="header.createdAt" name="CreatedAt" [minWidth]="200" height="100">
      <ng-template let-column="column" height="200" ngx-datatable-header-template>
        <label style="height:10px;cursor:pointer">CreatedAt</label>
        <br/>
        <input type='text' id="header.createdAt" style='width:100%;height:50px;border:1px;' placeholder='Filter..' (keyup)='filterData($event)' />
      </ng-template>
    </ngx-datatable-column>
  </ngx-datatable>
</div>