ngx-global-table
v1.1.1
Published
1. Install ngx-global-table using @npm i ngx-global-table <br> 2. ``` import { NgxGlobalTableModule } from 'ngx-global-table';``` <br> 3. Add NgxGlobalTableModule into your @NgModule's imports array. ``` import { NgModule } from '@an
Downloads
18
Readme
NgxGlobalTable usage guide
Install ngx-global-table using @npm i ngx-global-table
import { NgxGlobalTableModule } from 'ngx-global-table';
Add NgxGlobalTableModule into your @NgModule's imports array.
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { NgxGlobalTableModule } from 'ngx-global-table'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, NgxGlobalTableModule ], bootstrap: [ AppComponent ], }) export class AppModule {}
Import these interface to you component.
import { TableHeader, TableData } from 'ngx-global-table';
Generate table header and table data based on imported interface
1. tableHeader: TableHeader[] = [ { headerName : 'Country Name', headerKey : 'countryName', extras : { } }, { headerName : 'State Name', headerKey : 'stateName' }, { headerName : 'City Name', headerKey : 'cityName' } ] HEADER DESCRIPTION 1. headerName - Table header column display Name. 2. headerKey - key to map tableData columns. 3. extras - It is an optional configuration object. ex - you need to display three dot menu or add some additional html element. EXTRAS DESCRIPTION extras : { displayMenu : true // display three dot menu. element : `<span> o </span>` // display icon in cell. } 2. tableData: TableData[] = [ { countryName : 'Germany', stateName : 'Berlin', cityName : 'munich' } ] IMPORTANT NOTE : key of objects inside tableData array should be same as tableHeader's headerKey.
Add selector into your template
<ngx-global-table [tableHeader]="tableHeader" [tableData]="tableData" ></ngx-global-table>
#apis
@Input
tableHeader: TableHeader[]
tableData : TableData[]
menuOption : string[]
// if you want to use pagination then pass total number of element.
totalElement: number
@Output
sortingtEvent
menuEvent
paginationEvent