Data table in angular js is not working

Question

I'm creating DataTable in angular js by using following steps

install angular2-datatable from npm

npm i -S angular2-datatable

edit app.module.ts and import the following code

import { DataTableModule } from "angular2-datatable";

Open the app.component.ts file and add the following script

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-daftar-user',
  templateUrl: './daftar-user.component.html',
  styleUrls: ['./daftar-user.component.css'],
})
export class DaftarUserComponent implements OnInit {
  obj: any = new Array({ name: "Sinta", email: "sinta@gmail.com", age: "50" },
    { name: "Jojo", email: "Jojo@gmail.com", age: "15" },
    { name: "Andre", email: "Andre@gmail.com", age: "85" },
    { name: "Simpson", email: "Simpson@gmail.com", age: "45" },
    { name: "Doly", email: "Doly@gmail.com", age: "40" },
    { name: "Bintang", email: "Bintang@gmail.com", age: "36" },
    { name: "Aria", email: "Aria@gmail.com", age: "74" },
    { name: "Sams", email: "Sams@gmail.com", age: "8" },
    { name: "Oly", email: "Oly@gmail.com", age: "12" });
  userlist: any;
  constructor() {
  }
  ngOnInit() {
    this.userlist = this.obj;
  }
}

open the app.component.html file and add the following script

<div class="row margintop20px paddingtopbottom15px whitebackground">
  <div class="col-xs-12">
    <div class="table-responsive">
      <table class="table table-striped table-hover table-bordered " [mfData]="userlist" #mf="mfDataTable" [mfRowsOnPage]="3">
        <thead>
          <tr>
            <th style="width:40px;max-width:40px;">#</th>
            <th style="width:60px;max-width:60px;"><mfDefaultSorter by="name">Name</mfDefaultSorter></th>
            <th><mfDefaultSorter by="email">Email</mfDefaultSorter></th>
            <th><mfDefaultSorter by="age">Age</mfDefaultSorter></th>
          </tr>
        </thead>
        <tbody>
            <tr *ngFor="let user of mf.data; let i = index;">
                <td scope="row">{{i+1}}</td>
                <td>{{user.name}}</td>
                <td>{{user.email}}</td>
                <td>{{user.age}}</td>
            </tr>
        </tbody>
        <tfoot>
          <tr>
              <td colspan="4">
                  <mfBootstrapPaginator ></mfBootstrapPaginator>
              </td>
          </tr>
          </tfoot>
      </table>
    </div>
  </div>
</div>

I have build a dataTable by using abve code. When I trying to run this code it showing below code

Failed to compile. ./node_modules/rxjs/_esm5/index.js Module build failed: Error: ENOENT: no such file or directory, open '\sample-ng-app\node_modules\rxjs_esm5\index.js'.

I'm not able to figure out the where I went wrong, could you give solution for this issue

EDIT Package.json

{
  "name": "sample-ng-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "angular2-datatable": "^0.6.0",
    "core-js": "^2.5.4",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^6.0.3",
    "@angular-devkit/build-angular": "~0.6.8",
    "typescript": "~2.7.2",
    "@angular/cli": "~6.0.8",
    "@angular/language-service": "^6.0.3",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1"
  }
}

take a look at this: https://stackoverflow.com/questions/30955449/datatable-bootstrap-is-not-working-with-angularjs — Zombie, Jun 19 '18 at 09:57
you didn't install `rxjs` package First install using this command `npm install rxjs` — Sanoj_V, Jun 19 '18 at 10:19

score 0 · Answer 1 · answered Jun 19 '18 at 10:10

0

Do you import to your @NgModul in app.module.ts?
@NgModule({ imports: [ ... DataTableModule ], ... })

answered Jun 19 '18 at 10:10

mintquan

157
3
16

yeah imported data table – GonnaHack Jun 19 '18 at 10:19

score 0 · Answer 2 · answered Jun 19 '18 at 10:28

0

Your code is working fine But you have to replace

*ngFor="let user of mf.data; let i = index;"

to

*ngFor="let user of userlist; let i = index;"

and here All is done.. angular2-datatable-Example

answered Jun 19 '18 at 10:28

Sanoj_V

2,936
1
12
28

have you installed `rxjs` and `rxjs-compat` package – Sanoj_V Jun 19 '18 at 10:36
@Rammohan Bandaru can you post your package.json – Sanoj_V Jun 19 '18 at 10:40
I have Update my question please check it – GonnaHack Jun 19 '18 at 10:49
try to install `npm install rxjs-compat` and check it?? – Sanoj_V Jun 19 '18 at 10:53
delete `node_module` folder and install again using this command `npm install` – Sanoj_V Jun 19 '18 at 11:10

Karnan Muthukumar · Answer 3 · 2018-06-20T10:08:38.450

I have tried your code not displaying data. So i made some changes from your code.

Typescript file,

private obj: any =[
    { name: "Sinta", email: "sinta@gmail.com", age: "50" },
    { name: "Jojo", email: "Jojo@gmail.com", age: "15" },
    { name: "Andre", email: "Andre@gmail.com", age: "85" },
    { name: "Simpson", email: "Simpson@gmail.com", age: "45" },
    { name: "Doly", email: "Doly@gmail.com", age: "40" },
    { name: "Bintang", email: "Bintang@gmail.com", age: "36" },
    { name: "Aria", email: "Aria@gmail.com", age: "74" },
    { name: "Sams", email: "Sams@gmail.com", age: "8" },
    { name: "Oly", email: "Oly@gmail.com", age: "12" }
  ];

private userlist: any[]=[];

constructor() {
    this.userlist=this.obj;
 }

Html File,

<div class="col-md-6">
  <table class="table table-striped" [mfData]="userlist" #mf="mfDataTable" [mfRowsOnPage]="5">
    <thead>
      <tr>
        <th style="width: 20%">
          <mfDefaultSorter by="name">Name</mfDefaultSorter>
        </th>
        <th style="width: 10%">
          <mfDefaultSorter by="email">Email</mfDefaultSorter>
        </th>
        <th style="width: 10%">
          <mfDefaultSorter by="age">Age</mfDefaultSorter>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let item of mf.data">
        <td>{{item.name}}</td>
        <td>{{item.email}}</td>
        <td>{{item.age}}</td>            
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="4">
          <mfBootstrapPaginator [rowsOnPageSet]="[5,10,25]"></mfBootstrapPaginator>
        </td>
      </tr>
    </tfoot>
  </table>
</div>

app.module.ts file

import {DataTableModule} from "angular2-datatable";

 imports: [
    DataTableModule
 ]

Installing via command

npm i -S angular2-datatable

Its working fine. Screenshot,

If any error please let me know.

Could you please provide code in online angular compiler like stackblitz.com or plikr... please — GonnaHack, Jun 20 '18 at 10:09
I got it.. it is working fine. how we can perform search based on input.? — GonnaHack, Jun 20 '18 at 10:23
could you please let me know how we can implement search filter — GonnaHack, Jun 20 '18 at 10:50
check this link 1) https://stackoverflow.com/questions/40678206/angular-2-filter-search-list — Karnan Muthukumar, Jun 20 '18 at 10:58
2)https://codeburst.io/create-a-search-pipe-to-dynamically-filter-results-with-angular-4-21fd3a5bec5c — Karnan Muthukumar, Jun 20 '18 at 10:59

Data table in angular js is not working

3 Answers3