NG2TableView for Angular2 apps.
Table component with sorting, filtering, paging, custom cell template, nested values bind ... for Angular2. inspired by ng2-table
http://dennis-b.github.io/NG2TableView/
Make sure you have Nodejs
Best way to install NG2TableView is through npm
npm i NG2TableView --saveOr, you can download it in a ZIP file.
import module in yours AppModule:
import {Ng2TableViewModule} from "NG2TableView";
@NgModule({
imports: [Ng2TableViewModule, ...],
...
})
export class AppModule {
}
import {TableView} from "NG2TableView";
import {Component, OnInit} from '@angular/core';
import {PageTableColumns} from "./cols/columns";
import {Route, ActivatedRoute} from "@angular/router";
@Component({
selector: "demo-page",
template: require('./page.html')
})
export class Page extends TableView implements OnInit {
constructor(private route: ActivatedRoute) {
super(route.data.getValue().users);
}
ngOnInit() {
this.getBuilder()
.addCols(PageTableColumns)
.setPaging(true)
.setItemsPerPage(5)
.setSelectable(true);
this.buildTable();
}
}export const PageTableColumns:Array<ColumnIfc> = new TableColumns()
.addCol(new TableColumn()
.setTitle("index")
.setName("index")
.setSort(true)
)
.addCol(new TableColumn()
.setTitle("Editable name ")
.setName("name")
.setTemplate(require("./custom-template.html"))
.setSort(true)
)
...<div class="page">
<md-content layout-padding>
<div layout-gt-sm="row">
<md-input type="text"
placeholder="filter by index"
class="col"
[column]="'index'"
ng2TableViewFilter="tableBuilder.filtering"
(tableChanged)="onChangeTable($event)">
</md-input>
</div>
<ng2TableView [config]="tableBuilder"
(tableChanged)="onChangeTable($event)"
[rows]="tableBuilder.rows"
[columns]="tableBuilder.columns">
</ng2TableView>
<div class="text-center">
<ngTableViewPaging [config]="tableBuilder"
[dataLength]="tableBuilder.length"
(pageChanged)="onChangeTable($event)">
</ngTableViewPaging>
</div>
</md-content>
</div>
...