@jb7/ngxdatagrid

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

Stats

StarsIssuesVersionUpdatedCreatedSize
@jb7/ngxdatagrid
1.7.103 years ago3 years agoMinified + gzip package size for @jb7/ngxdatagrid in KB

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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.