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.