How to Use Vuegoodtable Datatable in Vue Js

Hello everyone, back at porkaone. On this occasion we will learn how to use vuegoodtable instead of jquery datatable in vue js. Curious?, let's follow in full below.

For users of jquery, of course, the datatable library is familiar. Because its features are very powerful and really help programmers to build table features in a short time.

So on this occasion, we will use the vuegoodtable library as a substitute for the jquery datatable in vue js. How to use it is quite easy, and its features are also sufficient to represent the needs of creating tables such as search, paging, sorting, and info table.

How to Use Vuegoodtable in Vue Js

1. In this tutorial we are using vuejs version 3. Please install vue js first, or use an existing vue project.

2. Run the command below to download the vuegoodtable package.

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

3. Open the main.js file, then register the vuegoodtable library. Please add a script that is not already in the main.js file. Here we will use vuegoodtable globally.

  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. Next, open the vue file where you want to use this vuegoodtable library. Please copy the script below and paste it into the file. For explanation, I have included it in the script.

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

        :search-options="{
            enabled: true, //to enable search feature
        }"
        :pagination-options="{
            enabled: true,  //to enable pagination feature
            mode: 'records',
        }"
        :line-numbers="true">
    </vue-good-table>
  </div>
</template>

<script>
export default {
  name: "my-component",
  data() {
    return {
      //set of columns you want to display in the table
      columns: [
        {
          label: "Name", //labels will appear as column headers
          field: "name", //match the field name with the row name
        },
        {
          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 is data that will be displayed repeatedly in the table
      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>

The use of vue good table is quite simple, you only need to create column and row data. You can use real data like api to make data rows more dynamic. To fetch api data we can use axios.

5. we have completed all the steps, it's time to do a trial. Please run the command npm run server. You can see the final display as shown in the image below.

Vue Good Table

Wow cool right?. Now you have another option to create a table with great features. Now you can improvise by adding a badge, button, or modal so that the table you create becomes even more powerful.

Ok, that's our tutorial this time about how to use vuegoodtable in vue js. May be useful. If there are difficulties, problems or errors, please ask in the comments column. That is all and thank you.