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.

    1. Ajay Malhotra Avatar

      You can use google translate or you want datatable only?

  4. Gagandeep Singh Avatar
    Gagandeep Singh

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

  5. 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.

    1. Ajay Malhotra Avatar

      Yes sure….did you use above code perfectly?

      1. Dinesh L Avatar
        Dinesh L

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

  6. chandu Avatar
    chandu

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

    1. Ajay Malhotra Avatar

      you are most welcome

  7. 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

    1. Ajay Malhotra Avatar

      Yes, you can do with custom code tricks.

  8. 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

    1. Ajay Malhotra Avatar

      Welcome and I will share that post also.

  9. 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

    1. Ajay Malhotra Avatar

      Did you install all the modules?

      1. 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

        1. Ajay Malhotra Avatar

          Yes you are correct.

  10. 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

    1. Ajay Malhotra Avatar

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

      1. arpit Avatar
        arpit

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

        1. Ajay Malhotra Avatar

          Because you need reinitialize datatable again.

  11. 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

    1. Ajay Malhotra Avatar

      I think, you are using wrong logic.

      1. arpit Avatar
        arpit

        plz correct me should I paste code here

        1. Ajay Malhotra Avatar

          email complete me on therichposts@gmailcom.

  12. arpit Avatar
    arpit

    sir i mailed u please check and reply

  13. arpit Avatar
    arpit

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

  14. Akshay Dhage Avatar
    Akshay Dhage

    Hi can get source code??

    1. Ajay Malhotra Avatar

      Source Code for what?

  15. 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.

    1. 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/

  16. Mayur Avatar
    Mayur

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

    1. Ajay Malhotra Avatar

      You are welcome 🙂

  17. Prashanth Naidu Avatar
    Prashanth Naidu

    ThankYou so much Sir !
    its Very Helpful

    1. Ajay Malhotra Avatar

      You are welcome Prashanth 🙂

  18. Madhan Kumar Avatar
    Madhan Kumar

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

    1. Ajay Malhotra Avatar

      Can you send me error please?

      1. Madhan Kumar Avatar
        Madhan Kumar

        sir i mailed you..please check

        1. Ajay Malhotra Avatar

          Okay I will check it.

  19. 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”,
    ]

  20. swathi Avatar
    swathi

    Expected a JSON object, array or literal.

  21. Justin Avatar
    Justin

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

  22. loma Avatar
    loma

    very nice

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.