How to use angular2-data-table

Question

Can't find any tutorial of how to use angular2-data-table library is here: https://github.com/swimlane/angular2-data-table

The documentation seems to be lacking simple examples.

Can any one give me a simple example of using datatable in angular2

Answer 1

On this page with demos http://swimlane.github.io/ngx-datatable/ there is link to source link on top of every demo page. That helped me to understand the library a bit.

It seems authors made it almost impossible to spot that source link.

Answer 2

These is a solution : Implementing data table on easier way

https://www.npmjs.com/package/angular2-datatable

Just change your data, replace [mfData]="Your responsepacket"

Here i am sharing an example as well.

Data:

{
    "responsecode": "200",
    "status": "Success",
    "ResponseMessage": "Success",
    "responsepacket": [{
            "member_id": 4,
            "member_name": "mehulkachhwaya",
            "member_contactno": "9977828800",
            "member_dob": "/Date(804623400000)/",
            "member_gender": "Male",
            "workouttype_id": "GYM",
            "member_imagename": "user.jpg",
            "member_imagepath": "user.jpg",
            "joinningdate": "/Date(-62135596800000)/",
            "address": "jail  road",
            "name_complaint": "6/6/2017 6:30:26 PM",
            "contact_complaint": null,
            "msg_complaint": "unlocked",
            "status": null
        },

        {
            "member_id": 7011,
            "member_name": "rakeshchatur",
            "member_contactno": "0000000000",
            "member_dob": "/Date(1498069800000)/",
            "member_gender": "Female",
            "workouttype_id": "GYM+CARDIO",
            "member_imagename": "Today work.png",
            "member_imagepath": "work.png",
            "joinningdate": "/Date(-62135596800000)/",
            "address": "[e-mail]",
            "name_complaint": "6/21/2017 7:40:49 PM",
            "contact_complaint": null,
            "msg_complaint": "unlocked",
            "status": null
        },
        {
            "member_id": 7012,
            "member_name": "sadassa",
            "member_contactno": "0000000000",
            "member_dob": "/Date(1498156200000)/",
            "member_gender": "Male",
            "workouttype_id": "GYM",
            "member_imagename": "logo.png",
            "member_imagepath": "hi.png",
            "joinningdate": "/Date(-62135596800000)/",
            "address": "Jail Road",
            "name_complaint": "6/21/2017 7:45:11 PM",
            "contact_complaint": null,
            "msg_complaint": "unlocked",
            "status": null
        },
        {
            "member_id": 7013,
            "member_name": "sadassa",
            "member_contactno": "0000000000",
            "member_dob": "/Date(1498156200000)/",
            "member_gender": "Male",
            "workouttype_id": "GYM",
            "member_imagename": "logo.png",
            "member_imagepath": "hi.png",
            "joinningdate": "/Date(-62135596800000)/",
            "address": "Jail Road",
            "name_complaint": "6/21/2017 7:45:13 PM",
            "contact_complaint": null,
            "msg_complaint": "unlocked",
            "status": null
        },
        {
            "member_id": 7014,
            "member_name": "oyyds",
            "member_contactno": "9090909090",
            "member_dob": "/Date(1497897000000)/",
            "member_gender": "Male",
            "workouttype_id": "GYM",
            "member_imagename": "register1.png",
            "member_imagepath": "hi.png",
            "joinningdate": "/Date(-62135596800000)/",
            "address": "Jail Road",
            "name_complaint": "6/21/2017 7:54:04 PM",
            "contact_complaint": null,
            "msg_complaint": "unlocked",
            "status": null
        }
    ]
}

And consume it with in your template:

   <div>




                                    <table class="pagination" cellspacing="0" [mfData]="responseformate.responsepacket" #mf="mfDataTable" [mfRowsOnPage]="5"
                                    >



                                        <thead>
                                            <tr class="tittle">

                                                <th><span> <mfDefaultSorter by="member_name">User Name</mfDefaultSorter></span> </th>
                                                <th><span>Contact No</span> </th>
                                                 <th><span>WorkOut Type</span> </th>
                                                  <th><span>Image</span> </th>
                                                    <th><span>Joining Date</span> </th>
                                                <th><span>Action</span> </th>


                                            </tr>
                                        </thead>
                                        <tbody id="UserList"  >
                                           <tr *ngFor=" let todo of mf.data let i=index " >

                                                <td>{{todo.member_name}}</td>
                                                <td>{{todo.member_contactno}}</td>
                                                 <td>{{todo.workouttype_id}}</td>

                                                  <td style="width:125 px"><img class="img-circle" src={{todo.member_imagepath}} alt="Smiley face"></td>
                                                  <td>{{todo.name_complaint}}</td>

                  <td style="width:70px;"><a href="javascript:;"  title="Edit User Information">
                 <i class="fa fa-pencil fa-fw" aria-hidden="true" style="color: #1a9ef5;padding-right: 0px"></i></a>&nbsp;
                 <a href="javascript:;" title="UnBlock this user">
                 <i class="fa fa-expeditedssl" aria-hidden="true" style="color: black;"></i></a>&nbsp;
                <a href="javascript:;" title="Delete User" (click)=delete(todo.member_id)>
                                <i class="fa fa-trash-o" aria-hidden="true" style="color: red;"></i></a></td>



                                           </tr>


                                        </tbody>
                                            <tfoot>
                                                <tr>
                                                   <td colspan="4">
                                    <mfBootstrapPaginator [rowsOnPageSet]="[5,10,25]"></mfBootstrapPaginator>



                                                    </td>
                                                </tr>
                                             </tfoot>
                                    </table>
                                    <!--JavaScript se ayega data-->

                                    <div class="referenceRequestError" style="text-align: center; font-size: 18px; font-weight: bold;">
                                        <!--No Request Recived-->
                                    </div>


                                </div>

Answer 3

I don't recomend using that library for that exact reason. I've been working for a couple of weeks trying to use it in a project and the lack of documentation has made it almost impossible to use.

With that being said here is a relativly simple example. This uses the Angular2 Quickstart as a base and all I did was add angular2-data-table via npm. You'll need to grab the company.json from Github and place it in the root of your project.

package.json

{
  "name": "liw-reports",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
    "lite": "lite-server",
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },
  "licenses": [
    {
      "type": "MIT"
    }
  ],
  "dependencies": {
    "@angular/common": "~2.1.2",
    "@angular/compiler": "~2.1.2",
    "@angular/core": "~2.1.2",
    "@angular/forms": "~2.1.2",
    "@angular/http": "~2.1.2",
    "@angular/platform-browser": "~2.1.2",
    "@angular/platform-browser-dynamic": "~2.1.2",
    "@angular/router": "~3.1.2",
    "@angular/upgrade": "~2.1.2",
    "angular2-data-table": "^1.4.1",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.41",
    "zone.js": "^0.6.26"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.7",
    "@types/node": "^6.0.46",
    "concurrently": "^3.1.0",
    "lite-server": "^2.2.2",
    "typescript": "^2.0.9"
  }
}

systemjs.config.js

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'app',
            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
            'angular2-data-table': 'npm:angular2-data-table/release/index.js',
            // other libraries
            'rxjs': 'npm:rxjs',
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            }
        }
    });
})(this);

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Angular2DataTableModule } from 'angular2-data-table';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, Angular2DataTableModule],
    bootstrap: [AppComponent]
})
export class AppModule {}

app.component.ts

import {
    Component
} from '@angular/core';


@Component({
    moduleId: module.id,
    selector: 'my-app',
    template: `
    <div>
      <h3>Fluid Row Heights</h3>
      <datatable
        class="material"
        [rows]="rows"
        [columns]="columns"
        [columnMode]="'force'"
        [headerHeight]="50"
        [footerHeight]="50"
        [rowHeight]="'auto'">
      </datatable>
    </div>
  `
})
export class AppComponent {

    rows = [];

    columns = [{
        prop: 'name'
    }, {
        name: 'Gender'
    }, {
        name: 'Company'
    }];

    constructor() {
        this.fetch((data) => {
            this.rows = data;
        });
    }

    fetch(cb) {
        const req = new XMLHttpRequest();
        req.open('GET', `./company.json`);
        req.onload = () => {
            cb(JSON.parse(req.response));
        };
        req.send();
    }

}

index.html

<html>

<head>
    <title>Angular QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="/node_modules/angular2-data-table/release/datatable.css" />
    <link rel="stylesheet" type="text/css" href="/node_modules/angular2-data-table/release/material.css" />
    <link rel="stylesheet" href="styles.css">
    <!-- 1. Load libraries -->
    <!-- Polyfill for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
        System.import('app').catch(function(err) {
            console.error(err);
        });
    </script>
</head>
<!-- 3. Display the application -->

<body>
    <my-app>Loading...</my-app>
</body>

</html>