{"id":12644,"library":"vuetable-2","title":"Vuetable-2: Vue 2.x Datatable Component","description":"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.","status":"active","version":"1.7.5","language":"javascript","source_language":"en","source_url":"https://github.com/ratiw/vuetable-2","tags":["javascript","vue","component","table","datatable","pagination-components","json"],"install":[{"cmd":"npm install vuetable-2","lang":"bash","label":"npm"},{"cmd":"yarn add vuetable-2","lang":"bash","label":"yarn"},{"cmd":"pnpm add vuetable-2","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Main component for rendering the datatable. Designed for Vue 2 applications.","wrong":"const Vuetable = require('vuetable-2');","symbol":"Vuetable","correct":"import Vuetable from 'vuetable-2';"},{"note":"The default pagination component. Path might vary in future major versions. Always verify sub-component paths.","wrong":"import { VuetablePagination } from 'vuetable-2';","symbol":"VuetablePagination","correct":"import VuetablePagination from 'vuetable-2/src/components/VuetablePagination';"},{"note":"Provides common logic for pagination components. Useful for creating custom pagination UIs.","wrong":"import { VuetablePaginationMixin } from 'vuetable-2';","symbol":"VuetablePaginationMixin","correct":"import VuetablePaginationMixin from 'vuetable-2/src/components/VuetablePaginationMixin';"}],"quickstart":{"code":"import Vue from 'vue';\nimport Vuetable from 'vuetable-2';\nimport VuetablePagination from 'vuetable-2/src/components/VuetablePagination';\n\nnew Vue({\n  el: '#app',\n  components: { Vuetable, VuetablePagination },\n  data: {\n    fields: [\n      { name: 'id', title: 'ID' },\n      { name: 'name', title: 'Name' },\n      { name: 'email', title: 'Email' },\n    ],\n    apiUrl: 'https://example.com/api/users',\n    css: {\n      table: 'table table-striped table-bordered',\n      // ... other css classes as per documentation\n    },\n  },\n  template: `\n    <div>\n      <vuetable ref=\"vuetable\"\n        :api-url=\"apiUrl\"\n        :fields=\"fields\"\n        pagination-path=\"pagination\"\n        @vuetable:pagination-data=\"onPaginationData\"\n      ></vuetable>\n      <vuetable-pagination ref=\"pagination\"\n        @vuetable:change-page=\"onChangePage\"\n      ></vuetable-pagination>\n    </div>\n  `,\n  methods: {\n    onPaginationData(paginationData) {\n      this.$refs.pagination.setPaginationData(paginationData);\n    },\n    onChangePage(page) {\n      this.$refs.vuetable.changePage(page);\n    },\n  },\n});","lang":"javascript","description":"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."},"warnings":[{"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.","message":"Major 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.","severity":"breaking","affected_versions":">=2.0.0-beta.1"},{"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.","message":"The `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.","severity":"gotcha","affected_versions":">=1.7.2"},{"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.","message":"In `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.","severity":"gotcha","affected_versions":">=2.0.0-beta.2"},{"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.","message":"The `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.","severity":"gotcha","affected_versions":">=2.0.0-beta.2"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `Vuetable` is imported and added to the `components` option in your Vue instance or component definition: `components: { Vuetable }`.","cause":"The Vuetable component has not been correctly registered with your Vue application.","error":"[Vue warn]: Unknown custom element: <vuetable>"},{"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.","cause":"The API response structure does not match `vuetable-2`'s expected format, particularly the `data` and `pagination` keys, or the `pagination-path` is incorrect.","error":"Cannot read property 'data' of undefined (when fetching API data)"},{"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.","cause":"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.","error":"Sorting does not work when clicking table headers"}],"ecosystem":"npm"}