ng-simple-grid

angular4+ grid components. also provide pagination component. see demo

• ng-simpleGrid changed to ng-simple-grid

Install

npm install --save ng-simple-grid

Import

import { NgSimpleGridModule } from 'ng-simple-grid';

@NgModule({
  ...
  imports: [
    ...,
    NgSimpleGridModule
  ]
})

Usage

import { NgSimpleGrid, GridComponent, GridColumn } from 'ng-simple-grid';

@ViewChild('grid')
grid: GridComponent;

gridConfig: NgSimpleGrid = {
  columns: [
    { type: 'text',   key: 'id',     name:'ID'    },
    { type: 'text',   key: 'name',   name:'NAME'  },
    { type: 'button', key: 'email',  name:'EMAIL' }
  ],
  option: {
    rowsPerPage: 10
  }
};

sampleDataList: any[] = [
    { id: '1', name: 'Deby Jones',      email: 'jacky@naver.com'},
    { id: '2', name: 'Micheal Jackson', email: 'micl@daum.com'},
    { id: '3', name: 'Emma Watson',     email: 'emm@google.com'}
];

<ng-simple-grid #grid 
  [config]="gridConfig" 
  [dataList]="sampleDataList">
</ng-simple-grid>

You can also dynamically set the data list using the setDataList () function.

ngOnInit() {
  this.grid.setDataList(this.sampleDataList);
}

Config

columns

option

event

License

MIT