Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

Vue Table

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

A table can be created from a JSON object.The table is populated automatically using v-for.

We added bootstrap for styling, but you can go without it.

Vue Table example

A Vue table example below with auto population.

vue table

The data is defined as a simple JSON object in this style:

data: [
{
"id": 0,
"name": "Item 0",
"price": "$0"
},
{
"id": 1,
"name": "Item 1",
"price": "$1"
},
...

Complete code:

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script type="text/javascript" src="//unpkg.com/[email protected]/dist/vue.js"></script>
<script type="text/javascript" src="//rawgit.com/wenzhixin/vue-bootstrap-table/develop/docs/static/dist/vue-bootstrap-table.js"></script>
<title>Vue Bootstrap Table</title>

<script type="text/javascript">//<![CDATA[
$(window).load(function(){
var vm = new Vue({
el: '#table',
components: {
'bootstrap-table': BootstrapTable
},
data: {
columns: [
{
title: 'Item ID',
field: 'id'
},
{
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}
],
data: [
{
"id": 0,
"name": "Item 0",
"price": "$0"
},
{
"id": 1,
"name": "Item 1",
"price": "$1"
},
{
"id": 2,
"name": "Item 2",
"price": "$2"
},
{
"id": 3,
"name": "Item 3",
"price": "$3"
},
{
"id": 4,
"name": "Item 4",
"price": "$4"
},
{
"id": 5,
"name": "Item 5",
"price": "$5"
}
],
options: {

}
}
});
});//]]>

</script>
</head>

<body>
<div id="table">
<div class="bootstrap-table">
<div class="fixed-table-toolbar">
<div class="bs-bars pull-left"></div>
<div class="columns columns-right btn-group pull-right"> </div></div>
<div class="fixed-table-container" style="padding-bottom: 0px;">
<div class="fixed-table-body">

<table class="table table-hover">
<thead>
<tr>
<th tabindex="0" style="" data-field="id">
<div class="th-inner both">Item ID</div>
<div class="fht-cell"></div>
</th>
<th tabindex="0" style="" data-field="name">
<div class="th-inner both">Item Name</div>
<div class="fht-cell"></div>
</th>
<th tabindex="0" style="" data-field="price">
<div class="th-inner both">Item Price</div>
<div class="fht-cell"></div>
</th>
</tr>
</thead>
<tbody>
<tr v-for="row in data">
<td></td><td></td><td></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="clearfix"></div></div>
</div>
</body>
</html>


© vuejsexamples.net - Privacy Policy - Cookie Policy