# Introduction

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.

# Installation

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

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

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

Vue.use(VueTabulator);

And import theme scss files:

<style lang='scss'>

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

</style>

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
  },
  
};

# Browser

You can import the vue-tabulator in your browser:

<script src="https://unpkg.com/vue@latest"></script>

<link href="https://unpkg.com/tabulator-tables@4.4.1/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.4.1/dist/js/tabulator.min.js"></script>
<script src="https://unpkg.com/vue-tabulator@latest"></script>

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


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

# Options

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.

# v-model

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.

# Integration

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

# updateStrategy

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.

<VueTabulator 
        v-model="data" 
        :options="options" 
        :integration="{ updateStrategy: 'REPLACE' }" 
  />

# Events

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

rowClick -> row-click

# Row Callbacks

• (Available in Release 1.2.0)

You can see all events available here.

The events will be emitted in the root component:

<VueTabulator 
        v-model="data" 
        :options="options" 
        :integration="{ updateStrategy: 'REPLACE' }" 
        @row-click="myMethod"
  />

# Cell Callbacks

• (Available in Release 1.2.0)

You can see all events available here.

The events will be emitted in the root component:

<VueTabulator 
        v-model="data" 
        :options="options" 
        :integration="{ updateStrategy: 'REPLACE' }" 
        @cell-click="myMethod"
  />

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();
tabulatorInstance.clearData();

# Caveats

• Tabulator reactivity

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.