0.0.3 • Published 4 years ago
ngx-ck-grid v0.0.3
NGXCkGrid
A resposive grid with lazy load feature to draw hierarchical data/tree data structure.
The grid is developed to solve real world problem to bind tree data structure.Also the grid is purely angular based .
Installation
Install with npm:
npm install ngx-ck-grid
Import the ngx-ck-grid module to your application module:
import { NGXCkGridModule } from 'ngx-ck-grid';
@NgModule({
declarations: [...],
imports: [NGXCkGridModule,...],
bootstrap: [AppComponent]
})
export class AppModule { }Usage
<ngx-ck-grid
[tableOptions]="tableOptions"
(gridRowSelection)="gridRowSelection($event)"
></ngx-ck-grid>Configuration
To bind data and columns to grid use TableConfiguration class to define properties ,columns and data.
Properties
| Name | Datatype | Description |
|---|---|---|
| id | string | sets unique id for a grid |
| data | Object Array | An array of objects with key and values |
| columns | ColumnConfiguration | Use ColumnConfiguration interface to define column properties |
| enableRowSelection | boolean | Use true or false to enable/disable row selection |
| rowSelection | string | single or multiple |
| enableColumnChooser | boolean | Use true or false to enable/disable column chooser |
| enableSort | boolean | Use true or false to enable/disable sorting |
| enableFixedHeader | boolean | Use true or false to enable/disable fixed header |
| showSpinner | boolean | Use true or false to enable/disable sppinner on scroll/sort/filter |
| enableColumnFilters | boolean | Use true or false to enable/disable column filters |
| isTreeStructure | boolean | Use true or false to define tree structure |
| enableContextMenu | boolean | Use true or false to enable/disable grid context menu |
| contextMenuItems | ContextMenuItems[] | Use ContextMenuItems[] interfac to define context menus |
| icons | TableIcon | Use TableIcon interfac to define icons for the grid |
Events
| Name | Description |
|---|---|
| gridRowClick | Fired on row click |
| gridCellClick | Fired on cell click |
| gridExpandCollapseClick | Fired on Exapnd/Collapse icon click |
| gridContextMenuClick | Fired on grid context menu click |
Demo
Demo available at git hub repository ngxCKGridDemo.