Registry / web-framework / vue-tabulator

vue-tabulator

library1.3.0jsnpmunverified

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.

web-framework

npm install vue-tabulator

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-TABULATOR

vue-tabulator

web-frameworkjavascriptv1.3.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueTabulator (plugin)

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

✗ 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)

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

✗ import { VueTabulator } from 'vue-tabulator'; // If component is not a named export 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

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

✗ 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`.

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

Debug

Known issues

breakingThis 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`).

affects: *

breakingUpdates 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.

affects: >=1.0.0

gotchaThe `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`.

affects: >=1.0.0

gotchaPrior 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.

affects: <1.3.0

gotchaUsing 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.

affects: >=1.0.0

Errors

Common errors & fixes

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

`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>

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.

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.

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.

Upgrade

Version history

1.3.0latest on npm

Audit

Dependencies

tabulator-tablesrequiredThe core data grid library that vue-tabulator wraps; required for all functionality.

vuerequiredEssential peer dependency, vue-tabulator is a Vue 2 component.

vue-template-compilerrequiredRequired for Vue 2 build tooling and template compilation.

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/angeliski/vue-tabulator ↗

packagehttps://www.npmjs.com/package/vue-tabulator ↗