Menggunakan Datatable Vuegoodtable di Vue Js

Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini kita akan belajar cara menggunakan vuegoodtable sebagai pengganti jquery datatable di vue js. Penasaran?, ayo ikuti selengkapnya di bawah ini.

Bagi para pengguna jquery tentu library datatable sudah tidak asing lagi. Karena fiturnya yang sangat powerful dan benar-benar membantu para programmer untuk membangun fitur tabel dengan waktu yang singkat. Saya juga sudah menulis artikel cara menggunakan jquery datatable pada vue js di link berikut ini https://www.sahretech.com/2022/06/cara-menggunakan-library-datatable-pada.html

Nah pada kesempatan kali ini, kita akan menggunakan library vuegoodtable sebagai pengganti jquery datatable di vue js. Cara penggunaannya cukup mudah, dan fitur-fiturnya juga sudah cukup untuk mewakili kebutuhan pembuatan tabel seperti pencarian, paging, sorting, dan info table.

Cara Menggunakan Vuegoodtable di Vue Js

1. Pada tutorial ini kita menggunakan vuejs versi 3. Silahkan install vue js terlebih dahulu, atau gunakan vue project yang sudah ada. Silahkan ikuti link berikut ini untuk cara instalasi vue js #link.

2. Jalankan perintah di bawah ini untuk mendownload paket vuegoodtable.

npm install --save vue-good-table-next

3. Buka file main.js, lalu daftarkan library vuegoodtable. Silahkan tambahkan script yang belum ada di dalam file main.js. Disini kita akan menggunakan vuegoodtable secara global.

  import VueGoodTablePlugin from 'vue-good-table-next';
  import 'vue-good-table-next/dist/vue-good-table-next.css' //import the styles
  
  const app = createApp(App)
  
  app.use(VueGoodTablePlugin);
  
  app.use(router)
  app.mount('#app')
 

4. Selanjutnya buka file vue dimana kalian ingin menggunakan libarary vuegoodtable ini. Silahkan salin script di bawah ini dan tempelkan ke dalam file tersebut. Untuk penjelasan, sudah saya sertakan di dalam script.

<template>
  <div class="container">
    <vue-good-table 
        :columns="columns"
        :rows="rows"

        :search-options="{
            enabled: true, //untuk menghidupkan fitur pencarian
        }"
        :pagination-options="{
            enabled: true,  //untuk menghidupkan paginasi
            mode: 'records',
        }"
        :line-numbers="true">
    </vue-good-table>
  </div>
</template>

<script>
export default {
  name: "my-component",
  data() {
    return {
      //set kolom yang ingin ditampilkan pada tabel
      columns: [
        {
          label: "Name", //label akan muncul sebagai header kolom
          field: "name", //sesuaikan nama field dengan nama row
        },
        {
          label: "age",
          field: "age",
        },
        {
          label: "Created On",
          field: "createdAt",
          type: "date",
          dateInputFormat: "yyyy-MM-dd",
          dateOutputFormat: "MMM do yy",
        },
        {
          label: "Percent",
          field: "score",
          type: "percentage",
        },
      ],

      //rows adalah data yang akan ditampilkan berulang di dalam tabel
      rows: [
        {
          id: 1,
          name: "John",
          age: 20,
          createdAt: "2011-10-30",
          score: 0.03343,
        },
        {
          id: 2,
          name: "Jane",
          age: 24,
          createdAt: "2011-10-31",
          score: 0.03343,
        },
        {
          id: 3,
          name: "Susan",
          age: 16,
          createdAt: "2011-10-30",
          score: 0.03343,
        },
        {
          id: 4,
          name: "Chris",
          age: 55,
          createdAt: "2011-10-11",
          score: 0.03343,
        },
        {
          id: 5,
          name: "Dan",
          age: 40,
          createdAt: "2011-10-21",
          score: 0.03343,
        },
        {
          id: 6,
          name: "John",
          age: 20,
          createdAt: "2011-10-31",
          score: 0.03343,
        },
      ],
    };
  },
};
</script>

Penggunaan vue good table cukup sederhana, kalian hanya perlu membuat data colomn dan row. Kalian bisa menggunakan data ril seperti api untuk membuat data row menjadi lebih dinamis. Untuk fetch data api kita bisa menggunakan axios. Tutorial fetch data dengan axios bisa kalian baca disini https://www.sahretech.com/2020/11/cara-melakukan-http-request-pada-vue-js.html

5. semua step sudah selesai kita lalui, saatnya melakukan uji coba. Silahkan jalankan perintah npm run server. Tampilan akhirnya bisa kalian lihat seperti gambar di bawah ini.

Hasil Akhir Vue Good Table

Wah keren kan?. Sekarang kalian punya pilihan lain untuk membuat table dengan fitur hebat. Sekarang kalian bisa melakukan improvisasi dengan menambahkan badge, button, atau modal agar tabel yang kalian buat jadi lebih powerful lagi.

Ok, sekian tutorial kita kali ini tentang cara menggunakan vuegoodtable di vue js. Semoga bermanfaat. Jika ada kesulitan, masalah atau error silahkan tanya di kolom komentar, atau tanya langsung di fanspage sahretech. Sekian dan terima kasih.