Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

Vue Table

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

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:


<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 Tabletitle>

<script type="text/javascript">//
$(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 IDdiv>
<div class="fht-cell">div>
th>
<th tabindex="0" style="" data-field="name">
<div class="th-inner both">Item Namediv>
<div class="fht-cell">div>
th>
<th tabindex="0" style="" data-field="price">
<div class="th-inner both">Item Pricediv>
<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