Angular 10 Datatable Working Example

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

Angular 10 has just launched and it is in very high in demand. Angular 10 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 10 Datatables
Angular 10 Datatables

Here is the complete working code and use this carefully:

1. Here are the basics commands, you need to run for latest angular 10 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:

I am also adding bootstrap to make datatable looks good

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 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 {DataTablesModule} from 'angular-datatables';
...
imports: [
...
DataTablesModule
]

 

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

...
export class AppComponent {
...
public data = [
    {name: 'Ajay', email: 'therichpost@gmail.com', website:'therichpost.com'},
    {name: 'Jas', 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: 'Jas', 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: 'Jas', 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'},
  ];
dtOptions: any = {};
ngOnInit(){
setTimeout(()=>{  
  this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 5,
    lengthMenu : [5, 10, 25],
      processing: true
    };
}, 100);
}
}

 

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 and if you have any kind of query the please do comment below.

Jassa Jatt

Thank you

Comments

20 responses to “Angular 10 Datatable Working Example”

  1. Soheib Ouadfel Avatar
    Soheib Ouadfel

    Hi , I applied the code you added in this post, but I had this error:
    ERROR TypeError: Cannot read property ‘aDataSort’ of undefined
    So the result I got wasn’t a dataTable.
    can you help please ?

  2. sach Avatar
    sach

    Im getting this error:

    zone.js:192 Uncaught TypeError: Cannot read property ‘checked’ of null
    at bootstrap.js:546
    at dispatch (jquery.js:5429)
    at elemData.handle (jquery.js:5233)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:503)
    at invokeTask (zone.js:1671)
    at globalZoneAwareCallback (zone.js:1708)

  3. nithin Avatar
    nithin

    this is not working

  4. Ajay Malhotra Avatar

    can you please tell me your error?

  5. nithin Avatar
    nithin

    it is not showing any change in table

  6. nithin Avatar
    nithin

    data is showing but content is not responding

  7. chandu Avatar
    chandu

    are you solve it .if you solve it plz help me .i got also same error

  8. Oscar Avatar
    Oscar

    Hi, I have the following error:
    ” Can’t bind to ‘dtOptions’ since it isn’t a known property of ‘table’ “.

    The import in app.module.ts is done.

  9. Selva Avatar
    Selva

    Hi Ajay, I am fetching the data’s from database so how to handle public data[]; on component.ts

    Regards
    selva

  10. Hamza Avatar
    Hamza

    datatable working but search input and sorting is not showing

  11. adame Avatar
    adame

    hi good day, my datatable is not working, the data is shown from my database but the “Showing 0 to 0 of 0 entries” and the pagination number is also 0 and when i try to search the data form the tables will be gone. please how can i solve this. ;(;(;(;(;(;(

  12. Rajasekar M Avatar
    Rajasekar M

    do you have an working example for angular 11 datatable columns filter ? Thanks

  13. Rajasekar M Avatar
    Rajasekar M

    Please share the link where can I check it. Thank you.