0.1.5 • Published 10 months ago
ngx-table-grid v0.1.5
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
,dark
andmuted
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 |
0.1.4
10 months ago
0.1.3
10 months ago
0.1.5
10 months ago
0.1.2
2 years ago
0.1.0
2 years ago
0.1.1
2 years ago
0.0.15
3 years ago
0.0.16
3 years ago
0.0.13
3 years ago
0.0.14
3 years ago
0.0.11
3 years ago
0.0.12
3 years ago
0.0.10
3 years ago
0.0.9
3 years ago
0.0.8
3 years ago
0.0.7
3 years ago
0.0.6
3 years ago
0.0.5
3 years ago
0.0.4
3 years ago
0.0.3
3 years ago
0.0.2
3 years ago
0.0.1
3 years ago