https://github.com/dennis-b/NG2TableView

ng2 table-view with angular material
https://github.com/dennis-b/NG2TableView

Last synced: about 1 month ago
JSON representation

ng2 table-view with angular material

• Host: GitHub
• URL: https://github.com/dennis-b/NG2TableView
• Owner: dennis-b
• Created: 2016-05-16T13:04:12.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2018-03-10T06:32:08.000Z (almost 7 years ago)
• Last Synced: 2024-10-15T23:21:25.146Z (about 2 months ago)
• Language: TypeScript
• Homepage: http://dennis-b.github.io/NG2TableView/
• Size: 3.15 MB
• Stars: 18
• Watchers: 3
• Forks: 6
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-angular - NG2TableView - ng2 table-view with angular material (Uncategorized / Uncategorized)

README

        
# NG2TableView [![npm version](https://badge.fury.io/js/NG2TableView.svg)](https://www.npmjs.com/package/NG2TableView)

NG2TableView for Angular2 apps.

Table component with sorting, filtering, paging, custom cell template, nested values bind ... for Angular2. inspired by [ng2-table](https://github.com/valor-software/ng2-table)

# Usage & Demo

[http://dennis-b.github.io/NG2TableView/](http://dennis-b.github.io/NG2TableView/)

- - -

## Getting Started

Make sure you have [Nodejs](https://nodejs.org/)

Best way to install ***NG2TableView*** is through [npm](https://www.npmjs.com/package/NG2TableView)

  ```bash

  npm i NG2TableView --save

  ```

  Or, you can [download it in a ZIP file](https://github.com/dennis-b/NG2TableView/archive/master.zip).

## Usage

**import module in yours AppModule:**

```

import {Ng2TableViewModule} from "NG2TableView";

@NgModule({

    imports: [Ng2TableViewModule, ...],

   ...

})

export class AppModule {

}

```

## some-comp.ts

```bash

  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();

      }

  }

```

## columns.ts

```bash

export const PageTableColumns:Array = 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)

```bash



    

        


            

            

        


        

        

        


            

            

        

    



```

...