<!DOCTYPE html>
<html>
<head>
<title>angular2 playground</title>
<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
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.0-beta.12',
'@swimlane/ngx-datatable': 'https://unpkg.com/@swimlane/ngx-datatable@10.2.3'
},
//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, ViewChild, ViewEncapsulation} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
import {
TableOptions,
TableColumn,
ColumnMode
} from '@swimlane/ngx-datatable';
@Component({
selector: 'my-app',
template: `
<div>
<h3>
Row Detail Demo
<small>
<a href="https://github.com/swimlane/ngx-datatable/blob/master/demo/basic/row-detail.component.ts" target="_blank">
Source
</a>
</small>
<small>
<a href="#" (click)="table.rowDetail.expandAllRows()">Expand All</a> |
<a href="#" (click)="table.rowDetail.collapseAllRows()">Collapse All</a>
</small>
</h3>
<ngx-datatable
#myTable
class='material expandable'
[columnMode]="'force'"
[headerHeight]="50"
[footerHeight]="50"
[rowHeight]="50"
[scrollbarV]="false"
[rows]='rows'
(page)="onPage($event)">
<!-- Row Detail Template -->
<ngx-datatable-row-detail [rowHeight]="getDetailRowHeight" #myDetailRow (toggle)="onDetailToggle($event)">
<ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
<div style="padding-left:35px;">
<div><strong>Address</strong></div>
<div>{{row.address.city}}, {{row.address.state}}</div>
</div>
</ng-template>
</ngx-datatable-row-detail>
<!-- Column Templates -->
<ngx-datatable-column
[width]="50"
[resizeable]="false"
[sortable]="false"
[draggable]="false"
[canAutoResize]="false">
<ng-template let-row="row" let-expanded="expanded" ngx-datatable-cell-template>
<a
href="#"
[class.datatable-icon-right]="!expanded"
[class.datatable-icon-down]="expanded"
title="Expand/Collapse Row"
(click)="toggleExpandRow(row)">A
</a>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Index" width="80">
<ng-template let-rowIndex="rowIndex" let-row="row" ngx-datatable-cell-template>
<strong>{{rowIndex}}</strong>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Expanded" width="80">
<ng-template let-row="row" let-expanded="expanded" ngx-datatable-cell-template>
<strong>{{expanded === 1}}</strong>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Name" width="200">
<ng-template let-value="value" ngx-datatable-cell-template>
<strong>{{value}}</strong>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Gender" width="300">
<ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
<i [innerHTML]="row['name']"></i> and <i>{{value}}</i>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Age" ></ngx-datatable-column>
</ngx-datatable>
</div>
`,
encapsulation: ViewEncapsulation.None
})
export class App {
constructor() {
}
rows = [
{
"id": 0,
"name": "Ramsey Cummings",
"gender": "male",
"age": 52,
"address": {
"state": "South Carolina",
"city": "Glendale"
}
},
{
"id": 1,
"name": "Stefanie Huff",
"gender": "female",
"age": 70,
"address": {
"state": "Arizona",
"city": "Beaverdale"
}
},
{
"id": 2,
"name": "Mabel David",
"gender": "female",
"age": 52,
"address": {
"state": "New Mexico",
"city": "Grazierville"
}
},
{
"id": 3,
"name": "Frank Bradford",
"gender": "male",
"age": 61,
"address": {
"state": "Wisconsin",
"city": "Saranap"
}
}];
@ViewChild('myTable') table: any;
expanded: any = {};
timeout: any;
expanded: any = {};
timeout: any;
onPage(event) {
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
console.log('paged!', event);
}, 100);
}
toggleExpandRow(row) {
console.log('Toggled Expand Row!', row);
this.table.rowDetail.toggleExpandRow(row);
}
onDetailToggle(event) {
console.log('Detail Toggled', event);
}
getDetailRowHeight(row: any, index: number): number {
console.log("aaa", row, index);
return 100;
}
}
@NgModule({
imports: [ BrowserModule, NgxDatatableModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}