Updated May 31, 2023
Introduction to Vue.js Table
In the present era of the world, we will be getting huge amounts of data everywhere we go, whether it is a Blog, search results, or an E-Commerce website. These data are generally presented as Tables. A Table is a collection of facts and figures displayed in rows and columns. For containing different kinds of information, Vue.js also helps in defining tables. The table has the feature of sorting, searching, etc. as well. Sorting can be done in ascending and descending order, which helps get the desired information from the tables. In this article, we will understand the table concept in Vue.js through different examples.
Syntax:
<sorted-table :values="values">
<thead>
<tr>
<th scope="col" style="text-align: left; width: 10rem;">
<sort-link name="id">Serial No.</sort-link>
</th>
<th scope="col" style="text-align: left; width: 10rem;">
<sort-link name="name">Song</sort-link>
</th>
<th scope="col" style="text-align: left; width: 10rem;">
<sort-link name="hits">Views in Million</sort-link>
</th>
</tr>
</thead>
</sorted-table>How to Create Vue.js Table?
For making a table firstly we need to display our table. We will need to assign the column names of the respective table. After this, we must iterate over the rows to fill all required rows. These two steps will completely display our table.
Now, the next step may be sorting the data. When we sort the data, it updates the array of the users, and tables also update themselves automatically. This process makes sorting very much simpler.
Examples of Vue.js Table
Lets us discuss the examples of Vue.js Table.
1. Vue.js Table with Filters
The example below presents the content in a tabular format. Clicking the “Eye Icon” redirects the user to a page with the details of the selected entity. Furthermore, the search bar allows for searching a specific entity, triggering the automatic application of filters based on the search query.
The files used to implement the code below are:
[i] EDUCBA.png
[ii] App.vue
<template>
<div id="app">
<img width="25%" src="./assets/EDUCBA.png">
<h1 class="vue-title">EduCBA Training Courses:</h1>
<label>Show All <input type="checkbox" v-model="show"></label>
<div v-if="show">
<v-client-table :columns="columns" :data="data" :options="options">
<a slot="uri" slot-scope="props" target="_blank" :href="props.row.uri" class="glyphicon glyphicon-eye-open"></a>
</v-client-table>
</div>
</div>
</template>
<script>
function getData() {
return [{
code: "8,999 INR",
name: "Investment Banking Course",
uri: "https://www.educba.com/finance/courses/investment-banking-course/",
}, {
code: "6,999 INR",
name: "Financial Modeling Course",
uri: "https://www.educba.com/finance/courses/financial-modeling-course/",
}, {
code: "6,999 INR",
name: "Equity Research Training",
uri: "https://www.educba.com/finance/courses/equity-research-course/",
}, {
code: "10,999 INR",
name: "Data Scientist Training",
uri: "https://www.educba.com/data-science/courses/data-scientist-course/",
}, {
code: "8,999 INR",
name: "Machine Learning Training",
uri: "https://www.educba.com/data-science/courses/machine-learning-course/",
}, {
code: "8,999 INR",
name: "R Programming Training",
uri: "https://www.educba.com/data-science/courses/r-programming-course/",
}, {
code: "8,999 INR",
name: "SAS Training",
uri: "https://www.educba.com/data-science/courses/sas-training-course/",
}, {
code: "8,999 INR",
name: "Cloud Computing Training",
uri: "https://www.educba.com/data-science/courses/cloud-computing-training-course/",
}, {
code: "6,999 INR",
name: "AWS Training",
uri: "https://www.educba.com/data-science/courses/aws-training-course/",
}, {
code: "6,999 INR",
name: "SPSS Training Program",
uri: "https://www.educba.com/data-science/courses/spss-certification-course/",
}, {
code: "6,999 INR",
name: "Tableau Training",
uri: "https://www.educba.com/data-science/courses/tableau-training/",
}, {
code: "6,999 INR",
name: "IoT Training",
uri: "https://www.educba.com/data-science/courses/iot-course/",
}, {
code: "9,999 INR",
name: "Deep Learning Training",
uri: "https://www.educba.com/data-science/courses/deep-learning-course/",
}, {
code: "6,999 INR",
name: "Apache Pig Training",
uri: "https://www.educba.com/data-science/courses/apache-pig-training/",
}, {
code: "6,999 INR",
name: "Azure Training",
uri: "https://www.educba.com/data-science/courses/azure-training-course/",
}, {
code: "6,999 INR",
name: "SEO Training",
uri: "https://www.educba.com/data-science/courses/seo-training-course/",
}, {
code: "6,999 INR",
name: "Salesforce Training",
uri: "https://www.educba.com/data-science/courses/salesforce-training-course/",
}, {
code: "6,999 INR",
name: "Redis Certification",
uri: "https://www.educba.com/software-development/courses/redis-certification/",
}, {
code: "10,999 INR",
name: "VB.NET Training",
uri: "https://www.educba.com/software-development/courses/vb-net-course/",
}, {
code: "2,499 INR",
name: "Excel Training",
uri: "https://www.educba.com/excel/courses/excel-course/",
}, {
code: "2,499 INR",
name: "VBA Training",
uri: "https://www.educba.com/excel/courses/vba-course/",
}, {
code: "10,999 INR",
name: "Unity Training",
uri: "https://www.educba.com/design/courses/unity-course/",
}];
}
export default {
name: 'app',
data() {
return {
columns: ['name', 'code', 'uri'],
data: getData(),
options: {
headings: {
name: 'Course Name',
code: 'Course Price',
uri: 'Details'
},
sortable: ['name', 'code'],
filterable: ['name', 'code']
},
show: true
}
}
}
</script>
<style>
#app {
font-family: 'Times New Roman'
, Times
, serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #0d0b0c;
margin: 25px auto 0;
width: 400px;
background-color: #54d1b0
}
</style>[iii] index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js Table</title>
</head>
<body>
<div id="app"></div>
</body>
</html>[iv] index.js
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: '<App/>',
components: { App }
})Output:
2. Vue.js Table with Sorting Option in Every Column
In the example below, one can sort every column in ascending or descending order according to one’s needs. The files used to implement the code below are:
[i] EDUCBA.png
[ii] App.vue
<template>
<div id="app">
<img width="25%" src="./assets/EDUCBA.png">
<sorted-table :values="values">
<thead>
<tr>
<th scope="col" style="text-align: left; width: 10rem;">
<sort-link name="id">Serial No.</sort-link>
</th>
<th scope="col" style="text-align: left; width: 10rem;">
<sort-link name="name">Song</sort-link>
</th>
<th scope="col" style="text-align: left; width: 10rem;">
<sort-link name="hits">Views in Million</sort-link>
</th>
</tr>
</thead>
<template #body="sort">
<tbody>
<tr v-for="value in sort.values" :key="value.id">
<td>{{ value.id }}</td>
<td>{{ value.name }}</td>
<td>{{ value.hits }}</td>
</tr>
</tbody>
</template>
</sorted-table>
</div>
</template>
<script>
export default {
name: "App",
data: function() {
return {
values: [
{ name: "November Rain", id: 2, hits: 1400 },
{ name: "That's My Name", id: 1, hits: 97 },
{ name: "Hall of Fame", id: 3, hits: 446 },
{ name: "Counting Stars", id: 4, hits: 3000 },
{ name: "Hymn For The Weekend", id: 5, hits: 1300 },
{ name: "Rockabye", id: 6, hits: 2300 },
{ name: "Let Me Down Slowly", id: 7, hits: 177 }
]
};
}
};
</script>
<style>
#app {
font-family: 'Times New Roman'
, Times
, serif;
color: #0d0b0c;
margin: 25px auto 0;
width: 500px;
background-color: #a9d918
}
</style>[iii] main.js
import Vue from "vue";
import SortedTablePlugin from "vue-sorted-table";
import App from "./App";
Vue.use(SortedTablePlugin, {
ascIcon: '<i class="material-icons">arrow_drop_up</i>',
descIcon: '<i class="material-icons">arrow_drop_down</i>'
});
Vue.config.productionTip = false;
new Vue({
el: "#app",
components: { App },
template: "<App/>"
});Output:
Output, when Serial No. is sorted, according to descending order-
Output when Songs are sorted according to ascending order-
Output when Songs are sorted according to descending order.
Output when Views are sorted in ascending order-
Result of sorting views in decreasing order:
Conclusion
On the basis of the above article, we understood the concept of Tables in Vue.js. We went through the basic idea of its working, and the examples explained above will help us understand its application in different situations or needs of our app.
Recommended Articles
This is a guide to Vue.js Table. Here we discuss the introduction and how to create Vue.js Table, along with examples and code implementation. You may also have a look at the following articles to learn more –
