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>columns:menentukan judul kolomdata: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>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
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.