Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

vue.js table

Related:
Vue: Step-By-Step Guide To Mastering Vue.js From Beginner To Advanced (Vue.js, Learning Vue js 2)

Vue.js example: A sortable table made using a JSON object.

We define the JSON object in the Vue App (list). The object has several attributes which are added as columns. The data is dynamic: if you change the JSON data, the table data will change.

We create a table like this:
 
vuejs sortable table

Vue.js table

The table data is defined as a simple JSON object:

var list = [
{ name: 'Neil', category: 'Engineering', value: 13 },
{ name: 'Norah', category: 'Marketing', value: 23 },
{ name: 'Kasey', category: 'Sales', value: 120 },
{ name: 'Sabrina', category: 'Marketing', value: 40 },
{ name: 'Paul', category: 'Sales', value: 45 }
];

The actual table is just:
<div id="app">
<vue-table v-model="list"></vue-table>
</div>

Changing the JSON object (list) will change the actual table.

Then the complete code creates a sortable vue.js table.

<!DOCTYPE html>
<html class="" lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="robots" content="noindex">
<style class="cp-pen-styles">
@import url("//fonts.googleapis.com/css?family=Material+Icons");

.vue-table {
font: 16px sans-serif;
border-collapse: collapse;
}

.vue-table td, .vue-table th {
border: 1px solid #ccc;
padding: 5px;
}

.vue-table th {
padding: 3px 16px;
position: relative;
cursor: pointer;
}

.vue-table th:before {
font-family: 'Material Icons', sans-serif;
position: absolute;
left: 0;
}

.vue-table th:before {
content: 'arrow_right';
color: silver;
}

.vue-table .ascending:before {
content: 'arrow_drop_down';
color: dodgerblue;
}

.vue-table .descending:before {
content: 'arrow_drop_up';
color: dodgerblue;
}
</style>
</head>
<body>

<div id="app">
<vue-table v-model="list"></vue-table>
</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.min.js"></script>

<script>"use strict";
var list = [
{ name: 'Neil', category: 'Engineering', value: 13 },
{ name: 'Norah', category: 'Marketing', value: 23 },
{ name: 'Kasey', category: 'Sales', value: 120 },
{ name: 'Sabrina', category: 'Marketing', value: 40 },
{ name: 'Paul', category: 'Sales', value: 45 }
];
var VueTable = {
props: ['value'],
template: "\n<!-- could be more dynamic :-) -->\n<table class=\"vue-table\">\n <tr>\n <th @click=\"sortBy('name')\" :class=\"{\n ascending : sortKey === 'name' && !reverse,\n descending: sortKey === 'name' && reverse\n }\">Name</th>\n <th @click=\"sortBy('category')\" :class=\"{\n ascending : sortKey === 'category' && !reverse,\n descending: sortKey === 'category' && reverse\n }\">Category</th>\n <th @click=\"sortBy('value')\" :class=\"{\n ascending : sortKey === 'value' && !reverse,\n descending: sortKey === 'value' && reverse\n }\">Value</th>\n </tr>\n <tr v-for=\"item in value\">\n <td></td>\n <td></td>\n <td></td>\n </tr>\n</table>",
data: function () {
return {
reverse: false,
sortKey: null
};
},
methods: {
sortBy: function (sortKey) {
// note!
this.value.sort(function (a, b) {
// numeric sort
if (typeof a[sortKey] === 'number') {
return a[sortKey] - b[sortKey];
}
// alphanumeric sort
var a = a[sortKey].toUpperCase();
var b = b[sortKey].toUpperCase();
return a < b ? -1 : a > b ? 1 : 0;
});
// toggle reverse if we click same sort again (default is )
this.reverse = (this.sortKey === sortKey) ? !this.reverse : false;
// reverse array if true
if (this.reverse)
this.value.reverse();
// store key for next event
this.sortKey = sortKey;
}
}
};
new Vue({
el: '#app',
components: { 'vue-table': VueTable },
data: { list: list }
});

</script>
</body></html>


© vuejsexamples.net - Privacy Policy - Cookie Policy