Last active
September 30, 2016 18:50
-
-
Save amcdnl/bdea9fad8e503eb64c040cdfcc5778e8 to your computer and use it in GitHub Desktop.
angular2-data-table virtual 100k
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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://npmcdn.com/@angular', | |
| 'rxjs': 'https://npmcdn.com/[email protected]', | |
| 'angular2-data-table': 'https://npmcdn.com/angular2-data-table' | |
| }, | |
| //packages defines our app package | |
| packages: { | |
| app: { | |
| main: './app.ts', | |
| defaultExtension: 'ts' | |
| }, | |
| '@angular/core': { | |
| main: 'bundles/core.umd.js', | |
| defaultExtension: 'js' | |
| }, | |
| '@angular/compiler': { | |
| main: 'bundles/compiler.umd.js', | |
| defaultExtension: 'js' | |
| }, | |
| '@angular/http': { | |
| main: 'bundles/http.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' | |
| }, | |
| rxjs: { | |
| defaultExtension: 'js' | |
| } | |
| } | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>angular2-data-table</title> | |
| <link rel="stylesheet" type="text/css" href="style.css" /> | |
| <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/swimlane/angular2-data-table/master/release/datatable.css" /> | |
| <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/swimlane/angular2-data-table/master/release/material.css" /> | |
| <link href="https://file.myfontastic.com/Jnf54BZCm7mSjGCxNRbfp3/icons.css" rel="stylesheet"> | |
| <script src="https://npmcdn.com/[email protected]/dist/zone.js"></script> | |
| <script src="https://npmcdn.com/[email protected]/Reflect.js"></script> | |
| <script src="https://npmcdn.com/[email protected]/dist/system.js"></script> | |
| <script src="https://npmcdn.com/[email protected]/lib/typescript.js"></script> | |
| <script src="config.js"></script> | |
| <script> | |
| System.import('./src/bootstrap') | |
| .catch(console.error.bind(console)); | |
| </script> | |
| </head> | |
| <body> | |
| <my-app> | |
| loading... | |
| </my-app> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { Component, NgModule } from '@angular/core'; | |
| import { ColumnMode, TableOptions } from 'angular2-data-table'; | |
| import { AppModule } from './module.ts'; | |
| @NgModule({ | |
| imports: [ AppModule ] | |
| }) | |
| @Component({ | |
| selector: 'app', | |
| template: ` | |
| <div> | |
| <h3>virtual scroll</h3> | |
| <datatable | |
| class='material' | |
| [rows]='rows' | |
| [options]='options'> | |
| <datatable-column name="Name"> | |
| <template let-value="value"> | |
| <strong>{{value}}</strong> | |
| </template> | |
| </datatable-column> | |
| <datatable-column name="Gender"> | |
| <template let-row="row" let-value="value"> | |
| <i [innerHTML]="row['name']"></i> and <i>{{value}}</i> | |
| </template> | |
| </datatable-column> | |
| <datatable-column name="Age"> | |
| </datatable-column> | |
| </datatable> | |
| </div> | |
| ` | |
| }) | |
| export class App { | |
| rows = []; | |
| expanded = {}; | |
| options = new TableOptions({ | |
| columnMode: ColumnMode.force, | |
| headerHeight: 50, | |
| footerHeight: 50, | |
| rowHeight: 50, | |
| scrollbarV: true | |
| }); | |
| constructor() { | |
| this.fetch((data) => { | |
| this.rows.push(...data); | |
| }); | |
| } | |
| fetch(cb) { | |
| let req = new XMLHttpRequest(); | |
| req.open('GET', `https://npmcdn.com/[email protected]/assets/data/100k.json`); | |
| req.onload = () => { | |
| cb(JSON.parse(req.response)); | |
| }; | |
| req.send(); | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; | |
| import { AppModule } from './module.ts'; | |
| // bootstrap when document is ready | |
| document.addEventListener('DOMContentLoaded', () => { | |
| platformBrowserDynamic() | |
| .bootstrapModule(AppModule); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { NgModule } from '@angular/core'; | |
| import { BrowserModule } from '@angular/platform-browser'; | |
| import { Angular2DataTableModule } from 'angular2-data-table'; | |
| import { App } from './app.ts'; | |
| @NgModule({ | |
| declarations: [ App ], | |
| imports: [ BrowserModule, Angular2DataTableModule ], | |
| bootstrap: [ App ] | |
| }) | |
| export class AppModule { } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Styles go here */ | |
| 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; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment