Angular 8 Datatable Working Example

·

, ,
Angular 9, Angular 10

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

Angular 8 has just launched and it is in very high in demand. Angular 8 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 and don’t forget to install latest node version.

Angular 7 Datatables Working Example
Angular 8 Datatable Working Example

Here is the complete working code and use this carefully:

1. Here are the basics commands, you need to run for latest angular 8 setup and environment:

$ npm install -g @angular/cli

$ ng new angulardatatables

$ cd angulardatatables

$ ng serve

//Here is the url, you need to run into your browser and see working angular test project
http://localhost:4200/

2. Here are the basics commands, you need to run into your terminal for datatable and its dependencies:

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. After done with commands add below code into you 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 below code into your 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>

Don’t forget to run ng serve command to see final output.

Jassa Jatt

Thank you

Comments

50 responses to “Angular 8 Datatable Working Example”

  1. Julien Pitt Avatar
    Julien Pitt

    Thank you for the post 🙂

  2. Jasmeen Avatar
    Jasmeen

    Very helpful, thank you 🙂

  3. Luciano Avatar
    Luciano

    How to translate the texts to Portuguese? Thank you.

  4. Ajay Malhotra Avatar

    You can use google translate or you want datatable only?

  5. Gagandeep Singh Avatar
    Gagandeep Singh

    Thanks for the post!!
    Are these Datatable fully responsive ?

  6. Shalini Biradar Avatar
    Shalini Biradar

    No filters controls are working for me.Sorting,searching etc.It is just displaying data.Can you please help me regarding this.

  7. Ajay Malhotra Avatar

    Yes sure….did you use above code perfectly?

  8. chandu Avatar
    chandu

    Thank you so much..it helped me a lot.

  9. Ajay Malhotra Avatar

    you are most welcome

  10. arpit Avatar
    arpit

    can you please tell me how to add check box and select all check box and single check and deselectall on header unchek

  11. Ajay Malhotra Avatar

    Yes, you can do with custom code tricks.

  12. kiruthiga Avatar
    kiruthiga

    thank you so much its working fine…can you please explain about nested datatable so that it will be helpful for all

  13. Ajay Malhotra Avatar

    Welcome and I will share that post also.

  14. Bhargav Narne Avatar
    Bhargav Narne

    Can’t bind to ‘dtOptions’ since it isn’t a known property of ‘table’.
    Property ‘dtOptions’ does not exist on type ‘AppComponent’.
    I am getting these errors

    Can you help me

  15. arpit Avatar
    arpit

    SIR WANT TO RELAOD THE DATA AFTER DELETE OR UPDATE WITHOUT PAGE RELOAD M NOT USIN AJAX

    this.dtOptions = {
    pagingType: ‘full_numbers’,
    pageLength: 10,
    dom: ‘Bfrtip’,
    select: true,
    rowSelection:”multiple”,
    // Configure the buttons
    buttons: [

    ‘pdf’,
    ‘print’,
    ‘excel’]
    };

    this.outmailService.deleteEntry(this.mailId).subscribe((
    result)=>(result) => {
    console.log(‘result===>’, result)
    this.ngxService.startLoader(‘loader-01’);
    if (result.status == 1) {
    WANT TO RELAOD
    }

    2ND PROBLEM M FACING OF MULTISLECT LIKE SELECT ALL OR DESLECT ALL PLZ HELP

  16. Ajay Malhotra Avatar

    Hi, no need to use ajax, we just need to hit API call only.

  17. Ajay Malhotra Avatar

    Did you install all the modules?

  18. arpit Avatar
    arpit

    when i hit api again then pagination is not working m stuck please help

  19. Ajay Malhotra Avatar

    Because you need reinitialize datatable again.

  20. arpit Avatar
    arpit

    i tried it like
    rerender() {
    this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
    // Destroy the table first
    dtInstance.destroy();
    console.log(‘rer’)
    // Call the dtTrigger to rerender again
    this.dtTrigger.next();
    });
    }

    and when i user dt triger in table (hml) then css will get effected

  21. Ajay Malhotra Avatar

    I think, you are using wrong logic.

  22. arpit Avatar
    arpit

    plz correct me should I paste code here

  23. Ajay Malhotra Avatar

    email complete me on therichposts@gmailcom.

  24. arpit Avatar
    arpit

    sir i mailed u please check and reply

  25. arpit Avatar
    arpit

    and please it req if u can reply quickly i need it on urgent base thx in advance

  26. Akshay Dhage Avatar
    Akshay Dhage

    Hi can get source code??

  27. Ajay Malhotra Avatar

    Source Code for what?

  28. Mayur Avatar
    Mayur

    Hi, I am using this code. It applies, but data is coming late and it does show “No data available in table” and above this it is showing data. And also if I search or filter then it removes all those data and shows empty table. Please help.

  29. Ajay Malhotra Avatar

    Hi Mayur check below link, in this I am getting dynamic data in data-table:
    https://therichpost.com/angular-10-datatable-with-firebase/

  30. Mayur Avatar
    Mayur

    Thank you so much for the quick reply. Really appreciated. And code worked.

  31. Ajay Malhotra Avatar

    You are welcome 🙂

  32. Prashanth Naidu Avatar
    Prashanth Naidu

    ThankYou so much Sir !
    its Very Helpful

  33. Ajay Malhotra Avatar

    You are welcome Prashanth 🙂

  34. Madhan Kumar Avatar
    Madhan Kumar

    searching,pagination,sorting not working sir. Can you please help me regarding this.

  35. Ajay Malhotra Avatar

    Can you send me error please?

  36. Madhan Kumar Avatar
    Madhan Kumar

    sir i mailed you..please check

  37. Ajay Malhotra Avatar

    Okay I will check it.

  38. swathi Avatar
    swathi

    “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”,
    ]

  39. swathi Avatar
    swathi

    Expected a JSON object, array or literal.

  40. Dinesh L Avatar
    Dinesh L

    For me to… Just leading table as it… Sort , Pagination searching not working

  41. Justin Avatar
    Justin

    Hi ,
    Sorting is not working for me. Angular -8

  42. loma Avatar
    loma

    very nice

  43. ankit Avatar
    ankit

    hello ajay
    i have used jquery datatable and it has pagelength 10 but when i add new data data it will show all data in table when we add new data

  44. Ajay Malhotra Avatar

    Yes you are correct.