@jb7/ngxdatagrid
v1.7.10
Published
A lightWeight Angular2+ datagrid with columns selection,sorting, filtering, virtual scroll, pagination, inline-editing, single/multiple/shift key/pre-selection selection of rows, with integrated search, csv, excel downloads,custom cell templates, decouple
Downloads
6
Maintainers
Readme
@jb7/ngxdatagrid
A lightWeight Angular2+ datagrid with sorting, filtering, virtual scroll, inline-editing, single/multiple selection of rows, decoupled grid styling, integrated toolbar with search, csv, excel downloads and custom cell templates such as editable cells.
Installation
To install this library, run:
$ npm install @jb7/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 '@jb7/ngxdatagrid';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
// Specify library as an import
NgxDataGridModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
in your html file
<ngxdatagrid [rows]="rows" [columns]="columns" [gridHeight]="250" [headerRowHeight]="30" [gridWidth]="900" [rowHeight]="30"></ngxdatagrid>
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