Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

vue.js table

Related course:
Fullstack Vue: The Complete Guide to Vue.js

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>

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

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

class="" lang="en"><head>

© vuejsexamples.net - Privacy Policy - Cookie Policy