<!DOCTYPE html>
<html>
<head>
<title>angular2 playground</title>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@swimlane/ngx-datatable/release/datatable.css" />
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@swimlane/ngx-datatable/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.7.4/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@2.1.4/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
}
# angular2-data-table basic example
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
//map tells the System loader where to look for things
map: {
app: "./src",
'@angular': 'https://unpkg.com/@angular',
'rxjs': 'https://unpkg.com/rxjs@5.0.2',
'ngx-datatable': 'https://unpkg.com/@swimlane/ngx-datatable'
},
//packages defines our app package
packages: {
app: {
main: './bootstrap.ts',
defaultExtension: 'ts'
},
'@angular/core': {
main: 'bundles/core.umd.js',
defaultExtension: 'js'
},
'@angular/compiler': {
main: 'bundles/compiler.umd.js',
defaultExtension: 'js'
},
'@angular/common': {
main: 'bundles/common.umd.js',
defaultExtension: 'js'
},
'@angular/platform-browser-dynamic': {
main: 'bundles/platform-browser-dynamic.umd.js',
defaultExtension: 'js'
},
'@angular/platform-browser': {
main: 'bundles/platform-browser.umd.js',
defaultExtension: 'js'
},
'@angular/forms': {
main: 'index.js',
defaultExtension: 'js'
},
'@angular/router': {
main: 'index.js',
defaultExtension: 'js'
},
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} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { NgxDatatableModule } from 'ngx-datatable';
@Component({
selector: 'my-app',
template: `
<div>
<h3>Server-side Paging</h3>
<ngx-datatable
class="material vertical-scroll"
[rows]="rows"
[columns]="[{name:'Name'},{name:'Gender'},{name:'Company'}]"
[columnMode]="'force'"
[headerHeight]="50"
[rowHeight]="50"
[footerHeight]="50"
[scrollbarV]="false"
[scrollbarH]="false"
[externalPaging]="true"
[count]="count"
[offset]="offset"
[limit]="limit"
(page)='onPage($event)'>
</ngx-datatable>
</div>
`
})
export class App {
rows = [];
count: number = 200;
offset: number = 0;
limit: number = 10;
data = [];
constructor() {
fetch('data.json')
.then(response => response.json())
.then(data => this.data = data);
}
ngOnInit() {
this.page(this.offset, this.limit);
}
page(offset, limit) {
for(let i=0;i<limit;i++){
const index = (offset * limit) + i;
console.log(index);
this.rows[index] = this.data[index];
}
}
onPage(event) {
console.log('Page Event', event);
this.offset = event.offset;
this.limit = event.limit;
this.page(this.offset, this.limit);
}
}
@NgModule({
imports: [ BrowserModule, NgxDatatableModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
[{
"name": "Thomas",
"gender": "Male",
"company": "Flipopia"
}, {
"name": "Nicole",
"gender": "Female",
"company": "Twitterbridge"
}, {
"name": "Ashley",
"gender": "Female",
"company": "Trilith"
}, {
"name": "Timothy",
"gender": "Male",
"company": "Browsebug"
}, {
"name": "Paul",
"gender": "Male",
"company": "Ntag"
}, {
"name": "Mary",
"gender": "Female",
"company": "Geba"
}, {
"name": "Donna",
"gender": "Female",
"company": "BlogXS"
}, {
"name": "Kelly",
"gender": "Female",
"company": "Mita"
}, {
"name": "Harry",
"gender": "Male",
"company": "Ntags"
}, {
"name": "Donald",
"gender": "Male",
"company": "Tavu"
}, {
"name": "Gary",
"gender": "Male",
"company": "Mynte"
}, {
"name": "Antonio",
"gender": "Male",
"company": "Linkbridge"
}, {
"name": "Lisa",
"gender": "Female",
"company": "Linkbuzz"
}, {
"name": "Peter",
"gender": "Male",
"company": "Browsecat"
}, {
"name": "Richard",
"gender": "Male",
"company": "Jaxspan"
}, {
"name": "Emily",
"gender": "Female",
"company": "Npath"
}, {
"name": "Gloria",
"gender": "Female",
"company": "Meejo"
}, {
"name": "Raymond",
"gender": "Male",
"company": "Trilia"
}, {
"name": "Arthur",
"gender": "Male",
"company": "Mita"
}, {
"name": "Roger",
"gender": "Male",
"company": "Topiczoom"
}, {
"name": "Susan",
"gender": "Female",
"company": "Bubblebox"
}, {
"name": "Robert",
"gender": "Male",
"company": "Divavu"
}, {
"name": "Daniel",
"gender": "Male",
"company": "Oyondu"
}, {
"name": "Alan",
"gender": "Male",
"company": "Voonte"
}, {
"name": "Virginia",
"gender": "Female",
"company": "Voonte"
}, {
"name": "Katherine",
"gender": "Female",
"company": "Trilith"
}, {
"name": "Edward",
"gender": "Male",
"company": "Jabbersphere"
}, {
"name": "Diane",
"gender": "Female",
"company": "Quamba"
}, {
"name": "Cheryl",
"gender": "Female",
"company": "Skilith"
}, {
"name": "Rose",
"gender": "Female",
"company": "Feednation"
}, {
"name": "Peter",
"gender": "Male",
"company": "Bubblebox"
}, {
"name": "Susan",
"gender": "Female",
"company": "Babbleset"
}, {
"name": "Gary",
"gender": "Male",
"company": "Realcube"
}, {
"name": "Stephanie",
"gender": "Female",
"company": "Camido"
}, {
"name": "Joseph",
"gender": "Male",
"company": "Oozz"
}, {
"name": "Todd",
"gender": "Male",
"company": "Skiptube"
}, {
"name": "Wanda",
"gender": "Female",
"company": "Aivee"
}, {
"name": "Sarah",
"gender": "Female",
"company": "Tavu"
}, {
"name": "Howard",
"gender": "Male",
"company": "Youspan"
}, {
"name": "Kimberly",
"gender": "Female",
"company": "Kwinu"
}, {
"name": "Catherine",
"gender": "Female",
"company": "Skyvu"
}, {
"name": "Aaron",
"gender": "Male",
"company": "Miboo"
}, {
"name": "Rachel",
"gender": "Female",
"company": "Buzzshare"
}, {
"name": "Louis",
"gender": "Male",
"company": "Voonix"
}, {
"name": "Lois",
"gender": "Female",
"company": "Tagfeed"
}, {
"name": "Melissa",
"gender": "Female",
"company": "Geba"
}, {
"name": "Julia",
"gender": "Female",
"company": "Shufflester"
}, {
"name": "Karen",
"gender": "Female",
"company": "Linklinks"
}, {
"name": "Bobby",
"gender": "Male",
"company": "Dynazzy"
}, {
"name": "Roger",
"gender": "Male",
"company": "Devbug"
}, {
"name": "Johnny",
"gender": "Male",
"company": "Jazzy"
}, {
"name": "Mildred",
"gender": "Female",
"company": "Yozio"
}, {
"name": "Irene",
"gender": "Female",
"company": "Shuffletag"
}, {
"name": "Steven",
"gender": "Male",
"company": "Quimm"
}, {
"name": "Paula",
"gender": "Female",
"company": "Ailane"
}, {
"name": "James",
"gender": "Male",
"company": "Gabtune"
}, {
"name": "Betty",
"gender": "Female",
"company": "Centizu"
}, {
"name": "Amanda",
"gender": "Female",
"company": "Jaxworks"
}, {
"name": "Annie",
"gender": "Female",
"company": "Jaloo"
}, {
"name": "Kelly",
"gender": "Female",
"company": "Fiveclub"
}, {
"name": "Antonio",
"gender": "Male",
"company": "Cogibox"
}, {
"name": "Tammy",
"gender": "Female",
"company": "Thoughtmix"
}, {
"name": "Louise",
"gender": "Female",
"company": "Dazzlesphere"
}, {
"name": "Carolyn",
"gender": "Female",
"company": "Skinder"
}, {
"name": "Harold",
"gender": "Male",
"company": "Tekfly"
}, {
"name": "Ernest",
"gender": "Male",
"company": "Eidel"
}, {
"name": "Richard",
"gender": "Male",
"company": "Tanoodle"
}, {
"name": "Jessica",
"gender": "Female",
"company": "Gigaclub"
}, {
"name": "Laura",
"gender": "Female",
"company": "Kwinu"
}, {
"name": "Eric",
"gender": "Male",
"company": "Cogidoo"
}, {
"name": "Tina",
"gender": "Female",
"company": "Dabtype"
}, {
"name": "Rebecca",
"gender": "Female",
"company": "Janyx"
}, {
"name": "Phillip",
"gender": "Male",
"company": "Twimbo"
}, {
"name": "Jeremy",
"gender": "Male",
"company": "Skipstorm"
}, {
"name": "Harry",
"gender": "Male",
"company": "Wikivu"
}, {
"name": "Eugene",
"gender": "Male",
"company": "Bluejam"
}, {
"name": "Pamela",
"gender": "Female",
"company": "Riffwire"
}, {
"name": "Carolyn",
"gender": "Female",
"company": "Zoombeat"
}, {
"name": "Billy",
"gender": "Male",
"company": "Gabspot"
}, {
"name": "Emily",
"gender": "Female",
"company": "Mynte"
}, {
"name": "Charles",
"gender": "Male",
"company": "Dynabox"
}, {
"name": "Shawn",
"gender": "Male",
"company": "Npath"
}, {
"name": "Angela",
"gender": "Female",
"company": "Fivebridge"
}, {
"name": "Scott",
"gender": "Male",
"company": "Oozz"
}, {
"name": "Beverly",
"gender": "Female",
"company": "Yata"
}, {
"name": "Catherine",
"gender": "Female",
"company": "Rhyloo"
}, {
"name": "John",
"gender": "Male",
"company": "Tagchat"
}, {
"name": "Samuel",
"gender": "Male",
"company": "Fadeo"
}, {
"name": "Todd",
"gender": "Male",
"company": "Viva"
}, {
"name": "Charles",
"gender": "Male",
"company": "Skajo"
}, {
"name": "Johnny",
"gender": "Male",
"company": "Yodel"
}, {
"name": "Joyce",
"gender": "Female",
"company": "Katz"
}, {
"name": "Bonnie",
"gender": "Female",
"company": "Devpulse"
}, {
"name": "Theresa",
"gender": "Female",
"company": "Blogtags"
}, {
"name": "Joe",
"gender": "Male",
"company": "Youspan"
}, {
"name": "Ryan",
"gender": "Male",
"company": "Kwimbee"
}, {
"name": "Pamela",
"gender": "Female",
"company": "Cogibox"
}, {
"name": "Edward",
"gender": "Male",
"company": "Browsetype"
}, {
"name": "Marie",
"gender": "Female",
"company": "Izio"
}, {
"name": "Cheryl",
"gender": "Female",
"company": "Pixoboo"
}]