vue-easytable

Based on vue2.x flexible table components.

Here are its Features:

Base components

  • Loading component
  • Pagination component
  • Contextmenu component
  • Icon component
  • Locale component

Table component

  • Internationalization
  • Theme Custom & Built in theme
  • Virtual Scroll
  • Column Fixed
  • Column Hidden
  • Header Fixed
  • Header Grouping
  • Filter
  • Sort
  • Cell Style
  • Cell Custom
  • Cell Span
  • Cell Selection(keyboard operation)
  • Cell Autofill
  • Cell Edit
  • Clipboard
  • Contextmenu
  • Cell Ellipsis
  • Row Radio
  • Row Checkbox
  • Row Expand
  • Row Style
  • Footer Summary
  • Event Custom

Step 1: Install

npm install vue-easytable

or

yarn add vue-easytable

Step 2: Usage

Write the following in main.js:

import Vue from "vue";
import "vue-easytable/libs/theme-default/index.css";
import VueEasytable from "vue-easytable";

Vue.use(VueEasytable);

new Vue({
    el: "#app",
    render: (h) => h(App),
});

Example:

<template>
  <ve-table :columns="columns" :table-data="tableData" />
</template>

<script>
  export default {
    data() {
      return {
        columns: [
          { field: "name", key: "a", title: "Name", align: "center" },
          { field: "date", key: "b", title: "Date", align: "left" },
          { field: "hobby", key: "c", title: "Hobby", align: "right" },
          { field: "address", key: "d", title: "Address" },
        ],
        tableData: [
          {
            name: "John",
            date: "1900-05-20",
            hobby: "coding and coding repeat",
            address: "No.1 Century Avenue, Shanghai",
          },
          {
            name: "Dickerson",
            date: "1910-06-20",
            hobby: "coding and coding repeat",
            address: "No.1 Century Avenue, Beijing",
          },
          {
            name: "Larsen",
            date: "2000-07-20",
            hobby: "coding and coding repeat",
            address: "No.1 Century Avenue, Chongqing",
          },
          {
            name: "Geneva",
            date: "2010-08-20",
            hobby: "coding and coding repeat",
            address: "No.1 Century Avenue, Xiamen",
          },
          {
            name: "Jami",
            date: "2020-09-20",
            hobby: "coding and coding repeat",
            address: "No.1 Century Avenue, Shenzhen",
          },
        ],
      };
    },
  };
</script>

API & Examples

License

http://www.opensource.org/licenses/mit-license.php

Reference

Below are the reference links:

No. Link
1. Read more here.
2. Follow code author here.