@jeelanibashashaik07/ngxdatagrid
A lightWeigt Angular2+ datagrid with custom cell templates such as editable cells,sorting,universal grid search,multiple selection of items.
Installation
To install this library, run:
$ npm install @jeelanibashashaik07/ngxdatagrid --save
Consuming the library
Once you have installed this library, you need to import it in app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import
import { NgxDataGridModule } from '@jeelanibashashaik07/ngxdatagrid';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
// Specify library as an import
NgxDataGridModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
in your html file
<ngx-data-grid [rows]="rows" [selectionType]="'multiple'" [columns]="columns" [gridHeight]="'250'" [headerRowHeight]="'30'" [gridWidth]="'900'"></ngx-data-grid>
and in your .ts file,
rows=[
{"userId": 256,"id": 1,"title": "delectus","completed": false},
{"userId": 89,"id": 2,"title": "quis ut","completed": false},
{"userId": 64,"id": 3,"title": "fugiat","completed": false},
{"userId": 23,"id": 4,"title": "tempora","completed": true}
];
columns = [
{name:"userId"},
{name:"id"},
{name:"title"},
{name:"completed"}
];
Demo
Demo for this grid is available at ngxdatagrid.firebaseapp.com
License
MIT © Jeelani Basha Shaik