<!DOCTYPE html>
<html>
<head>
<title>Covalent Plnkr</title>
<!-- Load common libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/2.2.0/typescript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.8.4/zone.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.41/system.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<!-- Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System
.import('main.ts')
.catch(console.error.bind(console));
</script>
<!-- Load the Covalent platform stylesheet -->
<link href="https://unpkg.com/@covalent/core@1.0.0-beta.3-1/common/platform.css" rel="stylesheet">
<!-- Load the Covalent/Material prebuilt theme -->
<link href="https://unpkg.com/@covalent/core@1.0.0-beta.3-1/theming/prebuilt/blue-orange.css" rel="stylesheet">
</head>
<body>
<covalent-app>
<div style="padding: 20%;text-align:center;">
<img src="https://camo.githubusercontent.com/5e708dbe0cf622ebdbdab5be0ede859ceb08ab91/68747470733a2f2f63646e2e7261776769742e636f6d2f54657261646174612f636f76616c656e742f646576656c6f702f7372632f6170702f6173736574732f69636f6e732f636f76616c656e742e737667" width="100">
<h3>Covalent Loading...</h3>
</div>
</covalent-app>
</body>
</html>
<!--
© 2017 Teradata. All rights reserved.
-->
<td-layout-nav>
<div td-toolbar-content>Covalent Plnkr</div>
<div layout="column" layout-fill>
<table td-data-table flex layout="column">
<div class="sticky">
<th td-data-table-column>
<md-icon>comment</md-icon>
<span>Comments</span>
</th>
<th td-data-table-column
*ngFor="let column of columns"
[numeric]="column.numeric">
{{column.label}}
</th>
</div>
<div flex style="overflow:auto;">
<tr td-data-table-row *ngFor="let row of basicData">
<td td-data-table-cell (click)="openPrompt(row, 'comments')">
<button md-button [class.mat-accent]="!row['comments']">{{row['comments'] || 'Add Comment'}}</button>
</td>
<td td-data-table-cell *ngFor="let column of columns" [numeric]="column.numeric">
{{column.format ? column.format(row[column.name]) : row[column.name]}}
</td>
</tr>
</div>
</table>
<td-paging-bar #pagingBar [pageSizes]="[5, 10, 15, 20]" [total]="filteredTotal" (change)="page($event)">
<span td-paging-bar-label hide-xs>Row per page:</span>
{{pagingBar.range}} <span hide-xs>of {{pagingBar.total}}</span>
</td-paging-bar>
</div>
<td-layout-footer>
Using Covalent 1.0.0-beta.3-1 with Angular 4.0.0 and Material 2.0.0-beta.3
</td-layout-footer>
</td-layout-nav>
<!--
© 2017 Teradata. All rights reserved.
-->
import {Component} from '@angular/core';
import {HttpInterceptorService} from '@covalent/http'
import {bootstrap} from '@angular/platform-browser-dynamic';
import { ITdDataTableColumn } from '@covalent/core';
import { TdDialogService } from '@covalent/core';
const NUMBER_FORMAT: (v: any) => any = (v: number) => v;
const DECIMAL_FORMAT: (v: any) => any = (v: number) => v.toFixed(2);
@Component({
selector: 'covalent-app',
templateUrl: 'app.component.html',
styles: [`
:host /deep/ thead { display:none; }
.sticky {height: 40px;border-bottom: 1px solid #ddd;}
.sticky th {height: 40px;}
`]
})
export class AppComponent {
columns: ITdDataTableColumn[] = [
{ name: 'name', label: 'Dessert (100g serving)', sortable: true },
{ name: 'type', label: 'Type' },
{ name: 'calories', label: 'Calories', numeric: true, format: NUMBER_FORMAT, sortable: true },
{ name: 'fat', label: 'Fat (g)', numeric: true, format: DECIMAL_FORMAT, sortable: true },
{ name: 'carbs', label: 'Carbs (g)', numeric: true, format: NUMBER_FORMAT },
{ name: 'protein', label: 'Protein (g)', numeric: true, format: DECIMAL_FORMAT },
{ name: 'sodium', label: 'Sodium (mg)', numeric: true, format: NUMBER_FORMAT },
{ name: 'calcium', label: 'Calcium (%)', numeric: true, format: NUMBER_FORMAT },
{ name: 'iron', label: 'Iron (%)', numeric: true, format: NUMBER_FORMAT },
];
data: any[] = [
{
'id': 1,
'name': 'Frozen yogurt',
'type': 'Ice cream',
'calories': 159.0,
'fat': 6.0,
'carbs': 24.0,
'protein': 4.0,
'sodium': 87.0,
'calcium': 14.0,
'iron': 1.0,
'comments': 'I love froyo!',
}, {
'id': 2,
'name': 'Ice cream sandwich',
'type': 'Ice cream',
'calories': 237.0,
'fat': 9.0,
'carbs': 37.0,
'protein': 4.3,
'sodium': 129.0,
'calcium': 8.0,
'iron': 1.0,
}, {
'id': 3,
'name': 'Eclair',
'type': 'Pastry',
'calories': 262.0,
'fat': 16.0,
'carbs': 24.0,
'protein': 6.0,
'sodium': 337.0,
'calcium': 6.0,
'iron': 7.0,
}, {
'id': 4,
'name': 'Cupcake',
'type': 'Pastry',
'calories': 305.0,
'fat': 3.7,
'carbs': 67.0,
'protein': 4.3,
'sodium': 413.0,
'calcium': 3.0,
'iron': 8.0,
}, {
'id': 5,
'name': 'Jelly bean',
'type': 'Candy',
'calories': 375.0,
'fat': 0.0,
'carbs': 94.0,
'protein': 0.0,
'sodium': 50.0,
'calcium': 0.0,
'iron': 0.0,
}, {
'id': 6,
'name': 'Lollipop',
'type': 'Candy',
'calories': 392.0,
'fat': 0.2,
'carbs': 98.0,
'protein': 0.0,
'sodium': 38.0,
'calcium': 0.0,
'iron': 2.0,
}, {
'id': 7,
'name': 'Honeycomb',
'type': 'Other',
'calories': 408.0,
'fat': 3.2,
'carbs': 87.0,
'protein': 6.5,
'sodium': 562.0,
'calcium': 0.0,
'iron': 45.0,
}, {
'id': 8,
'name': 'Donut',
'type': 'Pastry',
'calories': 452.0,
'fat': 25.0,
'carbs': 51.0,
'protein': 4.9,
'sodium': 326.0,
'calcium': 2.0,
'iron': 22.0,
}, {
'id': 9,
'name': 'KitKat',
'type': 'Candy',
'calories': 518.0,
'fat': 26.0,
'carbs': 65.0,
'protein': 7.0,
'sodium': 54.0,
'calcium': 12.0,
'iron': 6.0,
}, {
'id': 10,
'name': 'Chocolate',
'type': 'Candy',
'calories': 518.0,
'fat': 26.0,
'carbs': 65.0,
'protein': 7.0,
'sodium': 54.0,
'calcium': 12.0,
'iron': 6.0,
}, {
'id': 11,
'name': 'Chamoy',
'type': 'Candy',
'calories': 518.0,
'fat': 26.0,
'carbs': 65.0,
'protein': 7.0,
'sodium': 54.0,
'calcium': 12.0,
'iron': 6.0,
}, {
'id': 6,
'name': 'Lollipop',
'type': 'Candy',
'calories': 392.0,
'fat': 0.2,
'carbs': 98.0,
'protein': 0.0,
'sodium': 38.0,
'calcium': 0.0,
'iron': 2.0,
}, {
'id': 7,
'name': 'Honeycomb',
'type': 'Other',
'calories': 408.0,
'fat': 3.2,
'carbs': 87.0,
'protein': 6.5,
'sodium': 562.0,
'calcium': 0.0,
'iron': 45.0,
}, {
'id': 8,
'name': 'Donut',
'type': 'Pastry',
'calories': 452.0,
'fat': 25.0,
'carbs': 51.0,
'protein': 4.9,
'sodium': 326.0,
'calcium': 2.0,
'iron': 22.0,
}, {
'id': 9,
'name': 'KitKat',
'type': 'Candy',
'calories': 518.0,
'fat': 26.0,
'carbs': 65.0,
'protein': 7.0,
'sodium': 54.0,
'calcium': 12.0,
'iron': 6.0,
}, {
'id': 10,
'name': 'Chocolate',
'type': 'Candy',
'calories': 518.0,
'fat': 26.0,
'carbs': 65.0,
'protein': 7.0,
'sodium': 54.0,
'calcium': 12.0,
'iron': 6.0,
}, {
'id': 11,
'name': 'Chamoy',
'type': 'Candy',
'calories': 518.0,
'fat': 26.0,
'carbs': 65.0,
'protein': 7.0,
'sodium': 54.0,
'calcium': 12.0,
'iron': 6.0,
}, {
'id': 6,
'name': 'Lollipop',
'type': 'Candy',
'calories': 392.0,
'fat': 0.2,
'carbs': 98.0,
'protein': 0.0,
'sodium': 38.0,
'calcium': 0.0,
'iron': 2.0,
}, {
'id': 7,
'name': 'Honeycomb',
'type': 'Other',
'calories': 408.0,
'fat': 3.2,
'carbs': 87.0,
'protein': 6.5,
'sodium': 562.0,
'calcium': 0.0,
'iron': 45.0,
}, {
'id': 8,
'name': 'Donut',
'type': 'Pastry',
'calories': 452.0,
'fat': 25.0,
'carbs': 51.0,
'protein': 4.9,
'sodium': 326.0,
'calcium': 2.0,
'iron': 22.0,
}, {
'id': 9,
'name': 'KitKat',
'type': 'Candy',
'calories': 518.0,
'fat': 26.0,
'carbs': 65.0,
'protein': 7.0,
'sodium': 54.0,
'calcium': 12.0,
'iron': 6.0,
}, {
'id': 10,
'name': 'Chocolate',
'type': 'Candy',
'calories': 518.0,
'fat': 26.0,
'carbs': 65.0,
'protein': 7.0,
'sodium': 54.0,
'calcium': 12.0,
'iron': 6.0,
}, {
'id': 11,
'name': 'Chamoy',
'type': 'Candy',
'calories': 518.0,
'fat': 26.0,
'carbs': 65.0,
'protein': 7.0,
'sodium': 54.0,
'calcium': 12.0,
'iron': 6.0,
},
];
basicData: any[] = this.data.slice(0, 20);
constructor(http: HttpInterceptorService,
private _dialogService: TdDialogService) {}
openPrompt(row: any, name: string): void {
this._dialogService.openPrompt({
message: 'Enter comment?',
value: row[name],
}).afterClosed().subscribe((value: any) => {
if (value !== undefined) {
row[name] = value;
}
});
}
}
/*
© 2017 Teradata. All rights reserved.
*/
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {AppComponent} from './app.component';
import {MaterialModule} from '@angular/material';
import {CovalentCoreModule} from '@covalent/core';
import {CovalentHttpModule} from '@covalent/http';
import {CovalentDynamicFormsModule} from '@covalent/dynamic-forms';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
MaterialModule,
CovalentCoreModule,
CovalentHttpModule.forRoot(),
CovalentDynamicFormsModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: []
})
export class PlunkerAppModule {}
platformBrowserDynamic().bootstrapModule(PlunkerAppModule);
/*
© 2017 Teradata. All rights reserved.
*/
// modify this to point to different versions (an empty string '' would mean latest)
let angularVer = '@4.0.0';
let materialVer = '@2.0.0-beta.3';
let flexVer = '@2.0.0-beta.7';
let covalentVer = '@1.0.0-beta.3-1';
let rxjsVer = '@5.2.0'
/** Add Transpiler for Typescript */
System.config({
transpiler: 'typescript',
typescriptOptions: {
emitDecoratorMetadata: true
},
packages: {
'.': {
defaultExtension: 'ts'
},
'vendor': {
defaultExtension: 'js'
}
}
});
System.config({
map: {
'main': 'main.js',
// Angular specific mappings.
'@angular/animations': 'https://unpkg.com/@angular/animations'+ angularVer +'/bundles/animations.umd.js',
'@angular/animations/browser': 'https://unpkg.com/@angular/animations'+ angularVer +'/bundles/animations-browser.umd.js',
'@angular/core': 'https://unpkg.com/@angular/core'+ angularVer +'/bundles/core.umd.js',
'@angular/common': 'https://unpkg.com/@angular/common'+ angularVer +'/bundles/common.umd.js',
'@angular/compiler': 'https://unpkg.com/@angular/compiler'+ angularVer +'/bundles/compiler.umd.js',
'@angular/http': 'https://unpkg.com/@angular/http'+ angularVer +'/bundles/http.umd.js',
'@angular/forms': 'https://unpkg.com/@angular/forms'+ angularVer +'/bundles/forms.umd.js',
'@angular/router': 'https://unpkg.com/@angular/router'+ angularVer +'/bundles/router.umd.js',
'@angular/platform-browser': 'https://unpkg.com/@angular/platform-browser'+ angularVer +'/bundles/platform-browser.umd.js',
'@angular/platform-browser/animations': 'https://unpkg.com/@angular/platform-browser'+ angularVer +'/bundles/platform-browser-animations.umd.js',
'@angular/platform-browser-dynamic': 'https://unpkg.com/@angular/platform-browser-dynamic'+ angularVer +'/bundles/platform-browser-dynamic.umd.js',
'@angular/material': 'https://unpkg.com/@angular/material'+ materialVer +'/bundles/material.umd.js',
'@angular/flex-layout': 'https://unpkg.com/@angular/flex-layout'+ flexVer,
// Covalent specific mappings.
'@covalent/core': 'https://unpkg.com/@covalent/core'+ covalentVer +'/core.umd.js',
'@covalent/http': 'https://unpkg.com/@covalent/http'+ covalentVer +'/http.umd.js',
'@covalent/dynamic-forms': 'https://unpkg.com/@covalent/dynamic-forms'+ covalentVer +'/dynamic-forms.umd.js',
// Rxjs mapping
'rxjs': 'https://unpkg.com/rxjs' + rxjsVer,
},
packages: {
// Thirdparty barrels.
'rxjs': { main: 'index' },
}
});
/*
© 2017 Teradata. All rights reserved.
*/
## Covalent Plunker
This `plnkr` should be used for *demos*, *issue replication* and *idea sharing*.
Go to our [documentation](http://getcovalent.com) site or [repo](https://github.com/Teradata/covalent) for more info.
© 2017 Teradata. All rights reserved.