Designing the responsive data-tables using Vue.js and Vuetify with server side pagination

In this tutorial, we are going to have a look at designing the mobile responsive data-tables using Vue.js and Vuetify. Vue is a progressive javascript framework. Vuetify is a Vue UI Library with beautifully handcrafted Material Components which has everything you need to create amazing applications.

I hope you find this article helpful! Let’s get into it.

Creating our app

We will now create our project by running the command down below (assuming you have vue-cli installed in your system), it will ask to pick a preset, choose the default one.

vue create sample-app

Then move into our project and run the server to make sure everything works.

cd sample-app
npm run serve

This will start the server on port 8080, if you want you could go to localhost:8080 in your browser to make sure if everything works fine. Now we will add vuetify library to our sample-app project by running the below command in our project directory.

vue add vuetify

Now we will create a new component file in our components folder and name it “DataTableExample.vue” and add the below code.

Let me go through the code and explain to you what we have done so far. Here we are using the v-data-table component from vuetify library which will make a lot of our tasks easy.

The v-data-table component excepts a few different props as input like we will passing the data which we want to populate in the data-table as items, and headers as an explicitly defined array of objects which includes the title of the header, value for that column which is nothing but the key of our data which we fetched from API and many other optional key-value pairs like sortable which can allow a user to sort the data with respect to that header values.

Now suppose we want to customize any one of the columns in our data-table, then we can use the vue slots and wrapped it between the v-data-table component.

<template v-slot:item.iconUrl="{ item }">
    <v-img              
        :src="item.iconUrl"              
        :lazy-src="item.iconUrl"              
        max-height="25"              
        max-width="25"              
        :alt="item.name"            
    ></v-img>          
</template>

The above code we have is for the icon image which we want to display as an image instead of just rendering the URL of that image as text. Similarly, we can write as many dynamic slots as we want.

In the above example, we have also implemented the custom pagination dropdown. In the second div, we have written one select tag which is bound to itemsPerPage model and it is responsible to update the list of items displayed at a time.

Please check out the below GitHub repository for the source code.

GadhariSachin/CurrencyTradingApp