Datatables Versi HTML + CSS + JS menggunakan Grid.js
Tags: gridjs, table, leenuksid
Published: 2020-08-29 17:28:56

***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](https://gridjs.io/), 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**
```html
<link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css"  rel="stylesheet" />
```
**JS**
```html
<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>` 
```html
    <div id="gridtable"></div>
```
## ⚙️ Inisialisasi
Inisialisasi Awal anda bisa hanya dengan menuliskan seperti berikut di Javascript
```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 
```css
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
![enter image description here](https://camo.githubusercontent.com/6259a088042056a19066f45c8a8483fbfe00b6d1/68747470733a2f2f692e6962622e636f2f5a3248675750362f53637265656e73686f742d66726f6d2d323032302d30382d32392d32332d33352d31312e706e67)

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 👊