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

About Author

Author Image
Priya verma

Priya is a bright UI designer, having skills in , HTML, CSS, javascript, bootstrap. Her hobbies are playing outdoor games.

Request for Proposal

Name is required

Comment is required

Sending message..