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: "[email protected]", age: "50" },
    { name: "Jojo", email: "[email protected]", age: "15" },
    { name: "Andre", email: "[email protected]", age: "85" },
    { name: "Simpson", email: "[email protected]", age: "45" },
    { name: "Doly", email: "[email protected]", age: "40" },
    { name: "Bintang", email: "[email protected]", age: "36" },
    { name: "Aria", email: "[email protected]", age: "74" },
    { name: "Sams", email: "[email protected]", age: "8" },
    { name: "Oly", email: "[email protected]", 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: stackoverflow.com/questions/30955449/… — Zombie
– Zombie, Commented Jun 19, 2018 at 9:57
you didn't install rxjs package First install using this command npm install rxjs — Sanoj_V
– Sanoj_V, Commented Jun 19, 2018 at 10:19

mintquan · Accepted Answer · 2018-06-19 10:10:24Z

0

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

answered Jun 19, 2018 at 10:10

mintquan

1573 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

GonnaHack Over a year ago

yeah imported data table

Sanoj_V · Accepted Answer · 2018-06-19 10:28:06Z

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, 2018 at 10:28

Sanoj_V

2,9961 gold badge14 silver badges33 bronze badges

5 Comments

Sanoj_V Over a year ago

have you installed rxjs and rxjs-compat package

Sanoj_V Over a year ago

@Rammohan Bandaru can you post your package.json

GonnaHack Over a year ago

I have Update my question please check it

Sanoj_V Over a year ago

try to install npm install rxjs-compat and check it??

Sanoj_V Over a year ago

delete node_module folder and install again using this command npm install

Karnan Muthukumar · Accepted Answer · 2018-06-20 10:08:38Z

0

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

Typescript file,

private obj: any =[
    { name: "Sinta", email: "[email protected]", age: "50" },
    { name: "Jojo", email: "[email protected]", age: "15" },
    { name: "Andre", email: "[email protected]", age: "85" },
    { name: "Simpson", email: "[email protected]", age: "45" },
    { name: "Doly", email: "[email protected]", age: "40" },
    { name: "Bintang", email: "[email protected]", age: "36" },
    { name: "Aria", email: "[email protected]", age: "74" },
    { name: "Sams", email: "[email protected]", age: "8" },
    { name: "Oly", email: "[email protected]", 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.

edited Jun 20, 2018 at 10:08

answered Jun 20, 2018 at 10:02

Karnan Muthukumar

1,8731 gold badge10 silver badges16 bronze badges

8 Comments

GonnaHack Over a year ago

Could you please provide code in online angular compiler like stackblitz.com or plikr... please

Karnan Muthukumar Over a year ago

sure please wait few min

GonnaHack Over a year ago

I got it.. it is working fine. how we can perform search based on input.?

Karnan Muthukumar Over a year ago

did you mean search filter for name or what?

GonnaHack Over a year ago

I need search filter

|

Collectives™ on Stack Overflow

Data table in angular js is not working

3 Answers 3

1 Comment

5 Comments

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related