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.

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”
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 ?
Check this updated:
https://therichpost.com/how-to-implement-datatable-with-print-excel-csv-buttons-in-angular-10/
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)
Check this updated:
https://therichpost.com/how-to-implement-datatable-with-print-excel-csv-buttons-in-angular-10/
this is not working
can you please tell me your error?
Check this updated:
https://therichpost.com/how-to-implement-datatable-with-print-excel-csv-buttons-in-angular-10/
it is not showing any change in table
data is showing but content is not responding
are you solve it .if you solve it plz help me .i got also same error
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.
Hi Ajay, I am fetching the data’s from database so how to handle public data[]; on component.ts
Regards
selva
https://therichpost.com/angular-11-datatable-with-dynamic-data/
datatable working but search input and sorting is not showing
Please check this basic example:
https://therichpost.com/how-to-implement-datatable-with-print-excel-csv-buttons-in-angular-10/
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. ;(;(;(;(;(;(
Please check this:
https://therichpost.com/angular-11-datatable-with-dynamic-data/
do you have an working example for angular 11 datatable columns filter ? Thanks
Yes.
Please share the link where can I check it. Thank you.