@jb7/ngxdatagrid NPM

@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"}
    ];