Simple Angular 5 DataTable Example + Tutorial [Angular 2/4/5 Compatible]

1

After knowing how to install Angular 5, this tutorial is made to create a simple Angular 5 DataTable example.

This Angular 5 DataTable Tutorial is written to help the people to easily integrate the DataTable with their Angular 5 application.

DataTable is one of the popular components to render or plot the data in grid effortlessly.

So, let’s get started with a simple Angular 5 DataTable example.

Getting Started – Angular 5 DataTable Example

We’re going to create a simple Angular 5 app then I’ll showcase the use of DataTable with our Angular 4/5 app throughout this tutorial.

Kindly note that this tutorial is written by considering the static data but you can also make it working with the dynamic data.

So, let’s get started by installing an Angular 5 app.

Install Angular 5 App

Here, we’re going to use Angular CLI to install and setup an Angular 5 app.

Let’s install the Angular CLI with version 1.5.3.

npm install -g @angular/cli@1.5.3

Related,

Here, if you’re facing any issues, you can visit Angular CLI document to remove and update the new Angular CLI version.

Now, let’s create an app with below command.

ng new angular5-datatable

Install DataTable In Our Angular App

Firstly, we need to install the dependencies required for DataTable.

So, let’s do that for jQuery.

npm install jquery --save

Now, install the datatables.

npm install datatables.net --save
npm install datatables.net-dt --save

Now, install the angular datatables.

npm install angular-datatables --save

Here, are few more.

npm install @types/jquery --save-dev
npm install @types/datatables.net --save-dev

Secondly, we’ve to import the jQuery and DataTable JS/CSS in our app.

Here, you just need to add necessary CSS and Js in angular-cli.json to make it used in our app.

angular-cli.json

{
  "apps": [
    {
      ...
      "styles": [
        "../node_modules/datatables.net-dt/css/jquery.dataTables.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/datatables.net/js/jquery.dataTables.js"
      ],
      ...
    }
  ]
}

Finally, we need to import the DataTableModule in our main module to make it available for all the components and allow them to start using DataTable.

/src/app/app.module.ts

//Import core
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
//Import DataTable
import { DataTablesModule } from 'angular-datatables';
//Import App component
import { AppComponent } from './app.component';

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

Now, we’re all set to use DataTable in our Angular 5 app.

Demonstration of Angular 5 DataTable Example

So, we’re ready to use DataTable in our component and populate the data on it.

There’s is nothing major changes need to be done in component.

/src/app/app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular 5 DataTable Tutorial';
}

Now, you just need to give the datatable attribute to your table and everything will be automatically handled.

/src/app/app.component.html

<div class="container">
<table datatable class="row-border hover">
  <thead>
    <tr>
      <th>ID</th>
      <th>First name</th>
      <th>Last name</th>
    </tr>
  </thead>
  <tbody>
   <tr>
      <td>1</td>
      <td>Foo</td>
      <td>Bar</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Someone</td>
      <td>Youknow</td>
    </tr>
  </tbody>
</table>
</div>

That’s it, you’re ready with your Angular 5 DataTable example.

At the end, just run your app.

ng serve

And open it at http://localhost:4200 in browser window.

Angular 5 DataTable Example + Tutorial

Basic DataTable Options

Now, if you wanna use options you can provide dtOptions attribute to your table and configurations should be mentioned in the component.

/src/app/app.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Angular 5 DataTable Example';

  dtOptions: DataTables.Settings = {};

  ngOnInit(): void {
    this.dtOptions = {
      	pagingType: 'full_numbers',
      	pageLength: 5,
      	paging: false,
        scrollY: '300'
    };
  }
}

/src/app/app.component.html

<div class="container">
<table datatable [dtOptions]="dtOptions" class="row-border hover">
  <thead>
    <tr>
      <th>ID</th>
      <th>First name</th>
      <th>Last name</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
</div>

Here, you’ve options to apply to data table that you generally do with your traditional data tables.

ParameterType
pagingTypeString (i.e. 'full_numbers')
pageLengthNumber
pagingBoolean (True/False)
scrollYString
orderingBoolean (True/False)

Also, you can find the official available datatable options over here.

Moreover, I hope this Angular 5 DataTable Tutorial helped you to start using DataTables in your Angular 5 apps. Feel free to share your questions by commenting below.

Final words, don’t forget to share it with your friends on below social media.

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Steve Paris Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Steve Paris
Guest
Steve Paris

Wanted to thank you! This is the shortest, clearest explanation of how to use DataTables in Angular 5 (and 6). I’m new to Angular (and to DataTables) and need to create an app which connects various fields to a PostgreSQL database + has drop-down choices for various columns. At least I now have a good framework to start with. Again, thank you so much!