Add Custom Table In Vue JS

Introduction:

Data that is too complex or extensive to be fully conveyed in the text is organized in tables so that the reader may easily see the outcomes. They can be used to draw attention to trends or patterns in the data and to improve the readability of a publication by excluding text-based numerical information.

In this article, we will install Vue-Good-Table in our Vue project and create some basic tables.

Get Started:

Step 1: Create a new Vue project.

Run the following command to create a new Vue project.

vue create vue-good-table

Then move to your project.

cd vue-good-table

and then run your project to check whether everything is installed properly or not.

npm run serve

Step 2: Install Vue-Good-Table in your project.

npm install --save vue-good-table

Step 3: Import Vue-Good-Table to your component.

You can import globally in your project by writing these lines into main.js file

...
...
import VueGoodTablePlugin from 'vue-good-table';
import 'vue-good-table/dist/vue-good-table.css'
...
Vue.use(VueGoodTablePlugin);

Or you can just import in your component…

<script>
...
import 'vue-good-table/dist/vue-good-table.css'
import { VueGoodTable } from 'vue-good-table';
export default {
  name: 'HelloWorld',
  components: {
    VueGoodTable,
  },
}
</script>

Step 4: Add the following HTML in your <template>.

<template>
  <div class="hello">
    <vue-good-table 
      :columns="columns" 
      :rows="rows" 
      :pagination-options="{
        enabled: true,
        perPageDropdown: [2, 4, 6]
      }" 
    />
  </div>
</template>

Step 5: Add dummy data in your <script>.

data() {
    return {
      columns: [
        {
          label: 'Id',
          field: 'id',
          type: 'number',
        },
        {
          label: 'Name',
          field: 'name',
        },
        {
          label: 'Age',
          field: 'age',
          type: 'number',
        },
        {
          label: 'Phone',
          field: 'phone',
          type: 'number',
        },
        {
          label: 'Added On',
          field: 'addedAt',
          type: 'date',
          dateInputFormat: 'dd-MM-yyyy',
          dateOutputFormat: 'MMM do yyyy',
        },

      ],
      rows: [
        {
          id: 1,
          name: "Rahul",
          age: 20,
          phone: 9876543210,
          addedAt: '25-10-2005'
        },
        {
          id: 2,
          name: "Mayank",
          age: 25,
          phone: 7987465231,
          addedAt: '15-07-2008'
        },
        {
          id: 3,
          name: "Sonal",
          age: 22,
          phone: 6587452103,
          addedAt: '07-09-2006'
        },
        {
          id: 4,
          name: "Pratik",
          age: 27,
          phone: 6985321047,
          addedAt: '05-10-2012'
        },
        {
          id: 5,
          name: "Sahil",
          age: 24,
          phone: 4235698745,
          addedAt: '12-11-2005'
        },
      ],
    };
  }

Finally, save all things and check your output. You can also find more customization options on vue-good-table