ngx-tbl v0.0.8

ngx-tbl

Angular 5 table component

• Server Side Pagination, Search and Sorting

• Supports Create, Update and Delete out of the box

• Supports custom cell template

Installation

npm install ngx-tbl --save

Quick Start

AppModule.ts

import { NgModule } from "@angular/core";
import { NgxTblModule } from '@ngx-tbl';
...

@NgModule({
    imports: [
        ...
        NgxTblModule
    ],
    ...
})
export class AppModule {

}

AppComponent.ts

export class AppComponent {
  title = 'app';
  tableConfig = {}
  countries$;
  constructor(private http: HttpClient) { }
  loadCountries(params) {
    let queryParams = {};
    queryParams = new HttpParams()
      .set('limit', params.limit)
      .set('search', params.search)
      .set('skip', params.skip)
      .set('sort', params.sort)

    this.countries$ = this.http.get('http://localhost:5000/getCountries', { params: queryParams })
  }

}

AppComponent.html

<ngx-tbl [items]="countries$ | async" (load)="loadCountries($event)" [config]="tableConfig">
  <ngx-tbl-column [name]="'ID'" [key]="'ID'" [sortable]="true"></ngx-tbl-column>
  <ngx-tbl-column [name]="'Name'" [key]="'name'" [sortable]="true"></ngx-tbl-column>
  <ngx-tbl-column [name]="'Capital'" [key]="'capital'" [sortable]="true"></ngx-tbl-column>
</ngx-tbl>

Documentation

Inputs

items Observable<[Items](https://github.com/vishnurs/ngx-tbl/blob/master/src/lib/interfaces/items.ts)> - Table rows and total items. This total returned from server is used for pagination.

config[Config](https://github.com/vishnurs/ngx-tbl/blob/master/src/lib/interfaces/config.ts) - Configurable options for the table

Outputs

load <EventEmitter> - Emitted on load, search and pagination

edit <EventEmitter> - Emit this while editing a row

add <EventEmitter> - Emit while adding a new row

delete <EventEmitter> - Emit while deleting a row