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

score 2 · Answer 1 · answered Nov 15 '16 at 15:16

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>

thanks Shawn yeah there seems to be documentation but its confusing at best. — CommonSenseCode, Nov 15 '16 at 20:06
Confusing is an understatement. The naming stuff is incredibly STUPID. Half the time you are reading something only to realize its angular1 not angular2. There seem to be many implementations of data table and half the time its unclear what goes with what. By the time you figure it out its all obsolete and you need to do it over again before you finish it. Most frustrating, the pictured demos are just that, useless pictures. What good is that ? How really difficult would it be just to put a link on the page, so If I spot something I like I can quickly easily figure out how to do it???? — DanPride, Mar 01 '17 at 23:04

score 0 · Answer 2 · answered Jun 06 '17 at 13:14

0

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.

answered Jun 06 '17 at 13:14

Xquick

637
1
8
20

score 0 · Answer 3 · edited Jul 20 '21 at 16:13

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",
            "joiningdate": "/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",
            "joiningdate": "/Date(-62135596800000)/",
            "address": "kachhawayamehul@gmail.com",
            "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",
            "joiningdate": "/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",
            "joiningdate": "/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",
            "joiningdate": "/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>

How to use angular2-data-table

3 Answers3

Linked