Vue Data Table

Posted on  by admin

#Examples

Blogs, E-commerce sites, admins, and search results, almost everywhere you go online you are presented with large amounts of data and results, this transfer of information is a big part of what web applications are about. In this article we are going to take a look at how you can make your application dynamic by allowing your users to sort and navigate the data you are showing them using Vue.js. We are going to be building a reactive table like in the picture above, but before we get down to the build, I find it helpful to break down the problem into smaller more specific tasks or features.

We want our table to receive data in JavaScript and fill in the table’s HTML automatically.

Web development, programming languages, Software testing & others





Serial No.


Song


Views in Million



Dev

We want to be able to sort our table by column. We want to be able to paginate our data. Leaning on the reactivity of Vue.js you will see how easy it is to make a reusable table that adapts to the data you provide it.

So without further ado, let’s get right into it. First things first, before we can start making the table dynamic, we need to create the table itself. The data we will be using is a list of users with the columns: id, name, phone, and profession.

Documentation

The simplest way to render our data using Vue.js is by using the v-for directive to iterate an HTML template over a list.

3. vue-materialize-datatable

You can see in terms of JavaScript, we don’t really have anything except the definition of the data where we have the list of users. By using the built in v-for we are able to iterate over the data and already dynamically display our results.

The main problem with the above code is that it is tightly bound to the specific data we used.

If the data changes you will need to update the template along with it.

We can take this one step further and define the columns in the data field of our component, or better yet, if your data all follows the same format, you can let Vue.js read the keys itself (how meta of us).



Iterating over the columns is exactly like how we iterated over the rows in the previous example, and now when we iterate over the rows, for each row we iterate on all its columns.





Vue.js Table




By using v-for inside a v-for we not only shortened our template significantly but made our Vue.js table a more lot adaptable to any data you throw at it.

import Vue from 'vue'
import { ClientTable } from 'vue-tables-2';
import App from './App'
Vue.config.productionTip = false
Vue.use(ClientTable);
new Vue({
el: '#app',
template: '',
components: { App }
})

It is generally a good idea to remove any tightly bound links between your data and template when building something where the data can change.

#Props

Sorting the table is a lot simpler than you may think. Traditionally, this involves sorting the data itself and then re-rendering the HTML, all the while keeping track of click events on the columns and sorting direction.

Vue.js takes care of a lot of it for us—by just updating the underlying array of users, the table will react automatically.

Let’s start simple and just have the data sort itself when clicking on a column.



To do this we need to add a click event to the column’s headers which when clicked will sort the data accordingly.

import Vue from "vue";
import SortedTablePlugin from "vue-sorted-table";
import App from "./App";
Vue.use(SortedTablePlugin, {
ascIcon: 'arrow_drop_up',
descIcon: 'arrow_drop_down'
});
Vue.config.productionTip = false;
new Vue({
el: "#app",
components: { App },
template: ""
});

We add the click event handler by using the v-on:click directive in our template on each element that calls a method called sortTable, passing the column with which to sort the data.

The actual sorting is done using JavaScript’s built in sort method in which you specify a closure that receives two elements from the array, and has to return -1, 0 or 1 based on whether the first value is smaller, equal to or bigger than the second value respectively.

Now playing with the table, you can see this is pretty cool, but only sorts in one direction.

To sort in the other direction, the closure we pass to the sort method needs to return 1 where we returned -1and visa versa, essentially flipping the order.

To accomplish this we need to keep track of which column we are currently sorting by, and in which direction to sort – ascending or descending.

So let’s go ahead and add these two fields to our dataobject and update the sort method.

What Is Data Table?

Bi-directional sorting, now we are getting somewhere; we have already implemented all the logic needed to sort the table, but it would be nice to be able to have some indication as to what is being sorted, and how.

#Usage

If you think about it logically, what we want to do is add something to indicate whether we are sorting in ascending or descending order to a column, if we are currently sorting by that column.