Registry / web-framework / vue-easytable

vue-easytable

JSON →
library2.27.1jsnpmunverified

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.

npm install vue-easytable
INSTALL
IMPORT
SIG · VUE-EASYTABLE
V
vue-easytable
web-frameworkjavascriptv2.27.1
Install
Import
Disk
Pass rate
0/ 6
Env Coverage0 / 6
glibc
1822
musl
1822
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 18226 runs
build_error
glibc
node 18226 runs
build_error
Code
Verified usage

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

VeTable
import { VeTable } from 'vue-easytable'
const VeTable = require('vue-easytable')
The primary component for rendering tables. Used as a named import.
CSS Styles
import 'vue-easytable/libs/themes-base/index.css'
The base CSS styles must be imported once globally in your application for the table to render correctly.
VeLocale
import { VeLocale } from 'vue-easytable'; import zhCN from 'vue-easytable/libs/locale/lang/zh-CN'
For internationalization, import VeLocale and the desired language pack, then use VeLocale.use(langPack) to activate.

Demonstrates a minimal Vue EasyTable setup with static data and column definitions, rendering a basic table component.

import Vue from 'vue'; import { VeTable } from 'vue-easytable'; import 'vue-easytable/libs/themes-base/index.css'; new Vue({ el: '#app', components: { VeTable }, data() { return { columns: [ { field: 'id', key: 'a', title: 'ID', align: 'center' }, { field: 'name', key: 'b', title: 'Name', align: 'left' }, { field: 'date', key: 'c', title: 'Date', align: 'right' } ], tableData: [ { id: 1, name: 'John Doe', date: '2023-01-01' }, { id: 2, name: 'Jane Smith', date: '2023-01-02' }, { id: 3, name: 'Robert Johnson', date: '2023-01-03' } ] }; }, template: ` <div id="app"> <h3>Basic Vue EasyTable Example</h3> <ve-table :columns="columns" :table-data="tableData" /> </div> ` });
Debug
Known issues
breakingThe sorting click area for table headers has changed from only the sort icon to the entire `<th>` element.
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.
affects: >=2.24.0
breakingA context menu type name for header operations has been renamed from `CANCLE_LEFT_FIXED_COLUMN_TO` to `CANCEL_LEFT_FIXED_COLUMN_TO`.
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.
affects: >=2.21.8
gotchaThis 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.
fix
Ensure your project is running Vue 2.6.0 or higher. For Vue 3 projects, consider alternative table libraries designed for Vue 3.
affects: All versions
gotchaThe `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.
fix
Explicitly install `lodash` in your project: `npm install lodash` or `yarn add lodash`.
affects: All versions
Errors
Common errors & fixes
Unknown custom element: <ve-table> - did you register the component correctly?
The VeTable component was used in a Vue template but not registered with the Vue instance or parent component.
fix
Ensure `VeTable` is imported and added to the `components` option of your Vue component or globally registered using `Vue.component('ve-table', VeTable)`.
Resizer column needs set column width
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.
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 }`).
Upgrade
Version history
2.27.1latest on npm
Audit
Dependencies
lodashrequiredRequired for various internal utility functions. It is listed as a peer dependency.
vuerequiredThe core Vue.js framework, specifically version 2.x. This library is not compatible with Vue 3.
Agent activity
23 hits · last 30 days
node
18
Meta
2
Amazon
1
OpenAI (training)
1
Resources
vue-easytable — npm install vue-easytable · libregistry