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