Vue.js Wrapper for Tabulator

Common errors

• Module not found: Error: Can't resolve 'tabulator-tables'

  cause `tabulator-tables` is a peer dependency and must be installed separately.
  fix Run `npm install tabulator-tables` or `yarn add tabulator-tables` in your project.

• [Vue warn]: Unknown custom element: <VueTabulator>

  cause The `VueTabulator` component was not properly registered with Vue.
  fix Ensure `Vue.use(VueTabulator);` is called once in your app's entry point, or locally register the component in your Vue component's `components` option.

• Syntax Error: SassError: Can't find stylesheet to import.

  cause Path resolution issue for the SCSS theme import or missing SCSS loader configuration.
  fix Install `sass` and `sass-loader` (for Webpack) and ensure your build configuration correctly processes `.scss` imports. Verify the import path `~vue-tabulator/dist/scss/...` is correct and resolvable.

• TypeError: Cannot read properties of undefined (reading 'call') or similar runtime errors with Vue 3.

  cause Attempting to use `vue-tabulator`, which is designed for Vue 2, in a Vue 3 project.
  fix This library is incompatible with Vue 3. Use a Vue 3 compatible alternative or downgrade your project to Vue 2.

Warnings

• breaking This library is exclusively for Vue 2 applications. It is not compatible with Vue 3 due to fundamental API changes and the reliance on Vue 2's reactivity system and plugin registration. Attempting to use it in a Vue 3 project will result in runtime errors related to component rendering and plugin initialization.
  Fix: For Vue 3 projects, seek alternative Tabulator wrappers or integrate Tabulator directly. If you must use `vue-tabulator`, ensure your project uses Vue 2 (`vue@^2.x`).
• breaking Updates to the underlying `tabulator-tables` library (a peer dependency) between major versions can introduce breaking changes in Tabulator's API, which `vue-tabulator` wraps. For instance, `tabulator-tables` v5.x introduced significant changes from v4.x, and `vue-tabulator` v1.x is specifically designed for `tabulator-tables` v4.8.1.
  Fix: Always align the `tabulator-tables` version in your project with the version specified in `vue-tabulator`'s `peerDependencies` (currently `4.8.1`). Review `tabulator-tables` changelogs when upgrading to avoid unexpected behavior.
• gotcha The `tabulator-tables` library itself must be manually installed as a separate dependency (`npm install tabulator-tables`) in your project. `vue-tabulator` is merely a wrapper and does not bundle the core Tabulator library.
  Fix: Ensure both `vue-tabulator` and `tabulator-tables` are installed: `npm install vue-tabulator tabulator-tables`.
• gotcha Prior to `v1.3.0`, changes to the `options` prop passed to `<VueTabulator>` might not have been reactively updated by the component, leading to stale configurations or requiring a manual component re-render. This issue was explicitly fixed in `v1.3.0`.
  Fix: Upgrade to `vue-tabulator@1.3.0` or later to ensure dynamic updates to the `options` prop are correctly reflected by the underlying Tabulator instance.
• gotcha Using Tabulator's built-in themes (e.g., `bootstrap4`) requires configuring your build system (e.g., Webpack, Vite) to compile SCSS files. Directly importing `.scss` files without a proper loader will result in build errors or unstyled tables.
  Fix: Install a compatible SCSS loader (e.g., `sass`, `sass-loader` for Webpack) and ensure your build configuration correctly processes `.scss` imports. Alternatively, import pre-compiled CSS (`import 'tabulator-tables/dist/css/tabulator.min.css';`) but note that `vue-tabulator`'s own SCSS theme imports expect an SCSS environment.

Install

• npm install vue-tabulator npm
• yarn add vue-tabulator yarn
• pnpm add vue-tabulator pnpm

Imports

• VueTabulator (plugin)
  wrong:

  import { VueTabulator } from 'vue-tabulator';
  Vue.use(VueTabulator);

  correct:

  import VueTabulator from 'vue-tabulator';
  Vue.use(VueTabulator);

  The primary way to register vue-tabulator as a global plugin in a Vue 2 application's entry point.
• VueTabulator (component)
  wrong:

  import { VueTabulator } from 'vue-tabulator'; // If component is not a named export
  
  export default {
    components: { VueTabulator },
    // ...
  }

  correct:

  import VueTabulator from 'vue-tabulator';
  
  export default {
    components: { VueTabulator },
    // ...
  }

  For local component registration within a Vue component, typically after global plugin registration, or if not using global registration.
• Tabulator Theme SCSS
  wrong:

  import '~vue-tabulator/dist/scss/bootstrap/tabulator_bootstrap4';

  correct:

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

  Requires a CSS preprocessor (like Sass/SCSS) and a corresponding loader (e.g., `sass-loader` for Webpack) configured in your build system. Other themes are available in `dist/scss`.

Quickstart

Demonstrates how to globally register the `vue-tabulator` plugin, include Tabulator's base CSS, and render a basic data table using the `<VueTabulator>` component with `v-model` for data and `:options` for configuration in a Vue 2 application.

import Vue from 'vue';
import VueTabulator from 'vue-tabulator';
import 'tabulator-tables/dist/css/tabulator.min.css'; // Basic Tabulator CSS

Vue.use(VueTabulator);

new Vue({
  el: '#app',
  data: () => ({
    tableData: [
      {id:1, name:"Oli", age:"12", col:"red", dob:""},
      {id:2, name:"Mary", age:"1", col:"blue", dob:"14/05/1982"},
      {id:3, name:"Christine", age:"42", col:"green", dob:"22/05/1982"},
      {id:4, name:"Brendon", age:"16", col:"orange", dob:"01/08/1980"},
      {id:5, name:"Margret", age:"33", col:"yellow", dob:"31/01/1999"}
    ],
    tableOptions: {
      layout:"fitColumns",
      columns:[
        {title:"Name", field:"name", width:150},
        {title:"Age", field:"age", hozAlign:"left", formatter:"progress"},
        {title:"Favourite Color", field:"col"},
        {title:"Date Of Birth", field:"dob", sorter:"date", hozAlign:"center"}
      ]
    }
  }),
  template: `
    <div id="app">
      <h1>My Vue Tabulator Table</h1>
      <VueTabulator v-model="tableData" :options="tableOptions" />
    </div>
  `,
});