ilsp-ng2-grid

Installation

To install this library, run:

$ npm install ilsp-ng2-grid --save

and then from your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import library
import { IlspNg2GridModule } from 'ilsp-ng2-grid';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Specify library as an import
    IlspNg2GridModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once your library is imported, you can use its components, directives and pipes in your Angular application:

<!-- You can now use ng2grid library component in app.component.html -->
<ilsp-grid [config]="gridConfig" [columns]="columns" [rows]="rows"></ilsp-grid>

Config details:

config: {
  className: '', // css table class name
  draggable: true, // false. If you want to get draggable columns functionality
  inputFilter: { // Input of header columns
    className: "formo-control", // class name
  },
  selectable: true, // false. If you want to get selectable functionallity
  sorting: true, // false, If you want to add sortable functionallity
  paging: { // If you want to use pagination functionallity
    itemsPerPage: 10
  },
  tools: true // false
}

columns = [
  { 
    title: 'header title', // Header title
    name: 'property_name' // Object property name
  }
]

rows = [ // rows array
  { 
    'property_name': 'value'
  },
  { 
    'property_name': 'value'
  }
]

You have to import scss file (node_modules/ilsp-ng2-grid/scss/grid.component.scss) to your main scss file and Material Fonts. If you haven't used Material Fonts on yor project, you can use next css rules.

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v21/2fcrYFNaTjcS6g4U3t-Y5UEw0lE80llgEseQY3FEmqw.woff2) format('woff2');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

You can customize grid colors, the main variables are:

$selected-item-bg-color: #fafafa;
$primary-color: #3F51B5;

Event Emitters

@Output() rowClicked = new EventEmitter();
@Output() gridChanged = new EventEmitter();
@Output() rowSelected = new EventEmitter();
@Output() cellClicked = new EventEmitter();

So you can add to your variables files those variables.

MIT © Ricardo García