ng-simpleGrid

angular2+ grid components. also provide pagination component.

Install

npm install --save ng-simplegrid

Import

import { NgSimpleGridModule } from 'ng-simpleGrid';

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

Usage

import { GridComponent, GridColumn } from 'ng-simpleGrid';

@ViewChild('grid')
grid: GridComponent;

gridOption: 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-simpleGrid #grid 
  [grid]="gridOption" 
  [dataList]="sampleDataList">
</ng-simpleGrid>

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 | | emptySubMessage? | secondary message to show if data list does not exist |

event

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

License

MIT