Have ideas to improve npm?Join in the discussion! »

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

0.0.12 • Public • Published

NgAdvancedTable

Build Statusnpm version

Advanced table component for Angular(2+).

Features

  • 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?)

Usage

  • 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';
 
@NgModule({
  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

Install

npm i ngx-advanced-table

DownloadsWeekly Downloads

11

Version

0.0.12

License

MIT

Last publish

Collaborators

  • avatar