Create Dynamic Datatables Component in Vue 2 App

Vue Datatable Component Tutorial; Throughout this comprehensive guide, you will ascertain how to create dynamic datatable in the Vue js application using the profound vue-table-2 package.

Also, we will use the Axios package to make an HTTP request and fetch the data from the server and display it into the datatable.

Axios is a powerful, promise-based HTTP client which helps you consume REST API through asynchronous HTTP requests; you can get, post, update or delete data from the client-side JavaScript application.

We will use the Bootstrap CSS framework package; this package is available through the node package manager.

This tutorial will start with installing vue cli and a fresh new vue app, then adding some essential packages to create the server-side datatable in vue and the client-side data tables in vue with the help of the Axios package.

Vue Js Dynamic Datatables Component Example

  • Step 1: Install Vue CLI Tool
  • Step 2: Download Vue App
  • Step 3: Install Axios and Bootstrap Packages
  • Step 4: Install Vue Table Package
  • Step 5: Register Packages in Main Js
  • Step 6: Create New Component
  • Step 7: Set Up JSON Server
  • Step 8: Create Dynamic Datatable in Vue Js
  • Step 9: Start Vue Project

Install Vue CLI Tool

Vue CLI is a high fidelity tool for vue development; let’s install it first.

npm install -g @vue/cli

# or

yarn global add @vue/cli

Download Vue App

In this section, we are going to install a new vue js app.

vue create vue-demo-app

Step inside the app.

cd vue-demo-app

Vue Gatsby Error

Node.js Gatsby error – “digital envelope routines::unsupported …”

Error: digital envelope routines::unsupported

opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'

To remove above error for invoking the app, make sure to update the "scripts": [] array in package.json file.

"scripts": {
    "serve": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
    "build": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
    "lint": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service lint"
},

Fix Multi Word Error

In order to fix multi-word error, insert the given code in vue.config.js file.

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
})

Install Axios and Bootstrap Packages

In this step, we will install Axios and bootstrap libraries in vue, so execute the given below commands respectively.

npm install vue-axios axios
npm install bootstrap

Install Vue Table Package

To design eloquent data tables in vue, execute the suggested command and add the Vue Tables 2 package into vue.

npm install vue-tables-2

Register Packages in Main Js

In order to take advantage of the installed packages, register them in the src/main.vue file; this way, these libraries will be globally available in the vue app.

import Vue from 'vue'
import App from './App.vue'

import { ClientTable } from 'vue-tables-2';
import 'bootstrap/dist/css/bootstrap.min.css';
import VueAxios from 'vue-axios'
import axios from 'axios'

Vue.use(ClientTable);
Vue.use(VueAxios, axios)


new Vue({
  render: h => h(App)
}).$mount('#app')

Create New Component

Vue ecosystem allows you to categorize your code into components, consequently create a new components/DataTable.vue file to accumulate the server-side data tables code.

<template>
    
</template>

<script>

export default {
    data() {
        return {
            
        }
    },
    mounted() {

    }
 
}
</script>

Moreover, this newly formulated component has to be called from the src/App.vue file.

<template>
  <div class="container mt-5 text-center">
    <DataTable />
  </div>
</template>

<script>
import DataTable from './components/DataTable.vue'

export default {
  name: 'App',
  components: {
    DataTable
  }
}
</script>

Set Up JSON Server

This section unleashes the process of creating a demo server for building fake REST API, atleast for demo purpose API built with JSON-server works with the same fidelity as the real one.

Now, use command to install the JSON server pacakge.

npm install json-server

Additionally, create a backend folder, db.json file within the same folder, then add the following data in the backend/db.json file.

{
  "users": [
    {
      "id": 1,
      "name": "Leanne Graham",
      "email": "Sincere@april.biz",
      "website": "hildegard.org"
    },
    {
      "id": 2,
      "name": "Ervin Howell",
      "email": "Shanna@melissa.tv",
      "website": "anastasia.net"
    },
    {
      "id": 3,
      "name": "Clementine Bauch",
      "email": "Nathan@yesenia.net",
      "website": "ramiro.info"
    },
    {
      "id": 4,
      "name": "Patricia Lebsack",
      "email": "Julianne.OConner@kory.org",
      "website": "kale.biz"
    },
    {
      "id": 5,
      "name": "Chelsey Dietrich",
      "email": "Lucio_Hettinger@annie.ca",
      "website": "demarco.info"
    },
    {
      "id": 6,
      "name": "Mrs. Dennis Schulist",
      "email": "Karley_Dach@jasper.info",
      "website": "ola.org"
    },
    {
      "id": 7,
      "name": "Kurtis Weissnat",
      "email": "Telly.Hoeger@billy.biz",
      "website": "elvis.io"
    },
    {
      "id": 8,
      "name": "Nicholas Runolfsdottir V",
      "email": "Sherwood@rosamond.me",
      "website": "jacynthe.com"
    },
    {
      "id": 9,
      "name": "Glenna Reichert",
      "email": "Chaim_McDermott@dana.io",
      "website": "conrad.com"
    },
    {
      "id": 10,
      "name": "Clementina DuBuque",
      "email": "Rey.Padberg@karina.biz",
      "website": "ambrose.net"
    },
    {
      "id": 11,
      "name": "Leanne Graham",
      "email": "Sincere@april.biz",
      "website": "hildegard.org"
    },
    {
      "id": 12,
      "name": "Ervin Howell",
      "email": "Shanna@melissa.tv",
      "website": "anastasia.net"
    },
    {
      "id": 13,
      "name": "Clementine Bauch",
      "email": "Nathan@yesenia.net",
      "website": "ramiro.info"
    },
    {
      "id": 14,
      "name": "Patricia Lebsack",
      "email": "Julianne.OConner@kory.org",
      "website": "kale.biz"
    }
  ]
}

Run command to start the JSON server; at the same time, you may change the port number if you want.

json-server --watch backend/db.json --port 8888

Create Dynamic Datatable in Vue Js

The v-client-table directive takes various properties to build the datatable in vue. We are fetching the data using the Axios HTTP GET request and adding it into the datatable.

Add code in src/components/DataTable.vue file.

<template>
    <v-client-table
        :data="usersCollection"
        :options="tableOptions"
        :columns="tableColumns">
    </v-client-table>
</template>

<script>

export default {
    data() {
        return {
            tableColumns: [
              'id', 
              'name', 
              'email', 
              'website'
            ],
            usersCollection: [],
            tableOptions: {
                headings: {
                    id: 'ID',
                    name: 'Name',
                    email: 'Email',
                    website: 'Website'
                },
                sortable: ['name', 'email'],
                filterable: ['name', 'email']
            }
        }
    },
    mounted() {
        this.axios.get('http://localhost:8888/users').then((response) => {
            this.usersCollection = response.data
        })
    }
 
}
</script>

Start Vue Project

Finally, start the vue app by executing the given command through the command prompt.

npm run serve
http://localhost:8080

Add Advance Datatables in Vue Js

Conclusion

This was it; eventually, we have learned the subtle nuances regarding implementing data tables in vue. Datatables are exorbitantly useful in handling complex data. It comes with super cool features such as searching, sorting, and pagination.

We have tried to show you how to fetch data from the server and implement that data into datatable, and we also showed you how to create a fake server using the JSON-server library.