Here, I have setup a table using tabulator in my VueJs project. I have followed the instructions for tabulator setup in VueJs from: http://tabulator.info/docs/4.1/frameworks#vue .I have fetch data from my database. I can see my table with data from my database. But, for some reason I could not see my save button.
Here is my code:
<template>
<div ref="table">
<div class="my-2">
' <v-btn color="Save">Primary</v-btn>
</div>
</div>
</template>
<script>
var Tabulator = require('tabulator-tables')
export default {
name: 'Location',
data: function () {
return {
tabulator: null, // variable to hold your table
location: [] // data for table to display
}
},
watch: {
// update table if data changes
location: {
handler: function (newData) {
this.tabulator.replaceData(newData)
},
deep: true
}
},
created: function () {
console.log('Location', this.$refs)
this.initialize()
},
methods: {
initialize () {
axios.get('/api/location')
.then(response => this.location = response.data.location)
}
},
mounted () {
// instantiate Tabulator when element is mounted
this.tabulator = new Tabulator(this.$refs.table, {
data: this.location,
layout:"fitDataStretch",
addRowPos:"bottom",
movableColumns:true,
// link data to table
columns: [
{title: 'Code', field: 'code', sorter: 'string',width: 100, editor: 'input' , validator: "required"},
{title: 'Name', field: 'name', sorter: 'string', width: 200 , validator: "required",editor:"autocomplete", editorParams:{allowEmpty:true, showListOnEmpty:true, values:true}},
{title: 'Under', field: 'under', sorter: 'string', width: 200, editor: 'input' , validator: "required"},
{title: 'Status', field: 'status', sorter: 'string',width: 100, editor: 'input' , validator: "required"},
{title: 'Description', field: 'description', sorter: 'string', width: 200, editor: 'input' , validator: "required"},
{title: 'Depth', field: 'depth', sorter: 'string', width: 100, editor: 'input' , validator: "required"}
]
});
},
}
</script>
<style scoped>
</style>
The Tabulator package would replace anything inside the div used to render it, which also includes your button. So you might wanna go with this Template code:-
<template>
<div class="table-wrapper>
<div ref="table">
</div>
<div class="my-2">
<v-btn color="Save">Primary</v-btn>
</div>
</div>