How to use angular datatable

How to use angular datatable

In this article lets understand how to use angular datatable.

A third-party library called Angular DataTables connects Angular to the well-liked DataTables jQuery plugin. Sorting, searching, pagination, and other capabilities make it simple to display and interact with data in tabular form. By offering an effective solution to handle massive datasets and displaying them in a user-friendly fashion, DataTables improves the user experience.

Key features of Angular DataTables:

  1. Data Presentation
  2. Searching
  3. Pagination
  4. Filtering
  5. Styling and Theming
  6. Customization
  7. Responsiveness.

Lets follow step-by-step guide:

1) Install dependencies

First, we will need the required packages from npm. Run below command from terminal in the project directory :

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

We will need to add styles and script in our angular.json as below :

            "styles": [
              "src/styles.css",

              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/datatables.net-dt/css/jquery.dataTables.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js",

              "node_modules/bootstrap/dist/js/bootstrap.min.js",
              "node_modules/datatables.net/js/jquery.dataTables.js"
            ]

2) Import modules

Add required modules from above added libraries into app.modues.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DataTablesModule } from 'angular-datatables';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, DataTablesModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

3) Set datatable in component :

Next let’s set datatable html in our components html file.

<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table table-striped table-bordered">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let user of users">
      <td>{{ user.name }}</td>
      <td>{{ user.age }}</td>
      <td>{{ user.email }}</td>
    </tr>
  </tbody>
</table>

4) Configure datatable :

Now we will configure datatable in our components ts file as below.

import { Component, OnInit, ViewChild } from '@angular/core';
import { Subject } from 'rxjs';
import { DataTableDirective } from 'angular-datatables';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  @ViewChild(DataTableDirective, { static: false })
  private datatableElement: DataTableDirective;
  dtOptions: DataTables.Settings = {};
  dtTrigger: Subject<any> = new Subject<any>();
  users = [
    { name: 'Richard', age: 45, email: 'richard@example.com' },
    { name: 'Joey', age: 25, email: 'joey@example.com' },
  ];
  ngOnInit(): void {
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 10
      // You can add more options as needed
    };
    setTimeout(() => {
      this.dtTrigger.next(true);
    }, 0);
  }
  ngOnDestroy(): void {
    this.dtTrigger.unsubscribe();
  }
}

Datatable provides many options which we will see in our other blogs in detail.

You can set dynamic data from apis and reflect as above.

5) Result :

The above one will give result as below:

Angular datatable result

That’s it on how to use angular datatable. Hope this finds you helpful.

Read more articles on angular here.