DEV Community

Cover image for Datatables Versi HTML + CSS + JS menggunakan Grid.js
AibnuHibban
AibnuHibban

Posted on • Updated on

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" />
Enter fullscreen mode Exit fullscreen mode

JS

<script src="https://unpkg.com/gridjs/dist/gridjs.production.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

Element

Siapkan Satu Tag HTML untuk menaruh Table yang ingin dipasangkan. Disini Kita tidak membutuhkan Tag <table> melainkan <div>

    <div id="gridtable"></div>
Enter fullscreen mode Exit fullscreen mode

⚙️ 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"));
Enter fullscreen mode Exit fullscreen mode

🎨 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;
}
Enter fullscreen mode Exit fullscreen mode

😎 Hasilnya

enter image description here

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)