Wondering what’s next for npm?Check out our public roadmap! »

ngx-advanced-tableTypeScript icon, indicating that this package has built-in type declarations

0.0.12 • Public • Published


Build Statusnpm version

Advanced table component for Angular(2+).


  • Base Table with dynamic data.
    • Header text should be center aligned
    • Odd Even coloring should be configurable using @Input parameter - off / default color / color def for odd and even.
  • Dynamic column definition.
    • left or right Alignment for text
    • infer alignment using data type
    • Text for header
  • Sorting.
    • Programatic Sorting specification
    • Show sort indicators on header
    • Togger sort order on clicking the header
  • Pagination (This will just provide a visual information strip. Actual pagination is to be handled externally).
  • Checkbox column.
  • Using Generics so that the DataType of data can be intelligently used?
  • Scrollable Table with Fixed headers
  • Column Formatters
  • Row Selection (using checkbox)
  • Row Event hooks
  • Re-render notification with new data (Observable?)


  • include the component in your project
npm i ngx-advanced-table -S
  • include the AdvancedTableModule in your AppModule.
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AdvancedTableModule } from 'ngx-advanced-table';
import { AppComponent }  from './app.component';
  imports:      [ BrowserModule, AdvancedTableModule],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
export class AppModule { }
  • declare the component in you component template
<advanced-table [data]="mydata" [columns]="mycolumns" [sortInfo]="sortInfo"></advanced-table>
  • Pass on data to the table component in your TS file.
  constructor() {
    this.mycolumns = [
      {attr: 'select', display: 'Sel', checkbox: true},
      {attr: 'age', display: 'Age', align: Align.Right, checkbox: true },
      {attr: 'fName', display: 'First Name', align: Align.Center,
        formatter: (itm: string) => {
          // console.log('my formatter', itm);
          return itm.toUpperCase();
      {attr: 'lName', display: 'Last Name', align: Align.Left},
      {attr: 'doj', display: 'Date of Joining', align: Align.Right,
        formatter: (itm: Date) => {
          return '' + itm.getFullYear();
    this.mydata =  [
      {age: 40, fName: 'Ravi', lName: 'Kumar', doj: new Date('2011-10-19')},
      {age: 20, fName: 'Vijay', lName: 'Dharap', doj: new Date('2011-10-20')},
      {age: 20, fName: 'Avinash', lName: 'Dongre', doj: new Date('2011-10-21')},
      {age: 50, fName: 'Sanjay', lName: 'Das', doj: new Date('2011-10-22')}
    this.sortInfo = [
      {attr: 'age', sortDir: 'desc'},
      {attr: 'fName', sortDir: 'asc'}

To release (just for my own reference)

git commit
npm run release
npm run build
npm publish dist/ --registry http://registry.npmjs.org


npm i ngx-advanced-table

DownloadsWeekly Downloads






Last publish


  • avatar