node package manager

NG2TableView

NG2TableView npm version

NG2TableView for Angular2 apps.

Table component with sorting, filtering, paging, custom cell template, nested values bind ... for Angular2. inspired by ng2-table

Usage & Demo

http://dennis-b.github.io/NG2TableView/

Getting Started

Make sure you have Nodejs

Best way to install NG2TableView is through npm

npm i NG2TableView --save

Or, you can download it in a ZIP file.

Usage

import module in yours AppModule:

import {Ng2TableViewModule} from "ng2-table-view";
@NgModule({
    imports: [Ng2TableViewModule, ...],
   ...
})
export class AppModule {
}
 

some-comp.ts

  import {TableView} from "ng2-table-view";
  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();
      }
  }

columns.ts

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)
    )
 
    ...

page.html (template)

<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>
 

...

Use this within your firewall

Combine open-source packages with your private code and publish to a private registry behind the firewall. npm ♥ enterprise developers

how? learn more

Collaborators list

Stats

Try it out

Keywords

angular2, ng2, angularjs, table, tableView, grid, filter, sort

Dependencies (21)

@angular/common, @angular/compiler, @angular/compiler-cli, @angular/core, @angular/forms, @angular/http, @angular/platform-browser, @angular/platform-browser-dynamic, @angular/router, angular2-router-loader, @angular2-material/checkbox, @angular2-material/core, @angular2-material/icon, @angular2-material/input, core-js, lodash, moment, normalize.css, rxjs, zone.js, reflect-metadata