Membuat Tabel Interaktif Menggunakan Javascript: Panduan Lengkap Dengan Contoh dan Kode Program

Daftar Isi

Pada artikel kali ini, kita akan membahas cara membuat tabel interaktif menggunakan javascript. Tabel interaktif adalah sebuah tabel yang memungkinkan pengguna untuk berinteraksi dengan data pada tabel tersebut. Contohnya, pengguna dapat mengurutkan data, mencari data, atau menampilkan data dengan filter tertentu. Dalam membuat tabel interaktif, kita akan menggunakan bahasa pemrograman javascript. Berikut adalah contoh cara membuat tabel interaktif menggunakan javascript.

Mengumpulkan Data

Langkah pertama dalam membuat tabel interaktif adalah dengan mengumpulkan data. Data ini dapat berasal dari berbagai sumber, seperti database, file Excel, atau API. Untuk contoh kali ini, kita akan menggunakan data dalam format JSON.

Membuat Tabel HTML

Setelah data terkumpul, langkah selanjutnya adalah membuat tabel HTML. Kita dapat menggunakan tag <table> untuk membuat tabel. Setiap baris dalam tabel akan direpresentasikan oleh tag <tr>, sedangkan setiap kolom akan direpresentasikan oleh tag <td>. Berikut adalah contoh kode HTML untuk membuat tabel.

html

<table id="myTable">

  <thead>

    <tr>

      <th>Nama</th>

      <th>Usia</th>

      <th>Alamat</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>Andi</td>

      <td>25</td>

      <td>Jakarta</td>

    </tr>

    <tr>

      <td>Budi</td>

      <td>30</td>

      <td>Bandung</td>

    </tr>

    <tr>

      <td>Charlie</td>

      <td>35</td>

      <td>Surabaya</td>

    </tr>

  </tbody>

</table>

Memasukkan Data ke dalam Tabel

Setelah tabel HTML dibuat, langkah selanjutnya adalah memasukkan data ke dalam tabel tersebut. Kita dapat menggunakan javascript untuk memasukkan data ke dalam tabel. Berikut adalah contoh kode javascript untuk memasukkan data ke dalam tabel.

javascript

var data = [

  {nama: 'Andi', usia: 25, alamat: 'Jakarta'},

  {nama: 'Budi', usia: 30, alamat: 'Bandung'},

  {nama: 'Charlie', usia: 35, alamat: 'Surabaya'}

];

var table = document.getElementById('myTable');

for(var i = 0; i < data.length; i++) {

  var row = table.insertRow(i + 1);

  var cell1 = row.insertCell(0);

  var cell2 = row.insertCell(1);

  var cell3 = row.insertCell(2);

  cell1.innerHTML = data[i].nama;

  cell2.innerHTML = data[i].usia;

  cell3.innerHTML = data[i].alamat;

}

Menambahkan Fitur Interaktif

Setelah data dimasukkan ke dalam tabel, langkah selanjutnya adalah menambahkan fitur interaktif pada tabel tersebut. Fitur interaktif yang dapat ditambahkan antara lain pengurutan data, pencarian data, dan filter data. Kita dapat menggunakan library javascript seperti DataTables atau List.js untuk menambahkan fitur-fitur tersebut. Berikut adalah contoh kode javascript menggunakan DataTables untuk menambahkan fitur pengurutan dan pencarian data pada tabel.

javascript

$(document).ready(function() {

  $('#myTable').DataTable();

});

Kode di atas akan mengubah tabel HTML menjadi tabel interaktif dengan fitur pengurutan dan pencarian data. Pengguna dapat mengklik pada header kolom untuk mengurutkan data berdasarkan kolom tersebut. Pengguna juga dapat menggunakan kotak pencarian untuk mencari data tertentu pada tabel.

Mengubah Tampilan Tabel

Terakhir, kita dapat mengubah tampilan tabel agar lebih menarik dan mudah dibaca oleh pengguna. Kita dapat menggunakan CSS untuk mengubah tampilan tabel. Berikut adalah contoh kode CSS untuk mengubah tampilan tabel.

#myTable {

  border-collapse: collapse;

  width: 100%;

}

#myTable th, #myTable td {

  text-align: left;

  padding: 8px;

}

#myTable th {

  background-color: #4CAF50;

  color: white;

}

#myTable tr:nth-child(even) {

  background-color: #f2f2f2;

}

#myTable tr:hover {

  background-color: #ddd;

}

Kode di atas akan mengubah tampilan tabel dengan menambahkan warna latar belakang pada header kolom, warna latar belakang pada setiap baris tabel yang bergantian, dan mengubah warna latar belakang saat pengguna mengarahkan kursor ke suatu baris tabel.

Kesimpulan

Dalam artikel ini, kita telah membahas cara membuat tabel interaktif menggunakan javascript. Langkah-langkah yang perlu dilakukan antara lain mengumpulkan data, membuat tabel HTML, memasukkan data ke dalam tabel, menambahkan fitur interaktif, dan mengubah tampilan tabel. Dengan tabel interaktif, pengguna dapat berinteraksi dengan data pada tabel secara lebih mudah dan efektif. Dalam membuat tabel interaktif, penting untuk memperhatikan pengguna agar tabel dapat digunakan dengan mudah dan nyaman.