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: '[email protected]'},
    { id: '2', name: 'Micheal Jackson', email: '[email protected]'},
    { id: '3', name: 'Emma Watson',     email: '[email protected]'}
];

<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

| key | Description | | ------------- | ------------- | | type | type of table data(ex. 'text', 'button') | | key | the key value of the data list to represent the value | | name | name of the column header | | width? | the width of the column(ex. '100%', '100px') | | value? | set value directly without mapping to key | | nullValue? | the value to be set if the mapped key is null or no mapped. | | onCustomValue?| it provides a function to customize a value | | onClick? | a callback when a table data is clicked |

option

| key | Description | | ------------- | ------------- | | rowsPerPage? | number of lines to show on a page(default: 10) | | emptyMessage? | message to show if data list does not exist(default: 'No results') | | emptySubMessage? | secondary message to show if data list does not exist |

event

| key | Description | | ------------- | ------------- | | onClickRow? | callback when a line is clicked | | onDbClickRow? | callback when a line is double clicked |

License

MIT