Tabulator is great because it's pure JavaScript, but sometimes when creating Vue apps we need a better, simple integration, like reactive data, events, component editors and more.

How we can make Tabulator better?

Welcome Vue-Tabulator.


Vue-tabulator is a wrapper to Tabulator, so you need to install tabulator to use vue-tabulator.

Install vue-tabulator using npm:

npm install --save vue-tabulator

Or yarn:

yarn add vue-tabulator


Vue-tabulator documentation uses npm commands, but yarn will also work. You can compare yarn and npm commands in the yarn docs, here.

Then register the vue-tabulator plugin in your app's entry point:

import Vue from 'vue';
import VueTabulator from 'vue-tabulator';



Importing the scss files is not required, but if you do, you should configure your project to compile to css.

And import theme scss files:

<style lang='scss'>

@import "~vue-tabulator/dist/scss/bootstrap/tabulator_bootstrap4";


In your component, you can use the VueTabulator component:

<VueTabulator v-model="data" :options="options" />

The v-model and options are required, and can be used to pass the contents of table and the configuration, respectively. You can change the component name on plugin install:

import Vue from 'vue';
import VueTabulator from 'vue-tabulator';

Vue.use(VueTabulator, {
    name: 'AwesomeTable'

Or register the component locally:

import { TabulatorComponent } from "vue-tabulator";

export default {
  name: "home",
  components: {
    'AwesomeLocalTable': TabulatorComponent


You can import the vue-tabulator in your browser:

<script src=""></script>

<link href="" rel="stylesheet">
<script type="text/javascript" src=""></script>
<script src=""></script>

<div id="app">
    <h1>Vue Tabulator</h1>
    <Vue-Tabulator v-model="dados" :options="options" />

new Vue({
    el: '#app',
    data() {
        return {
            dados: [{
                name: 'Teste',
                age: 13
            options: {
                columns: [{
                    title: 'Name',
                    field: 'name',
                    sorter: 'string',
                    width: 200,
                    editor: true,
                }, ],


The options object can accept any Tabulator options, which allows you to use the full power of Tabulator on start or configuration. The only option that isn't allowed is data because the data will be received in the v-model.


The options object uses the Vue watcher, so if you update the configuration, the Tabulator will be recreated using the new config.

Reactive options

The watcher from options will recreate the tabulator instance when the options is updated.


You can provide an array to populate your table, and the component will use the data property to initialize the Tabulator. Any change performed in your v-model will be reflected in the component, using a Vue watcher instead of Tabulator reactivity.

The Watcher will use the method setData to update your table. If you prefer, you can change the behavior with the integration option.


The integration option can provide a custom experience when using vue-tabulator, providing a better way to control internal behavior.


The update strategy is responsible for how data is updated in the Tabulator instance. The default value is DATA.

  • You can change the update strategy to REPLACE in order to use the method setReplace.
  • You can change the update strategy to UPDATE in order to use the method updateData.
        :integration="{ updateStrategy: 'REPLACE' }" 

Use update in editable tables

To avoid problems prefer use UPDATE strategy on editable tables


All events in Tabulator follow CamelCase convention, but the events in vue-tabulator will follow the kebab-case:

rowClick -> row-click


You can use the options object next to the vue event system to configure your instance. The vue-tabulator will call both methods: first emit the event then run the callback in the options object.

Row Callbacks

  • (Available in Release 1.2.0)

You can see all events available here.

The events will be emitted in the root component:


        :integration="{ updateStrategy: 'REPLACE' }" 

Cell Callbacks

  • (Available in Release 1.2.0)

You can see all events available here.

The events will be emitted in the root component:


        :integration="{ updateStrategy: 'REPLACE' }" 

The Callbacks Tabulator will be soon available in the vue-way:

  • Table Callbacks (Soon)
  • Column Callbacks (Soon)
  • Data Callbacks (Soon)
  • Ajax Callbacks (Soon)
  • Filter Callbacks (Soon)
  • Sorting Callbacks (Soon)
  • Layout Callbacks (Soon)
  • Pagination Callbacks (Soon)
  • Group Callbacks (Soon)
  • Selection Callbacks (Soon)
  • Row Movement Callbacks (Soon)
  • Validation Callbacks (Soon)
  • History Callbacks (Soon)
  • Clipboard Callbacks (Soon)
  • Download Callbacks (Soon)
  • Data Tree Callbacks (Soon)

Advanced Interaction

In some cases you will need to use a feature provided by Tabulator, that is not supported by vue-tabulator. In that case, you can use the tabulator instance from your component.

By using the ref in your component:

<VueTabulator ref="tabulator" v-model="data" :options="options" />

You have access to the method getInstance which will return the Tabulator instance.


const tabulatorInstance = this.$refs.tabulator.getInstance();

Be careful

Using the Tabulator instance can break some behaviors in vue-tabulator.


In development we expected some strange behaviors when activating the Tabulator Reactivity module. Since Vue has a reactivity system, we believe it is not necessary to activate Tabulator reactivity.