ngx-global-table

NgxGlobalTable usage guide

1. Install ngx-global-table using @npm i ngx-global-table
   

2. import { NgxGlobalTableModule } from 'ngx-global-table';
   

3. 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 {}
   

4. Import these interface to you component.
   import { TableHeader, TableData } from 'ngx-global-table';

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

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