VueJs Datatables — The Easy Options

Diligent Dev
Sep 28, 2020 · 5 min read
Image by OpenClipart-Vectors from Pixabay

Datatables are one of the most popular choices when displaying data inside of an application. They are familiar to users and easy for developers to work with. Unfortunately, they can take quite a bit of time if you want to code all the functionality out yourself.

Luckily, there are some great packages that give you a ton of functionality right out of the box. In this article, we’re going to look at some of the most popular datatable packages for VueJS.

Video Tutorial

Vue Data Table Video Tutorial

BootstrapVue Datatable

BootstrapVue is a VueJS component package that is built on top of the extremely popular Bootstrap Framework. It offers a ton of pre-made components that you can use inside of your project. For this tutorial, we’ll be looking at their table component.

To install BootstrapVue, open terminal in the root of your Vue project and run the following command:

npm install vue bootstrap-vue bootstrap

If you want to install all of the components BootstrapVue has to offer, add the following code to src/main.js:

import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'//import css files
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
// Install BootstrapVue
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

If you’re only planning on using the datatable component (or any other) and want to keep your bundle size minimal, you can add it like this in src/main.js:

//import css files
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import { TablePlugin } from 'bootstrap-vue'
Vue.use(TablePlugin)

Creating a table is as easy as adding the <b-table> tag and specifying the items prop pointing at your data:

<template>
<div id="app" class="container">
<b-table striped hover outlined :items="posts"></b-table>
</div>
<template>
<script>
export default {
name: "App",
data() {
return {
posts: [
{
userId: 1,
id: 1,
title: "sunt aut facere repellat provident occaecati",
},
{
userId: 1,
id: 2,
title: "qui est esse",
},
{
userId: 1,
id: 3,
title: "ea molestias quasi exercitationem repellat qui",
},
],
};
}
}
</script>

The above example is the most basic example of what you can do with a BootstrapVue datatable. But, what if you wanted to add some more advanced features such as buttons to search, pagination, or buttons to delete rows? Well, the team at BootstrapVue has made it extremely easy to add theses and many others.

Let's take a look at how we can add the functionality above to search the table add pagination, and simulate a record deletion.

Search
To add the search all we need to do is add a new variable to our data property called “filter”. Then we’ll add a <b-form-input> to the top and set a v-model pointing at our new filter variable. Last, we’ll add a filter prop to the <b-table> tag and point it at our filter property.

Pagination
Pagination is also simple to implement. We need to add 2 new variables to our data property:

1. currentPage — Current Page to be displayed
2. perPage — Rows to be displayed per page.

Next, we’ll add a computed property to calculate the total rows of our posts. Last, we’ll add the <b-pagination> component below our table.

Adding Delete Buttons to Rows
To add a delete button to each row, we’ll use a v-slot template and point it at the data of our row. Inside of the template, we’ll add a <b-button> with a click handler. That handler will point at a new method where we’ll delete the row. We’ll also have to tell the table we’re adding a new column. We can use the fields prop to do so.

Vuetify Datatable

Vuetify is another popular Vue package based on the Material Design System by Google. Their team makes it extremely easy to work with Material Design inside of Vue by creating a ton of different components we can import into our project.

The easiest way to install Vuetify is by using the Vue CLI. So, if you don't have it installed, do so. Then, open a terminal in the root of your project and run the following command:

vue add vuetify

To add all of Vuetify’s components to your project, we’ll use the recommended way inside of their docs. To do so, add a new folder inside of the src folder called plugins. Then we’ll add a file to that folder named vuetify.js. Inside of this new file (src/plugins/vuetify.js) ), we’ll add the following:

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

Then, inside of src/main.js, add the following bold text:

import Vue from 'vue'
import vuetify from '@/plugins/vuetify' // path to vuetify export

new Vue({
vuetify,
}).$mount('#app')

Adding specific components to your Vue project is a little tricky. I would suggest that you check out their A-la-carte (treeshaking) documentation as they can explain it better than I can 😄.

After adding Vuetify to our project you’ll see that it adds some code to our App.vue file. There are 2 new tags: <v-app> and <v-main> its important that all of your Vuetify components reside inside of these tags. Since their added by default in App.vue, this should not cause any issues.

Adding a datatable is as easy as adding a <v-data-table> tag and specifying your headers, items, and items-per-page props. We’ll also add the elevation-1 class to give it a card-like appearance. By default, Vuetify datatables come with pagination so we don't have to worry about wiring that up ourselves.

The above example is the most basic example of a Vuetify datatable. Fortunately, there are a ton of other features you can add to it. In the below examples, you’ll see some of the most common things you can add to your datatables. For all examples, check out their datatable documentation.

Search
To add search functionality to our Vuetify Datatable, we’ll add a new data prop called search. Then we’ll create a <v-text-field> above our table with a v-model pointing at our new search prop. Last, we’ll pass our search as a prop on our datatable.

Adding Delete Buttons to Rows
We can a delete button in a very similar manner to the BootstrapVue table. To do so, add a <template> tag inside the <v-data-table> tag. Then use the v-slot prop to bind it to the row item. Inside of the template, we’ll add a <v-icon> and bind to the click event to delete the post. Last we’ll add a delete method.

Conclusion

As you can see, BootstrapVue and Vuetify give you a plug-and-play solution for datatables. Even though we covered the most common uses for the respective datatables, this is just the tip of the iceburg. I highly encourage you to check out their documentation ( BootstrapVue Table Docs | Vuetify Datatable Docs).

The Startup

Get smarter at building your thing. Join The Startup’s +787K followers.

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Diligent Dev

Written by

Full-stack developer developer for 7+ years with a passion for learning new things and sharing. For more, check out diligentdev.com.

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +787K followers.

Diligent Dev

Written by

Full-stack developer developer for 7+ years with a passion for learning new things and sharing. For more, check out diligentdev.com.

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +787K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store