Datatables Versi HTML + CSS + JS menggunakan Grid.js

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 👊