Angular 7 Datatables Working Example

·

,
angular7

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 7 Datatables Working Example.

Angular 7 has just launched and it is in very high in demand. Angular 7 increased his performance speed.

I am showing the data in Datatables with custom json data and also for giving good look to datatable, I have used bootstrap in it, here is the working picture:

 

Angular 7 Datatables Working Example

 

I will hope that, this will help you in rendering json data in datatables.

Here are the working steps, you need to follow:

 

1. Very first, you need to run below commands to set  your Angular 7 application:

 

$ npm install -g @angular/cli 
$ ng new angulardatatables
$ cd angulardatatables
$ ng serve
http://localhost:4200/

2. After, it run below commands to add datatable and bootstrap into Angular Application:

 

npm install jquery --save
npm install datatables.net --save
npm install datatables.net-dt --save
npm install angular-datatables --save
npm install @types/jquery --save-dev
npm install @types/datatables.net --save-dev
$ npm install ngx-bootstrap bootstrap --save

3. Now add below code into your angular.json file:

 

...
"styles": [
              "src/styles.css",
              "node_modules/datatables.net-dt/css/jquery.dataTables.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
            ],
            "scripts": [
            "node_modules/jquery/dist/jquery.js",
            "node_modules/datatables.net/js/jquery.dataTables.js",
            "node_modules/bootstrap/dist/js/bootstrap.js",
            ]
...

4. Now add code into app.module.ts file:

 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {DataTablesModule} from 'angular-datatables';
import { AppComponent } from './app.component';

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

5. Now add below code into app.component.ts file:

 

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public data = [
    {name: 'therichpost', email: 'therichpost@gmail.com', website:'therichpost.com'},
    {name: 'therichpost', email: 'therichpost@gmail.com', website:'therichpost.com'},
    {name: 'therichpost', email: 'therichpost@gmail.com', website:'therichpost.com'},
    {name: 'therichpost', email: 'therichpost@gmail.com', website:'therichpost.com'},
];

  title = 'angulardatatables';
  dtOptions: DataTables.Settings = {};
  ngOnInit() {
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 5,
      processing: true
    };
}
}

6. Now add below code into app.component.html file:

 

<table class="table table-striped table-bordered table-sm row-border hover" datatable [dtOptions]="dtOptions">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Website</th>
    </tr>
  </thead>
  <tbody>
   <tr *ngFor="let group of data">
         <td>{{group.name}}</td>
         <td>{{group.email}}</td>
         <td>{{group.website}}</td>
     </tr>
  </tbody>
</table>

If you have any query related to this post, then please do comment below or asl question.

Thank you,

jatt budhi,

Therichpost

 

 

Comments

28 responses to “Angular 7 Datatables Working Example”

  1. Jasmeen Avatar
    Jasmeen

    Hello, can you please share the code for laravel data In angular 7 datatables?
    Thank you

  2. sam Avatar
    sam

    Thank you for this post.

  3. dipti Avatar
    dipti

    i did everything same to same but its not working for me still showing no data available in data table.
    can you post the solution.

  4. Ajay Malhotra Avatar
  5. Ajay Malhotra Avatar

    Hi, dipti, can you show me the error?

  6. daniel Avatar
    daniel

    Thank you for your help.

    Your article helped me.

    But I have one problem.

    I can’t sort data in this dataTable.

    Can you help me again?

  7. Ajay Malhotra Avatar

    Ok daniel, I will help you.

  8. siddu Avatar
    siddu

    hi ajay,can you tell me how to implement custom search for individual column

  9. Ajay Malhotra Avatar

    Custom search for each column, can you please show me any reference link or design?

  10. jhon masco Avatar
    jhon masco

    hello , i did something similar but manually, i mean , i put the js and css files in the folder by myself , and add these in angular.json file. If i tested it with a table static (with data put by myself) is working perfect with all the functionalities. But if i write the data dinamically from a rest api the datatable work inapropiately, i mean , datatable format the table very well but the funtionalities (filter, pagination etc) doesnt work , and the end of the rows data appear “no data available ” . but the data is in. It seem that datatable apply the configuration to the table before the data in writed and for that reason it think that no data is available.
    I hope you understand my issues, my english is not good at all. How i can solve that.
    Thanks

    PD: i tried doint the same procces explained in you tutorial but the same problem happends.

  11. Ajay Malhotra Avatar

    I got it, you want API data?

  12. jhon masco Avatar
    jhon masco

    I am consuming my own api, and work fine, the data is showed in the table but… the datatable dont recognize the data in the funtionalities. If i press sorting or search any word, it show me nothing, becasue for it no data is available . pity i can not share a screen capture here.
    My table show the data but in the last row say ” no data available in data table” , for that reason i suspect it applying the datatable funtionalities before the data is loaded in the component (table).
    Thanks

  13. Julien Pitt Avatar
    Julien Pitt

    Great.

  14. Brad Lupstick Avatar
    Brad Lupstick

    Very helpful..thank you

  15. Rahulsata Avatar
    Rahulsata

    I also have same issue. If you solved till now… Please give me solution.

  16. Prateet Kumar Avatar
    Prateet Kumar

    I want to put (showing 1 to 5 of 60 entries) next to (showing [10] entries), and I want to style the table as per my need
    Like gap between the tr. how can I do this

  17. Ajay Malhotra Avatar

    I will share video tutorial link on my blog and you can get from my youtube channel: therichpost

  18. Prateet Kumar Avatar
    Prateet Kumar

    I didn’t get the link

  19. Ajay Malhotra Avatar

    Hi, I will update it today and please subscribe my channel for updates.

  20. Prateet kumar Avatar
    Prateet kumar

    When I run connect my datatable to my server, it comes no data available

    ABCD S 9994388579 area1 dummy.png court1 Bangluru,Karnataka
    Sajai S 9994388579 area2 dummy.png court2 Bangluru,Karnataka
    No data available in table

    aand when I search the data all the data goes off.

  21. Ajay Malhotra Avatar

    I know this and this is because data comes little bit late and datatable init bit faster.

    DID you check my youtube video for this?

  22. Prateet kumar Avatar
    Prateet kumar

    yes i checked your youtube video but i coudnt get it and i am doing this datatable in angular 7

  23. Manuel Jamher Avatar
    Manuel Jamher

    If someone has a dependency when installing, do not forget to use the option
    npm install angular-datatables –save –legacy-peer-deps
    if you have trouble viewing the pagination options make sure you have the following structure

    {{cabbage}}

    {{user [col]}}

  24. Manuel Jamher Avatar
    Manuel Jamher

    If someone has a dependency when installing, do not forget to use the option
    npm install angular-datatables –save –legacy-peer-deps
    if you have trouble viewing the pagination options make sure you have the following structure

    [table class = “table table-striped table-bordered table-sm row-border hover” datatable [dtOptions] = “dtOptions”]
    [ thead]
    [tr]
    [th * ngFor = “let col of columns”]
    {{col}}
    [/th]

    [/tr]
    [/thead]
    [tbody]
    [tr * ngFor = “let user of users”]
    [td * ngFor = “let col of index”]
    {{user [col]}}
    [/td]
    [/tr]
    [/tbody]
    [/table]