Cara Buat Tabel Dinamis Menggunakan Gridjs di Blog

Table Dinamis Menggunakan Gridjs - Tabel sering digunakan untuk banyak hal seperti mengurutkan data baik berupa teks atau angka secara terperinci dan sebagainya.

Di Blog tabel juga dimanfaatkan untuk menampilkan sebuah informasi dalam postingan ataupun halaman kepada pengunjung.

Dalam jumlah kecil, data tabel akan sangat mudah dipahami dan digunakan oleh user, akan berbeda jika tabel memiliki banyak data, diperlukan sebuah fitur data yang dinamis.

Fitur tersebut meliputi pencarian, filter, dan penomoran otomatis. Pada artikel kali ini kita akan membahas bagaimana membuat tabel dinamis di blog menggunakan liblary Grid.js.

Mengenal library Gridjs

Gridjs adalah plugin atau library yang dibuat dengan typescript untuk membuat tabel dinamis html, dikembangkan untuk digunakan dengan semua framework JavaScript termasuk React, Angular.js, Vue atau tanpa framework.

Library Grid.js mendukung semua browser web modern, cepat dalam memproses data, dokumentasi yang lengkap dan tentunya grid.js dapat digunakan secara gratis.

Membuat Tabel Dinamis Menggunakan Gridjs

Instal Grid.js dengan CDN

Langkah pertama menginstal Grid.js, salin dan paste kode berikut di atas tag </head>.

<link href='https://cdn.jsdelivr.net/npm/gridjs/dist/theme/mermaid.min.css' rel='stylesheet' />
<script src='https://cdn.jsdelivr.net/npm/gridjs/dist/gridjs.umd.js'></script>

Membuat Tabel Grid.js

Setelah proses instal selesai, sekarang bagaimana membuat tabel dinamis tersebut menggunakan grid.js?

Di dalam editor postingan atau halaman buat sebuah element HTML <div> untuk menampilkan data tabel nantinya

<div id='data-table'></div>

Tepat di bawah kode tersebut tambahkan kode javascript berikut

<script>
new gridjs.Grid({
  columns: ['Nama', 'Email', 'Telp', 'Kelas'],
  data: [
    ['Adin', '[email protected]', '(353) 01 222 3333', 'Karyawan'],
    ['Beni', '[email protected]', '(01) 22 888 4444', 'Reguler'],
    ['Citra', '[email protected]', '(01) 22 888 4444', 'Karyawan'],
    ['Fahri', '[email protected]', '(353) 01 222 3333', 'Reguler'],
    ['Joni', '[email protected]', '(01) 22 888 4444', 'Reguler'],
    ['Nurul', '[email protected]', '(01) 22 888 4444', 'Karyawan']
  ]
}).render(document.getElementById("data-table"));
</script>

Keterangan:

• columns: menentukan judul kolom
• data: data yang akan ditampilkan
• .getElementById("data-table") untuk menampilkan data

Menambahkan Fitur Seaching, Sorting, dan Pagination

Jika tabel memiliki banyak data, kamu bisa mengaktifkan fitur kolom pencarian, sorting dan paginatio. Caranya cukup memasukan nilai berikut kedalam javascript gridjs yang tadi dibuat.

  search: true,
  sort: true,
  pagination: {
    limit: 3
  },

Maka kode javascript akan nampak seperti ini :

<script>
new gridjs.Grid({
  columns: ['Nama', 'Email', 'Telp', 'Kelas'],
  search: true,
  sort: true,
  pagination: {
    limit: 3
  },
  data: [
    ['Adin', '[email protected]', '(353) 01 222 3333', 'Karyawan'],
    ['Beni', '[email protected]', '(01) 22 888 4444', 'Reguler'],
    ['Citra', '[email protected]', '(01) 22 888 4444', 'Karyawan'],
    ['Fahri', '[email protected]', '(353) 01 222 3333', 'Reguler'],
    ['Joni', '[email protected]', '(01) 22 888 4444', 'Reguler'],
    ['Nurul', '[email protected]', '(01) 22 888 4444', 'Karyawan']
  ]
}).render(document.getElementById("data-table"));
</script>

Keterangan:

• limit: mengatur berapa baris data yang akan ditampilkan setiap halaman

Merubah Bahasa Tabel Grid.js

Grid.js mendukung beberapa bahasa, misal jika kamu ingin menggunakan bahasa indonesia pada tabel.

Seperti merubah placeholder kotak 'search' menjadi 'Cari nama....' atau bagian pagination menjadi bahasa indonesia cukup tambahkan properti language.

language: {
  'search': {
    'placeholder': '🔍 Cari nama....'
  },
   'pagination': {
    'previous': 'Sebelumnya',
    'next': 'Berikutnya',
    'showing': 'Menampilkan',
    'to': 'sampai',
    'of': 'dari',
    'results': () => 'Data'
  }
},

Maka kode akhir akan nampak seperti ini :

<div id='data-table'></div>
<script>
new gridjs.Grid({
  columns: ['Nama', 'Email', 'Telp', 'Kelas'],
  search: true,
  sort: true,
  pagination: {
    limit: 3
  },
  language: {
    'search': {
      'placeholder': '🔍 Cari nama....'
    },
     'pagination': {
      'previous': 'Sebelumnya',
      'next': 'Berikutnya',
      'showing': 'Menampilkan',
      'to': 'sampai',
      'of': 'dari',
      'results': () => 'Data'
    }
  },
  data: [
    ['Adin', '[email protected]', '(353) 01 222 3333', 'Karyawan'],
    ['Beni', '[email protected]', '(01) 22 888 4444', 'Reguler'],
    ['Citra', '[email protected]', '(01) 22 888 4444', 'Karyawan'],
    ['Fahri', '[email protected]', '(353) 01 222 3333', 'Reguler'],
    ['Joni', '[email protected]', '(01) 22 888 4444', 'Reguler'],
    ['Nurul', '[email protected]', '(01) 22 888 4444', 'Karyawan']
  ]
}).render(document.getElementById("data-table"));
</script>

Impor Data Sisi Server

Kamu juga dapat menggunakan data dari sisi server untuk mengisi data tabel, silakan pelajari import data sisi server gridjs.

Alternatif Plug-in Table

Cara Membuat Tabel Menggunakan jQuery DataTables - InpuTekno

Cara membuat tabel dinamis menggunakan plug-in jQuery DataTables mulai dari menginstal dan menampilkan dataTables responsive.

www.inputekno.com

Penutup

Nah itu tadi Cara Buat Tabel Dinamis Menggunakan Gridjs di Blog. Semoga artikel ini bisa bermanfaat. Kamu juga bisa share dan rekomendasikan ke teman-teman yang membutuhkan.