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 areprimary,secondary,success,danger,warning,info,light,darkandmuted -
multiselect<boolean> Wether you want to select multiple rows or not. Defaults tofalse. -
withCheckBox<boolean> Wether you want to show checkbox or not. Defaults tofalse.
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 |