{"id":12595,"library":"vue-tabulator","title":"Vue.js Wrapper for Tabulator","description":"vue-tabulator is a Vue.js 2 component that serves as a declarative wrapper for the Tabulator JavaScript library, enabling easy integration of highly configurable and interactive data grids into Vue applications. The current stable version is 1.3.0. While its release cadence is not strictly regular, it receives updates driven by bug fixes and dependency upgrades, particularly for `tabulator-tables` and `vue` itself. Its key differentiator is providing a Vue-idiomatic approach to using Tabulator, allowing developers to manage table data via `v-model` and configure the grid through a `options` prop, abstracting away direct DOM manipulation. It is specifically designed for Vue 2, requiring `vue@^2.6.12` as a peer dependency, which is a critical consideration for project compatibility.","status":"active","version":"1.3.0","language":"javascript","source_language":"en","source_url":"https://github.com/angeliski/vue-tabulator","tags":["javascript","table","grid","datagrid","tabulator","editable","cookie","sort","format"],"install":[{"cmd":"npm install vue-tabulator","lang":"bash","label":"npm"},{"cmd":"yarn add vue-tabulator","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-tabulator","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"The core data grid library that vue-tabulator wraps; required for all functionality.","package":"tabulator-tables","optional":false},{"reason":"Essential peer dependency, vue-tabulator is a Vue 2 component.","package":"vue","optional":false},{"reason":"Required for Vue 2 build tooling and template compilation.","package":"vue-template-compiler","optional":false}],"imports":[{"note":"The primary way to register vue-tabulator as a global plugin in a Vue 2 application's entry point.","wrong":"import { VueTabulator } from 'vue-tabulator';\nVue.use(VueTabulator);","symbol":"VueTabulator (plugin)","correct":"import VueTabulator from 'vue-tabulator';\nVue.use(VueTabulator);"},{"note":"For local component registration within a Vue component, typically after global plugin registration, or if not using global registration.","wrong":"import { VueTabulator } from 'vue-tabulator'; // If component is not a named export\n\nexport default {\n  components: { VueTabulator },\n  // ...\n}","symbol":"VueTabulator (component)","correct":"import VueTabulator from 'vue-tabulator';\n\nexport default {\n  components: { VueTabulator },\n  // ...\n}"},{"note":"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`.","wrong":"import '~vue-tabulator/dist/scss/bootstrap/tabulator_bootstrap4';","symbol":"Tabulator Theme SCSS","correct":"@import \"~vue-tabulator/dist/scss/bootstrap/tabulator_bootstrap4\";"}],"quickstart":{"code":"import Vue from 'vue';\nimport VueTabulator from 'vue-tabulator';\nimport 'tabulator-tables/dist/css/tabulator.min.css'; // Basic Tabulator CSS\n\nVue.use(VueTabulator);\n\nnew Vue({\n  el: '#app',\n  data: () => ({\n    tableData: [\n      {id:1, name:\"Oli\", age:\"12\", col:\"red\", dob:\"\"},\n      {id:2, name:\"Mary\", age:\"1\", col:\"blue\", dob:\"14/05/1982\"},\n      {id:3, name:\"Christine\", age:\"42\", col:\"green\", dob:\"22/05/1982\"},\n      {id:4, name:\"Brendon\", age:\"16\", col:\"orange\", dob:\"01/08/1980\"},\n      {id:5, name:\"Margret\", age:\"33\", col:\"yellow\", dob:\"31/01/1999\"}\n    ],\n    tableOptions: {\n      layout:\"fitColumns\",\n      columns:[\n        {title:\"Name\", field:\"name\", width:150},\n        {title:\"Age\", field:\"age\", hozAlign:\"left\", formatter:\"progress\"},\n        {title:\"Favourite Color\", field:\"col\"},\n        {title:\"Date Of Birth\", field:\"dob\", sorter:\"date\", hozAlign:\"center\"}\n      ]\n    }\n  }),\n  template: `\n    <div id=\"app\">\n      <h1>My Vue Tabulator Table</h1>\n      <VueTabulator v-model=\"tableData\" :options=\"tableOptions\" />\n    </div>\n  `,\n});","lang":"typescript","description":"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."},"warnings":[{"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`).","message":"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.","severity":"breaking","affected_versions":"*"},{"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.","message":"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.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Ensure both `vue-tabulator` and `tabulator-tables` are installed: `npm install vue-tabulator tabulator-tables`.","message":"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.","severity":"gotcha","affected_versions":">=1.0.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.","message":"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`.","severity":"gotcha","affected_versions":"<1.3.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Run `npm install tabulator-tables` or `yarn add tabulator-tables` in your project.","cause":"`tabulator-tables` is a peer dependency and must be installed separately.","error":"Module not found: Error: Can't resolve 'tabulator-tables'"},{"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.","cause":"The `VueTabulator` component was not properly registered with Vue.","error":"[Vue warn]: Unknown custom element: <VueTabulator>"},{"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.","cause":"Path resolution issue for the SCSS theme import or missing SCSS loader configuration.","error":"Syntax Error: SassError: Can't find stylesheet to import."},{"fix":"This library is incompatible with Vue 3. Use a Vue 3 compatible alternative or downgrade your project to Vue 2.","cause":"Attempting to use `vue-tabulator`, which is designed for Vue 2, in a Vue 3 project.","error":"TypeError: Cannot read properties of undefined (reading 'call') or similar runtime errors with Vue 3."}],"ecosystem":"npm"}