비스밀라

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.

websitnya, Grid.js는 Plugin Table을 작성하는 Javascript를 작성하고 있습니다. Grid.js 및 HTML + CSS + JS 버전의 Datatables 및 JQuery와 같은 버전

데모

https://aibnuhibban.github.io/DataTable-using-Gridjs/

카라 펭구안

Github에 저장되어 있는 저장소https://github.com/AIbnuHIbban/DataTable-using-Gridjs

Yang saya tuliskan dibawah adalah Salah Satu Cara Penggunaan yang Simple dan Tanpa Module

탐바 CSS 및 JS

Tambah CSS 및 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>

요소

모든 태그 HTML은 테이블에서 사용할 수 있습니다. Disini Kita tidak membutuhkan 태그<table> melainkan<div>

    <div id="gridtable"></div>

⚙️ 이니시알리사시

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"));

🎨 탐바 CSS 세디킷

Tambah CSS Sedikit untuk menambah kcantikan 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;
}

😎 하실냐

프레임워크 및 JQuery와 함께 gridjs를 사용할 수 있습니다. React, Vue, JQuery, Kalian bisa lihat sendiri di dokumentasinya.. Sekian saja untuk artikel kali ini, Semoga Bermanfaat ..

Github 레포 : https://github.com/AIbnuHIbban/DataTable-using-Gridjs

행운을 빕니다 👊