{"id":12466,"library":"vue-easytable","title":"Vue EasyTable","description":"Vue EasyTable is a robust data table component specifically designed for Vue 2.x applications, offering a comprehensive suite of features for displaying and interacting with tabular data. It supports virtual scrolling, allowing it to efficiently render up to 300,000 rows, along with functionalities such as column fixing, header grouping, filtering, sorting, column resizing, and in-cell editing. The current stable version is 2.27.1, with a release cadence that includes regular minor feature additions (like new languages) and bug fixes. Key differentiators include its focus on high performance with large datasets, extensive customization options for cell and header rendering, and built-in internationalization and theme support. It requires `vue` (>=2.6.0) and `lodash` as peer dependencies, making it suitable for existing Vue 2 projects that need a feature-rich, performant table solution.","status":"active","version":"2.27.1","language":"javascript","source_language":"en","source_url":"https://github.com/Happy-Coding-Clans/vue-easytable","tags":["javascript","vue","table","grid","vue-component","components","list","scrolling","infinite"],"install":[{"cmd":"npm install vue-easytable","lang":"bash","label":"npm"},{"cmd":"yarn add vue-easytable","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-easytable","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for various internal utility functions. It is listed as a peer dependency.","package":"lodash","optional":false},{"reason":"The core Vue.js framework, specifically version 2.x. This library is not compatible with Vue 3.","package":"vue","optional":false}],"imports":[{"note":"The primary component for rendering tables. Used as a named import.","wrong":"const VeTable = require('vue-easytable')","symbol":"VeTable","correct":"import { VeTable } from 'vue-easytable'"},{"note":"The base CSS styles must be imported once globally in your application for the table to render correctly.","symbol":"CSS Styles","correct":"import 'vue-easytable/libs/themes-base/index.css'"},{"note":"For internationalization, import VeLocale and the desired language pack, then use VeLocale.use(langPack) to activate.","symbol":"VeLocale","correct":"import { VeLocale } from 'vue-easytable'; import zhCN from 'vue-easytable/libs/locale/lang/zh-CN'"}],"quickstart":{"code":"import Vue from 'vue';\nimport { VeTable } from 'vue-easytable';\nimport 'vue-easytable/libs/themes-base/index.css';\n\nnew Vue({\n  el: '#app',\n  components: { VeTable },\n  data() {\n    return {\n      columns: [\n        { field: 'id', key: 'a', title: 'ID', align: 'center' },\n        { field: 'name', key: 'b', title: 'Name', align: 'left' },\n        { field: 'date', key: 'c', title: 'Date', align: 'right' }\n      ],\n      tableData: [\n        { id: 1, name: 'John Doe', date: '2023-01-01' },\n        { id: 2, name: 'Jane Smith', date: '2023-01-02' },\n        { id: 3, name: 'Robert Johnson', date: '2023-01-03' }\n      ]\n    };\n  },\n  template: `\n    <div id=\"app\">\n      <h3>Basic Vue EasyTable Example</h3>\n      <ve-table\n        :columns=\"columns\"\n        :table-data=\"tableData\"\n      />\n    </div>\n  `\n});","lang":"javascript","description":"Demonstrates a minimal Vue EasyTable setup with static data and column definitions, rendering a basic table component."},"warnings":[{"fix":"Adjust any custom CSS or event listeners that specifically targeted the sort icon for click events. Ensure your users are aware of the expanded click area for sorting.","message":"The sorting click area for table headers has changed from only the sort icon to the entire `<th>` element.","severity":"breaking","affected_versions":">=2.24.0"},{"fix":"Update any code referencing the old context menu type name in header configurations or custom context menu handlers to use the new `CANCEL_LEFT_FIXED_COLUMN_TO` string.","message":"A context menu type name for header operations has been renamed from `CANCLE_LEFT_FIXED_COLUMN_TO` to `CANCEL_LEFT_FIXED_COLUMN_TO`.","severity":"breaking","affected_versions":">=2.21.8"},{"fix":"Ensure your project is running Vue 2.6.0 or higher. For Vue 3 projects, consider alternative table libraries designed for Vue 3.","message":"This library is exclusively built for Vue 2.x. It does not support Vue 3, and attempting to use it in a Vue 3 project will result in runtime errors.","severity":"gotcha","affected_versions":"All versions"},{"fix":"Explicitly install `lodash` in your project: `npm install lodash` or `yarn add lodash`.","message":"The `lodash` package is a required peer dependency. Although it might work without it in some cases, certain features or internal operations depend on its presence.","severity":"gotcha","affected_versions":"All versions"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `VeTable` is imported and added to the `components` option of your Vue component or globally registered using `Vue.component('ve-table', VeTable)`.","cause":"The VeTable component was used in a Vue template but not registered with the Vue instance or parent component.","error":"Unknown custom element: <ve-table> - did you register the component correctly?"},{"fix":"For columns where resizing is enabled or desired, ensure you explicitly set a `width` property in your column definitions (e.g., `{ field: 'name', key: 'b', title: 'Name', width: 150 }`).","cause":"This is a console warning indicating that column resizing functionality is active, but some columns do not have an explicit `width` property defined, which can lead to unpredictable resizing behavior.","error":"Resizer column needs set column width"}],"ecosystem":"npm"}