Issue displaying table in VueJS using Tabulator - tabulator

Question

I am trying to set up a basic Tabulator table in Vue.JS and I see the table but the styling is broken.
I set up a new(basic) VueJS project and followed the instructions for Vue setup listed here: http://tabulator.info/docs/4.1/frameworks#vue
I added some sample data and the ran the app (npm run dev)
Here is my code:
Testpage.vue
<script>
var Tabulator = require('tabulator-tables')
export default {
name: 'Test',
data: function () {
return {
tabulator: null, // variable to hold your table
tableData: [
{name: 'Billy Bob', age: '12'},
{name: 'Mary May', age: '1'}
] // data for table to display
}
},
watch: {
// update table if data changes
tableData: {
handler: function (newData) {
this.tabulator.replaceData(newData)
},
deep: true
}
},
created: function () {
console.log('Test', this.$refs)
},
mounted () {
// instantiate Tabulator when element is mounted
this.tabulator = new Tabulator(this.$refs.table, {
data: this.tableData, // link data to table
columns: [
{title: 'Name', field: 'name', sorter: 'string', width: 200, editor: true},
{title: 'Age', field: 'age', sorter: 'number', align: 'right', formatter: 'progress'}
]
})
},
template: '<div ref="table"></div>'
}
</script>
App.vue:
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
Router(index.js)
import Vue from 'vue'
import Router from 'vue-router'
import Test from '#/components/TestPage'
import HelloWorld from '#/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{ path: '/test', name: 'Test', component: Test }
]
})
I expect to see a styled table like the demo shows in the documentation.
A table with no styling appears on the page. (No borders, colors, etc)

Answer 1

you need to include the /dist/css/tabulator.css file from the Tabulator directory in your project with the rest of your CSS to bring in the table styling.
How you do that will depend on the evironment you are developing in

Answer 2

I tried to set up the described minimal Vue.JS Project on my own but encountered the following message in the console
> [Vue warn]: You are using the runtime-only build of Vue where the
> template compiler is not available. Either pre-compile the templates
> into render functions, or use the compiler-included build.
To avoid this message, it was necessary to modify the Testpage.vue. In my case it worked to move the key 'template' with its value from script section to its own 'template' section.
<template>
<div ref="table"></div>
</template>
<script>
const Tabulator = require('tabulator-tables');
export default {
name: 'Test',
data() {
return {
tabulator: null, // variable to hold your table
tableData: [
{ name: 'Billy Bob', age: '12' },
{ name: 'Mary May', age: '1' },
], // data for table to display
};
},
watch: {
// update table if data changes
tableData: {
handler(newData) {
this.tabulator.replaceData(newData);
},
deep: true,
},
},
created() {
// console.log('Test', this.$refs);
},
mounted() {
// instantiate Tabulator when element is mounted
this.tabulator = new Tabulator(this.$refs.table, {
data: this.tableData, // link data to table
columns: [
{
title: 'Name', field: 'name', sorter: 'string', width: 200, editor: true,
},
{
title: 'Age', field: 'age', sorter: 'number', align: 'right', formatter: 'progress',
},
],
});
},
};
</script>