Vue EasyTable

Common errors

• Unknown custom element: <ve-table> - did you register the component correctly?

  cause 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

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

Warnings

• breaking The 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.
• breaking A 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.
• gotcha 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.
  Fix: Ensure your project is running Vue 2.6.0 or higher. For Vue 3 projects, consider alternative table libraries designed for Vue 3.
• gotcha 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.
  Fix: Explicitly install `lodash` in your project: `npm install lodash` or `yarn add lodash`.

Install

• npm install vue-easytable npm
• yarn add vue-easytable yarn
• pnpm add vue-easytable pnpm

Imports

• VeTable
  wrong:

  const VeTable = require('vue-easytable')

  correct:

  import { VeTable } from '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.

Quickstart

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