<!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" />
<link rel="stylesheet" href="index.css" />
<link rel="stylesheet" href="material.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'
},
//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} 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>
Dynamic Height w/ Virtual Scrolling
<small>
<a href="https://github.com/swimlane/ngx-datatable/blob/master/demo/basic/dynamic-height.component.ts" target="_blank">
Source
</a>
</small>
</h3>
<ngx-datatable
#myTable
class="material expandable gk-toplevel-container"
style="height: 500px"
[columnMode]="'force'"
[headerHeight]="40"
[footerHeight]="50"
[rowHeight]="40"
[scrollbarV]="40"
[rows]="yearlySums">
<!-- Row Detail Template -->
<ngx-datatable-row-detail [rowHeight]="getRowDetailsHeight" (toggle)="onDetailToggle($event)">
<ng-template let-yearrow="row" ngx-datatable-row-detail-template>
</ng-template>
</ngx-datatable-row-detail>
<!-- Column Templates -->
<ngx-datatable-column
[width]="60" [resizeable]="false" [sortable]="false" [draggable]="false" [canAutoResize]="false">
<ng-template let-row="row" ngx-datatable-cell-template>
<a
href="#"
[class.icon-right]="!row.$$expanded"
[class.icon-down]="row.$$expanded"
title="Expand/Collapse Row"
(click)="toggleExpandRow(row)">
</a>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="year">
<ng-template let-row="row" ngx-datatable-cell-template>
<strong>{{row.year}}</strong>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="sum">
<ng-template let-row="row" ngx-datatable-cell-template>
<strong>{{row.sum}}</strong>
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
</div>
`
})
export class App {
@ViewChild('myTable') table: any;
// year, sum pairs
public yearlySums: Array<{year: number, sum: number, height: number}> = [];
constructor() {
this.fetch();
}
fetch() {
this.yearlySums.push({year: 2015, sum: 1750000, height: 50});
this.yearlySums.push({year: 2016, sum: 2750000, height: 150});
this.yearlySums.push({year: 2017, sum: 6750000, height: 75});
this.yearlySums.push({year: 2022, sum: 750000, height: 250});
}
public getRowDetailsHeight = (row) => {
if (row) {
// tslint:disable-next-line:no-console
console.log("Details height:", row.height, "index:", row.$$index);
return row.height;
}
console.log("NO Details height");
return 0;
}
public toggleExpandRow = (row) => {
console.log('Toggled Expand Row!', row);
this.table.rowDetail.toggleExpandRow(row);
}
public onDetailToggle = (event) => {
console.log('Detail Toggled', event);
}
}
@NgModule({
imports: [ BrowserModule, NgxDatatableModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
/**
* angular2-data-table v"8.0.0" (https://github.com/swimlane/angular2-data-table)
* Copyright 2016
* Licensed under MIT
*/
.ngx-datatable {
display: block;
overflow: hidden;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: relative;
-webkit-transform: translate3d(0, 0, 0);
/**
* Vertical Scrolling Adjustments
*/
/**
* Horizontal Scrolling Adjustments
*/
/**
* Fixed Header Height Adjustments
*/
/**
* Fixed row height adjustments
*/
/**
* Shared Styles
*/
/**
* Header Styles
*/
/**
* Body Styles
*/
/**
* Footer Styles
*/ }
.ngx-datatable [hidden] {
display: none !important; }
.ngx-datatable *, .ngx-datatable *:before, .ngx-datatable *:after {
box-sizing: border-box; }
.ngx-datatable.scroll-vertical .datatable-body {
overflow-y: auto; }
.ngx-datatable.scroll-vertical .datatable-body .datatable-row-wrapper {
position: absolute; }
.ngx-datatable.scroll-horz .datatable-body {
overflow-x: auto;
-webkit-overflow-scrolling: touch; }
.ngx-datatable.fixed-header .datatable-header .datatable-header-inner {
white-space: nowrap; }
.ngx-datatable.fixed-header .datatable-header .datatable-header-inner .datatable-header-cell {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; }
.ngx-datatable.fixed-row .datatable-scroll {
white-space: nowrap; }
.ngx-datatable.fixed-row .datatable-scroll .datatable-body-row {
white-space: nowrap; }
.ngx-datatable.fixed-row .datatable-scroll .datatable-body-row .datatable-body-cell {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; }
.ngx-datatable .datatable-body-row,
.ngx-datatable .datatable-header-inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-flow: row;
-o-flex-flow: row;
flex-flow: row; }
.ngx-datatable .datatable-body-cell,
.ngx-datatable .datatable-header-cell {
vertical-align: top;
display: inline-block;
line-height: 1.625;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none; }
.ngx-datatable .datatable-body-cell:focus,
.ngx-datatable .datatable-header-cell:focus {
outline: none; }
.ngx-datatable .datatable-row-left,
.ngx-datatable .datatable-row-right {
z-index: 9; }
.ngx-datatable .datatable-row-left,
.ngx-datatable .datatable-row-center,
.ngx-datatable .datatable-row-right {
position: relative; }
.ngx-datatable .datatable-header {
display: block;
overflow: hidden; }
.ngx-datatable .datatable-header .datatable-header-inner {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-align-items: stretch; }
.ngx-datatable .datatable-header .datatable-header-cell {
position: relative;
display: inline-block; }
.ngx-datatable .datatable-header .datatable-header-cell.longpress {
cursor: move; }
.ngx-datatable .datatable-header .datatable-header-cell .datatable-header-cell-wrapper {
cursor: pointer; }
.ngx-datatable .datatable-header .datatable-header-cell .sort-btn {
line-height: 100%;
vertical-align: middle;
display: inline-block;
cursor: pointer; }
.ngx-datatable .datatable-header .datatable-header-cell .resize-handle {
display: inline-block;
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 5px;
padding: 0 4px;
visibility: hidden;
cursor: ew-resize; }
.ngx-datatable .datatable-header .datatable-header-cell.resizeable:hover .resize-handle {
visibility: visible; }
.ngx-datatable .datatable-body {
position: relative;
z-index: 10;
display: block; }
.ngx-datatable .datatable-body .datatable-scroll {
display: inline-block; }
.ngx-datatable .datatable-body .datatable-row-detail {
overflow-y: hidden; }
.ngx-datatable .datatable-body .datatable-row-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; }
.ngx-datatable .datatable-body .datatable-body-row {
outline: none; }
.ngx-datatable .datatable-body .datatable-body-row > div {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.ngx-datatable .datatable-footer {
display: block;
width: 100%; }
.ngx-datatable .datatable-footer > div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%; }
.ngx-datatable .datatable-footer .selected-count .page-count {
-webkit-box-flex: 1;
-ms-flex: 1 1 40%;
flex: 1 1 40%; }
.ngx-datatable .datatable-footer .selected-count .datatable-pager {
-webkit-box-flex: 1;
-ms-flex: 1 1 60%;
flex: 1 1 60%; }
.ngx-datatable .datatable-footer .page-count {
display: inline-block;
-webkit-box-flex: 1;
-ms-flex: 1 1 20%;
flex: 1 1 20%; }
.ngx-datatable .datatable-footer .datatable-pager {
display: inline-block;
-webkit-box-flex: 1;
-ms-flex: 1 1 80%;
flex: 1 1 80%;
text-align: right; }
.ngx-datatable .datatable-footer .datatable-pager .pager,
.ngx-datatable .datatable-footer .datatable-pager .pager li {
padding: 0;
margin: 0;
display: inline-block;
list-style: none; }
.ngx-datatable .datatable-footer .datatable-pager .pager li, .ngx-datatable .datatable-footer .datatable-pager .pager li a {
outline: none; }
.ngx-datatable .datatable-footer .datatable-pager .pager li a {
cursor: pointer;
display: inline-block; }
.ngx-datatable .datatable-footer .datatable-pager .pager li.disabled a {
cursor: not-allowed; }
/*# sourceMappingURL=index.map*/
.ngx-datatable.material {
background: #FFF;
-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
-moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
/**
* Shared Styles
*/
/**
* Global Row Styles
*/
/**
* Header Styles
*/
/**
* Body Styles
*/
/**
* Footer Styles
*/ }
.ngx-datatable.material.striped .datatable-row-odd {
background: #eee; }
.ngx-datatable.material.single-selection .datatable-body-row.active,
.ngx-datatable.material.single-selection .datatable-body-row.active .datatable-row-group, .ngx-datatable.material.multi-selection .datatable-body-row.active,
.ngx-datatable.material.multi-selection .datatable-body-row.active .datatable-row-group, .ngx-datatable.material.multi-click-selection .datatable-body-row.active,
.ngx-datatable.material.multi-click-selection .datatable-body-row.active .datatable-row-group {
background-color: #304FFE;
color: #FFF; }
.ngx-datatable.material.single-selection .datatable-body-row.active:hover,
.ngx-datatable.material.single-selection .datatable-body-row.active:hover .datatable-row-group, .ngx-datatable.material.multi-selection .datatable-body-row.active:hover,
.ngx-datatable.material.multi-selection .datatable-body-row.active:hover .datatable-row-group, .ngx-datatable.material.multi-click-selection .datatable-body-row.active:hover,
.ngx-datatable.material.multi-click-selection .datatable-body-row.active:hover .datatable-row-group {
background-color: #193AE4;
color: #FFF; }
.ngx-datatable.material.single-selection .datatable-body-row.active:focus,
.ngx-datatable.material.single-selection .datatable-body-row.active:focus .datatable-row-group, .ngx-datatable.material.multi-selection .datatable-body-row.active:focus,
.ngx-datatable.material.multi-selection .datatable-body-row.active:focus .datatable-row-group, .ngx-datatable.material.multi-click-selection .datatable-body-row.active:focus,
.ngx-datatable.material.multi-click-selection .datatable-body-row.active:focus .datatable-row-group {
background-color: #2041EF;
color: #FFF; }
.ngx-datatable.material:not(.cell-selection) .datatable-body-row:hover,
.ngx-datatable.material:not(.cell-selection) .datatable-body-row:hover .datatable-row-group {
background-color: #eee;
transition-property: background;
transition-duration: .3s;
transition-timing-function: linear; }
.ngx-datatable.material:not(.cell-selection) .datatable-body-row:focus,
.ngx-datatable.material:not(.cell-selection) .datatable-body-row:focus .datatable-row-group {
background-color: #ddd; }
.ngx-datatable.material.cell-selection .datatable-body-cell:hover,
.ngx-datatable.material.cell-selection .datatable-body-cell:hover .datatable-row-group {
background-color: #eee;
transition-property: background;
transition-duration: .3s;
transition-timing-function: linear; }
.ngx-datatable.material.cell-selection .datatable-body-cell:focus,
.ngx-datatable.material.cell-selection .datatable-body-cell:focus .datatable-row-group {
background-color: #ddd; }
.ngx-datatable.material.cell-selection .datatable-body-cell.active,
.ngx-datatable.material.cell-selection .datatable-body-cell.active .datatable-row-group {
background-color: #304FFE;
color: #FFF; }
.ngx-datatable.material.cell-selection .datatable-body-cell.active:hover,
.ngx-datatable.material.cell-selection .datatable-body-cell.active:hover .datatable-row-group {
background-color: #193AE4;
color: #FFF; }
.ngx-datatable.material.cell-selection .datatable-body-cell.active:focus,
.ngx-datatable.material.cell-selection .datatable-body-cell.active:focus .datatable-row-group {
background-color: #2041EF;
color: #FFF; }
.ngx-datatable.material .empty-row {
height: 50px;
text-align: left;
padding: .5rem 1.2rem;
vertical-align: top;
border-top: 0; }
.ngx-datatable.material .loading-row {
text-align: left;
padding: .5rem 1.2rem;
vertical-align: top;
border-top: 0; }
.ngx-datatable.material .datatable-header .datatable-row-left,
.ngx-datatable.material .datatable-body .datatable-row-left {
background-color: #FFF;
background-position: 100% 0;
background-repeat: repeat-y;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAYAAAD5PA/NAAAAFklEQVQIHWPSkNeSBmJhTQVtbiDNCgASagIIuJX8OgAAAABJRU5ErkJggg==); }
.ngx-datatable.material .datatable-header .datatable-row-right,
.ngx-datatable.material .datatable-body .datatable-row-right {
background-position: 0 0;
background-color: #fff;
background-repeat: repeat-y;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAYAAAD5PA/NAAAAFklEQVQI12PQkNdi1VTQ5gbSwkAsDQARLAIGtOSFUAAAAABJRU5ErkJggg==); }
.ngx-datatable.material .datatable-header {
border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
.ngx-datatable.material .datatable-header .datatable-header-cell {
text-align: left;
padding: .5rem 1.2rem;
font-weight: 400;
color: #757575;
vertical-align: bottom; }
.ngx-datatable.material .datatable-header .datatable-header-cell .datatable-header-cell-wrapper {
position: relative; }
.ngx-datatable.material .datatable-header .datatable-header-cell.longpress .draggable::after {
transition: transform 400ms ease, opacity 400ms ease;
opacity: .5;
transform: scale(1); }
.ngx-datatable.material .datatable-header .datatable-header-cell .draggable::after {
content: " ";
position: absolute;
top: 50%;
left: 50%;
margin: -30px 0 0 -30px;
height: 60px;
width: 60px;
background: #eee;
border-radius: 100%;
opacity: 1;
filter: none;
transform: scale(0);
z-index: 9999;
pointer-events: none; }
.ngx-datatable.material .datatable-header .datatable-header-cell.dragging .resize-handle {
border-right: none; }
.ngx-datatable.material .datatable-header .resize-handle {
border-right: solid 1px #eee; }
.ngx-datatable.material .datatable-body .datatable-row-detail {
background: #f5f5f5;
padding: 10px; }
.ngx-datatable.material .datatable-body .datatable-body-row .datatable-body-cell {
text-align: left;
padding: .5rem 1.2rem;
vertical-align: top;
border-top: 0;
-webkit-transition: width 0.3s ease;
transition: width 0.3s ease; }
.ngx-datatable.material .datatable-body .progress-linear {
display: block;
position: relative;
width: 100%;
height: 5px;
padding: 0;
margin: 0;
position: absolute; }
.ngx-datatable.material .datatable-body .progress-linear .container {
display: block;
position: relative;
overflow: hidden;
width: 100%;
height: 5px;
-webkit-transform: translate(0, 0) scale(1, 1);
transform: translate(0, 0) scale(1, 1);
background-color: #aad1f9; }
.ngx-datatable.material .datatable-body .progress-linear .container .bar {
transition: all .2s linear;
-webkit-animation: query 0.8s infinite cubic-bezier(0.39, 0.575, 0.565, 1);
animation: query 0.8s infinite cubic-bezier(0.39, 0.575, 0.565, 1);
transition: -webkit-transform .2s linear;
transition: transform .2s linear;
background-color: #106cc8;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 100%;
height: 5px; }
.ngx-datatable.material .datatable-footer {
border-top: 1px solid rgba(0, 0, 0, 0.12);
font-size: 16px; }
.ngx-datatable.material .datatable-footer .page-count {
line-height: 50px;
height: 50px;
padding: 0 1.2rem; }
.ngx-datatable.material .datatable-footer .datatable-pager {
margin: 0 10px; }
.ngx-datatable.material .datatable-footer .datatable-pager li {
vertical-align: middle; }
.ngx-datatable.material .datatable-footer .datatable-pager li.disabled a {
color: rgba(0, 0, 0, 0.26) !important;
background-color: transparent !important; }
.ngx-datatable.material .datatable-footer .datatable-pager li.active a {
background-color: rgba(158, 158, 158, 0.2);
font-weight: bold; }
.ngx-datatable.material .datatable-footer .datatable-pager a {
height: 22px;
min-width: 24px;
line-height: 22px;
padding: 0 6px;
border-radius: 3px;
margin: 6px 3px;
text-align: center;
vertical-align: top;
color: rgba(0, 0, 0, 0.54);
text-decoration: none;
vertical-align: bottom; }
.ngx-datatable.material .datatable-footer .datatable-pager a:hover {
color: rgba(0, 0, 0, 0.75);
background-color: rgba(158, 158, 158, 0.2); }
.ngx-datatable.material .datatable-footer .datatable-pager .icon-left,
.ngx-datatable.material .datatable-footer .datatable-pager .icon-skip,
.ngx-datatable.material .datatable-footer .datatable-pager .icon-right,
.ngx-datatable.material .datatable-footer .datatable-pager .icon-prev {
font-size: 20px;
line-height: 20px;
padding: 0 3px; }
/**
* Checkboxes
**/
.datatable-checkbox {
position: relative;
margin: 0;
cursor: pointer;
vertical-align: middle;
display: inline-block;
box-sizing: border-box;
padding: 10px 0; }
.datatable-checkbox input[type='checkbox'] {
position: relative;
margin: 0 1rem 0 0;
cursor: pointer;
outline: none; }
.datatable-checkbox input[type='checkbox']:before {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
content: "";
position: absolute;
left: 0;
z-index: 1;
width: 1rem;
height: 1rem;
border: 2px solid #f2f2f2; }
.datatable-checkbox input[type='checkbox']:checked:before {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
height: .5rem;
border-color: #009688;
border-top-style: none;
border-right-style: none; }
.datatable-checkbox input[type='checkbox']:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 1rem;
height: 1rem;
background: #fff;
cursor: pointer; }
/**
* Progress bar animations
*/
@keyframes query {
0% {
opacity: 1;
transform: translateX(35%) scale(0.3, 1); }
100% {
opacity: 0;
transform: translateX(-50%) scale(0, 1); } }