ngx-table-grid

Welcome to "ngx-table-grid"

ngx-table-grid is a fully-featured and highly customizable data grid for angular.

Getting started

Install dependencies

$ npm install --save ngx-table-grid

HTML Template

<ngx-table-grid
 [tableConfig]="tableConfig"
 [rowData]="data"
 color="primary"
 [multiselect]="true"
 [withCheckBox]="true"
 (rowClicked)="click($event)"
 (rowDoubleClicked)="click($event)"
 (selectedRows)="click($event)"
></ngx-table-grid>

Import the grid and styles

import { NgxTableGridModule } from 'ngx-table-grid';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxTableGridModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Add the following line to your global.scss or style.scss in your project.

@import '~ngx-table-grid/themes/ngx-table-grid.theme';

Set configuration

tableConfig = [
    { column: 'Name', columnVal: 'name' },
    { column: 'Mobile', columnVal: 'mobile' },
    { column: 'DOB', columnVal: (row: any) => { return row.dob.value } },
    { column: 'Role', columnVal: 'role' },
    { column: 'Age', columnVal: 'dob', conversion: this.get_age },
    { column: 'Action', actions: [
      { if: true, // condition wether it would be visible or not
        title: 'Delete',
        icon: 'fa fa-trash', // `fa fa-trash` will change like <i class="fa fa-trash"></i>
        handler: (row: any) => {
          console.log(row) // Write any function here
        } }
      ] }
  ];

get_age(dob: any) {
  return (new Date().getYear()) - (new Date(dob)).getYear();
}

rowData = [
  {
    name: "John",
    mobile: "9876543210",
    dob: {
      format: 'yyyy-mm-dd',
      value: '1999-09-09'
    },
    role: "user"
  },
]

Attributes or Events

• tableConfig <Array<Object>> To declare the configuration of table.
• rowData <Array<Object>> Data of your table.
• color <string> Supported values are primary, secondary, success, danger, warning, info, light, dark and muted
• multiselect<boolean> Wether you want to select multiple rows or not. Defaults to false.
• withCheckBox <boolean> Wether you want to show checkbox or not. Defaults to false.

Events (Output)

Name	Description
selectedRows	Event will trigger when the row is clicked. This will return all the selected rows in grid
rowClicked	Event will trigger when the row is clicked. This will return the select row
rowDoubleClicked	Event will trigger when the row is clicked twice. This will return the select row