Home Angular 8 Angular 8 Datatable Working Example

Angular 8 Datatable Working Example

by therichpost
Published: Last Updated on 50 comments
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

You may also like

50 comments

Julien Pitt December 2, 2019 - 11:01 am

Thank you for the post 🙂

Reply
Ajay Malhotra December 13, 2019 - 4:10 pm

Thank you

Reply
Jasmeen December 12, 2019 - 5:01 am

Very helpful, thank you 🙂

Reply
Ajay Malhotra December 13, 2019 - 4:10 pm

Thank you

Reply
Luciano December 19, 2019 - 1:33 pm

How to translate the texts to Portuguese? Thank you.

Reply
Ajay Malhotra December 19, 2019 - 4:11 pm

You can use google translate or you want datatable only?

Reply
Gagandeep Singh December 23, 2019 - 3:49 am

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

Reply
Ajay Malhotra December 23, 2019 - 5:28 pm

Yes, hope so.

Reply
Shalini Biradar March 2, 2020 - 2:25 am

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

Reply
Ajay Malhotra March 2, 2020 - 3:01 am

Yes sure….did you use above code perfectly?

Reply
Dinesh L February 3, 2021 - 8:32 am

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

Reply
chandu March 12, 2020 - 7:17 am

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

Reply
Ajay Malhotra March 12, 2020 - 7:31 am

you are most welcome

Reply
arpit March 14, 2020 - 1:43 pm

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

Reply
Ajay Malhotra March 14, 2020 - 3:43 pm

Yes, you can do with custom code tricks.

Reply
kiruthiga March 16, 2020 - 10:01 am

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

Reply
Ajay Malhotra March 16, 2020 - 4:18 pm

Welcome and I will share that post also.

Reply
Bhargav Narne March 20, 2020 - 5:40 pm

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

Reply
Ajay Malhotra March 21, 2020 - 4:08 pm

Did you install all the modules?

Reply
ankit October 11, 2021 - 2:37 pm

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

Reply
Ajay Malhotra October 12, 2021 - 4:11 am

Yes you are correct.

Reply
arpit March 21, 2020 - 4:12 am

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

Reply
Ajay Malhotra March 21, 2020 - 4:03 pm

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

Reply
arpit March 22, 2020 - 9:16 am

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

Reply
Ajay Malhotra March 22, 2020 - 9:18 am

Because you need reinitialize datatable again.

Reply
arpit March 22, 2020 - 11:07 am

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

Reply
Ajay Malhotra March 22, 2020 - 11:10 am

I think, you are using wrong logic.

Reply
arpit March 22, 2020 - 11:45 am

plz correct me should I paste code here

Reply
Ajay Malhotra March 23, 2020 - 4:49 am

email complete me on therichposts@gmailcom.

Reply
arpit March 26, 2020 - 11:25 am

sir i mailed u please check and reply

Reply
Ajay Malhotra March 26, 2020 - 11:29 am

Sure

Reply
arpit March 26, 2020 - 1:45 pm

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

Reply
Akshay Dhage July 11, 2020 - 6:09 pm

Hi can get source code??

Reply
Ajay Malhotra July 11, 2020 - 6:23 pm

Source Code for what?

Reply
Mayur August 13, 2020 - 11:24 am

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.

Reply
Ajay Malhotra August 13, 2020 - 11:27 am

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

Reply
Mayur August 13, 2020 - 11:37 am

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

Reply
Ajay Malhotra August 13, 2020 - 11:39 am

You are welcome 🙂

Reply
Prashanth Naidu August 18, 2020 - 9:01 am

ThankYou so much Sir !
its Very Helpful

Reply
Ajay Malhotra August 18, 2020 - 9:07 am

You are welcome Prashanth 🙂

Reply
Madhan Kumar October 1, 2020 - 4:44 am

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

Reply
Ajay Malhotra October 1, 2020 - 4:45 am

Can you send me error please?

Reply
Madhan Kumar October 1, 2020 - 7:02 am

sir i mailed you..please check

Reply
Ajay Malhotra October 1, 2020 - 7:58 am

Okay I will check it.

Reply
swathi December 30, 2020 - 7:45 am

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

Reply
swathi December 30, 2020 - 7:46 am

Expected a JSON object, array or literal.

Reply
Justin July 20, 2021 - 5:24 am

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

Reply
loma August 19, 2021 - 3:57 pm

very nice

Reply
Ajay Malhotra August 19, 2021 - 3:58 pm

Thanks.

Reply

Leave a Comment

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