vuetable-2

library1.7.5jsnpmunverified

Vuetable-2 is a flexible datatable component designed for Vue 2.x applications, providing robust capabilities for displaying and interacting with tabular data. The package is currently at its stable version 1.7.5, with an active development branch (`v2.0.0-beta`) introducing features like SSR support and a more modular field component system. While a strict release cadence is not followed, updates are delivered to enhance features and resolve issues. Its key differentiators include comprehensive API-mode handling, customizable field definitions, integrated pagination (including zero-based options in v2), a rich event system for interaction, and support for fixed table headers, making it adaptable for complex data presentation scenarios. It simplifies data management tasks in Vue 2.x SPAs.

web-framework

npm install vuetable-2

github ↗package ↗

INSTALL

IMPORT

SIG · VUETABLE-2

vuetable-2

web-frameworkjavascriptv1.7.5

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.

Vuetable

✓ import Vuetable from 'vuetable-2';

✗ const Vuetable = require('vuetable-2');

Main component for rendering the datatable. Designed for Vue 2 applications.

VuetablePagination

✓ import VuetablePagination from 'vuetable-2/src/components/VuetablePagination';

✗ import { VuetablePagination } from 'vuetable-2';

The default pagination component. Path might vary in future major versions. Always verify sub-component paths.

VuetablePaginationMixin

✓ import VuetablePaginationMixin from 'vuetable-2/src/components/VuetablePaginationMixin';

✗ import { VuetablePaginationMixin } from 'vuetable-2';

Provides common logic for pagination components. Useful for creating custom pagination UIs.

This example demonstrates basic setup of `vuetable-2` with API-driven data, including a standard pagination component. It defines fields, connects to a mock API endpoint, and handles pagination data and page changes through events. This snippet assumes a basic Vue 2 setup and a compatible CSS framework.

import Vue from 'vue'; import Vuetable from 'vuetable-2'; import VuetablePagination from 'vuetable-2/src/components/VuetablePagination'; new Vue({ el: '#app', components: { Vuetable, VuetablePagination }, data: { fields: [ { name: 'id', title: 'ID' }, { name: 'name', title: 'Name' }, { name: 'email', title: 'Email' }, ], apiUrl: 'https://example.com/api/users', css: { table: 'table table-striped table-bordered', // ... other css classes as per documentation }, }, template: ` <div> <vuetable ref="vuetable" :api-url="apiUrl" :fields="fields" pagination-path="pagination" @vuetable:pagination-data="onPaginationData" ></vuetable> <vuetable-pagination ref="pagination" @vuetable:change-page="onChangePage" ></vuetable-pagination> </div> `, methods: { onPaginationData(paginationData) { this.$refs.pagination.setPaginationData(paginationData); }, onChangePage(page) { this.$refs.vuetable.changePage(page); }, }, });

Debug

Known issues

breakingMajor internal refactor for `v2.0.0` converts 'special fields' into customizable 'Field components'. While backward compatibility is attempted, custom field implementations or advanced usage of internal field mechanisms might require migration.

fix

Review the new documentation for v2.0.0 (when stable) regarding custom field components. Convert any existing special field logic to the new `Field component` pattern or verify existing usage for compatibility.

affects: >=2.0.0-beta.1

gotchaThe `query-params` prop, which was typically an object, can also be a `Function` since `v1.7.2`. This function receives `sortOrder`, `currentPage`, and `perPage` as parameters and should return the query parameters object.

fix

If experiencing unexpected behavior with `query-params`, ensure it's either an object or a function that correctly returns the desired query parameters. If using a function, verify its signature and return value.

affects: >=1.7.2

gotchaIn `v2.0.0-beta.2` and later, the internal `__sequence` field, used for row numbering, now starts from `1` instead of `0` when pagination is active. This can affect custom calculations or displays relying on zero-based indexing for row sequence.

fix

Adjust any logic that relies on the `__sequence` field to account for its new 1-based indexing in `v2.0.0-beta` versions. Consider implementing a custom sequence if specific indexing is critical.

affects: >=2.0.0-beta.2

gotchaThe `data-manager` prop in `v2.0.0-beta.2` onwards now supports Promises. While this is an enhancement, it might introduce subtle timing issues or require adjustments if your `data-manager` implementation was strictly synchronous or had different asynchronous handling expectations.

fix

Ensure your `data-manager` implementation correctly handles both synchronous and asynchronous (Promise-based) data retrieval if targeting `v2.0.0-beta`. Test thoroughly to avoid race conditions or unhandled promise rejections.

affects: >=2.0.0-beta.2

Errors

Common errors & fixes

[Vue warn]: Unknown custom element: <vuetable>

The Vuetable component has not been correctly registered with your Vue application.

fix

Ensure `Vuetable` is imported and added to the `components` option in your Vue instance or component definition: `components: { Vuetable }`.

Cannot read property 'data' of undefined (when fetching API data)

The API response structure does not match `vuetable-2`'s expected format, particularly the `data` and `pagination` keys, or the `pagination-path` is incorrect.

fix

Configure the `data-path` and `pagination-path` props to match your API response structure, or transform your API response to fit the default `data` and `pagination` top-level keys.

Sorting does not work when clicking table headers

Sorting is either not enabled for the field, or the `sort-order` prop is not correctly configured for client-side sorting, or the API is not handling the sort parameters.

fix

Ensure `sortable: true` is set in the `fields` definition. If using API mode, verify the `api-url` correctly receives and processes `sort` parameters (e.g., `sort=id|desc`). For client-side sorting (`api-mode='false'`), ensure `sort-order` is properly defined.

Upgrade

Version history

1.7.5latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

9 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/ratiw/vuetable-2 ↗

packagehttps://www.npmjs.com/package/vuetable-2 ↗