How to use Ngx datatable in Angular2
Posted By : Priya verma | 30-Dec-2016
ngx-datatable is a Angular2 component for presenting large and complex data.
Installing : npm install @swimlane/ngx-datatable
After Installing, include Angular2DataTableModule in your application module like:
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
@NgModule({
declarations: [AppComponent],
imports: [NgxDatatableModule, BrowserModule]
});
In your html file you define a table like:
@ViewChild('mydatatable') table;
Note: Child components in our view can be accessed from our parent component easily with @ViewChild.
serviceData = [
{
"subServiceData": [],
"id": 195,
"name": "qqqq",
"description": null
},
{
"subServiceData": [
{
"id": 69,
"name": "Medication",
"description": null
},
{
"id": 66,
"name": "Basic Checkup",
"description": null
},
{
"id": 67,
"name": "Disease Diagnose",
"description": null
}
],
"id": 68,
"name": "Medical Service",
"description": null
},
{
"subServiceData": [
{
"id": 62,
"name": "Home Cooking",
"description": null
},
{
"id": 63,
"name": "Home Maintenance",
"description": null
},
{
"id": 64,
"name": "Home Dusting",
"description": null
}
],
"id": 65,
"name": "Home Care",
"description": null
},
{
"subServiceData": [
{
"id": 74,
"name": "Laundry",
"description": null
},
{
"id": 73,
"name": "Full body bath",
"description": null
},
{
"id": 71,
"name": "Partial bath",
"description": null
},
{
"id": 72,
"name": "Feeding",
"description": null
}
],
"id": 70,
"name": "Personal Care",
"description": null
}
];
toggleExpandRow(row) {
console.log('Toggled Expand Row!', row);
let id = row.id;
if(!this.activeClass){
this.table.collapseAllRows();
}
this.table.toggleExpandRow(row);
this.subServiceData = row.subServiceData;
this.activeClass = false;
}
THANKS
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Priya verma
Priya is a bright UI designer, having skills in , HTML, CSS, javascript, bootstrap. Her hobbies are playing outdoor games.