Bismillah
Alhamdulillah akhirnya sempat juga untuk menulis artikel, karena ini Artikel pertama saya di Dev.to mohon dimaklumi jika banyak kekurangan dalam berbagai hal 😊
Grid.js
Grid.js is a lightweight, advanced JavaScript table plugin that works everywhere.
Sesuai dengan slogan di websitnya, Grid.js menawarkan Plugin Table menggunakan Javascript dengan Tingkat Lanjut. Dengan Grid.js anda bisa membuat Datatables versi HTML + CSS + JS tanpa bantuan JQuery
Demo
https://aibnuhibban.github.io/DataTable-using-Gridjs/
Cara Penggunaan
Anda Bisa melihat Repository di Github yang sudah saya buat https://github.com/AIbnuHIbban/DataTable-using-Gridjs
Yang saya tuliskan dibawah adalah Salah Satu Cara Penggunaan yang Simple dan Tanpa Module
Tambah CSS dan JS
Tambah CSS dan JS ke Dalam Dokumen
CSS
<link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" />
JS
<script src="https://unpkg.com/gridjs/dist/gridjs.production.min.js"></script>
Element
Siapkan Satu Tag HTML untuk menaruh Table yang ingin dipasangkan. Disini Kita tidak membutuhkan Tag <table>
melainkan <div>
<div id="gridtable"></div>
⚙️ Inisialisasi
Inisialisasi Awal anda bisa hanya dengan menuliskan seperti berikut di Javascript
new gridjs.Grid({
search: true,
pagination: {
buttonsCount: 10,
limit: 5,
summary: true
},
sort: true,
columns: ['No','Name', 'Username', 'Email', 'Website', {
name: 'Actions',
formatter: (cell, row) => gridjs.html(`<a onclick="return confirm('Delete Data ?')" href='javascript:void(0)'>Delete</a>`),
}],
server: {
url: 'https://jsonplaceholder.typicode.com/users',
then: data => data.map((res,i) => [i+1, res.name, res.username, res.email, res.website, null])
},
language: {
'search': {
'placeholder': 'Masukkan Kata Kunci...'
},
'pagination': {
'previous': 'Sebelumnya',
'next': 'Selanjutnya',
'showing': ' 📋 Menampilkan',
'results': () => 'Data',
'to' : 'sampai',
'of' : 'Data dari'
}
}
}).render(document.getElementById("gridtable"));
🎨 Tambah CSS Sedikit
Tambah CSS Sedikit untuk menambah kecantikan Tabel
body{
font-family: Verdana, Geneva, Tahoma, sans-serif;
background:#F7F7F7
}
.gridjs-pagination .gridjs-pages button{
padding: 10px 15px;
}
.gridjs-sort{
outline: none;
border: none;
}
😎 Hasilnya
ini salah satu cara penggunaan dari gridjs tanpa Framework dan JQuery. Sebenarnya Gridjs juga menyediakan untuk React, Vue, dan JQuery, Kalian bisa lihat sendiri di dokumentasinya.. Soo, Sekian saja untuk artikel kali ini, Semoga Bermanfaat ..
Github Repo : https://github.com/AIbnuHIbban/DataTable-using-Gridjs
Good Luck 👊
Top comments (0)