[Angular][19] Menggunakan Datatable pada Angular (Basic/Bootstrap 3/ Bootstrap 4)

Wednesday, 13 Oct 2021 | By Riza

Image Load

Hello world, 

Datatables adalah salah satu plugin javascript yang cukup populer untuk membuat tabel yang mempunyai fungsi yang cukup banyak seperti pagination, filter, sorting, search dll. Sebelumnya saya sudah pernah membuat artikel tentang penggunaan datatable pada html dan untuk kali ini saya akan coba menjelaskan penggunaannya pada Angular. Meskipun bentuk dan fungsinya sama akan tetapi cara instalasi dan penggunaannya berbeda dari pada yang ada di javascript. 

Mari kita coba mulai dari tahap instalasi. Untuk instalasi pada proyek angular kita cukup menjalankan script berikut untuk menambahkan plugin datatable pada proyek kita.

ng add angular-datatables

Setelah dijalankan akan dimunculkan pilihan style yang ingin kita gunakan. Pilihan yang tersedia yaitu default/bootstrap 3/bootstrap 4. Kalian bisa memilih dengan menggunakan tombol atas atau bawah dan klik enter sesuai style yang ingin kalian gunakan. kemudian script akan berjalan kembali.


Seletah selesai kalian bisa cek file angular.json. Pastikan file js datatable sudah masuk ke dalamnya seperti contoh berikut.



"projects": {
    "your-app-name": {
      "architect": {
        "build": {
          "options": {
            "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"
            ],
            ...
          }
}

Kemudian cek juga pada app.module.ts. Pastikan datatable sudah terinport ke dalamnya. Jika belum maka sialakan tambahkan secara manual.

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],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}


Padaa tahap ini datatable sudah bisa digunakan dengan cara memanggil pada tabel kita seperti berikut.


<table datatable class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>



Selamat Mencoba :)