vue-easytable

English | 中文

Introduction

A powerful data table based on vue2.x You can use it as data grid、Microsoft Excel or Google sheets. It supports virtual scroll、cell edit etc.

Characteristics

Support 300000 rows of data display through virtual scroll
Free forever. Of course, you can also choose to donate

API & Examples

Features

Base components

<input checked="" disabled="" type="checkbox"> Loading component
<input checked="" disabled="" type="checkbox"> Pagination component
<input checked="" disabled="" type="checkbox"> Contextmenu component
<input checked="" disabled="" type="checkbox"> Icon component
<input checked="" disabled="" type="checkbox"> Locale component

Table component

<input checked="" disabled="" type="checkbox"> Internationalization
<input checked="" disabled="" type="checkbox"> Theme Custom & Built in theme
<input checked="" disabled="" type="checkbox"> Virtual Scroll
<input checked="" disabled="" type="checkbox"> Column Fixed
<input checked="" disabled="" type="checkbox"> Column Hidden
<input checked="" disabled="" type="checkbox"> Header Fixed
<input checked="" disabled="" type="checkbox"> Header Grouping
<input checked="" disabled="" type="checkbox"> Filter
<input checked="" disabled="" type="checkbox"> Sort
<input checked="" disabled="" type="checkbox"> Column Resize
<input checked="" disabled="" type="checkbox"> Cell Style
<input checked="" disabled="" type="checkbox"> Cell Custom
<input checked="" disabled="" type="checkbox"> Cell Span
<input checked="" disabled="" type="checkbox"> Cell Selection(keyboard operation)
<input checked="" disabled="" type="checkbox"> Cell Autofill
<input checked="" disabled="" type="checkbox"> Cell Edit
<input checked="" disabled="" type="checkbox"> Clipboard
<input checked="" disabled="" type="checkbox"> Contextmenu
<input checked="" disabled="" type="checkbox"> Cell Ellipsis
<input checked="" disabled="" type="checkbox"> Row Radio
<input checked="" disabled="" type="checkbox"> Row Checkbox
<input checked="" disabled="" type="checkbox"> Row Expand
<input checked="" disabled="" type="checkbox"> Row Style
<input checked="" disabled="" type="checkbox"> Footer Summary
<input checked="" disabled="" type="checkbox"> Event Custom
More

If there is no feature you want, Please Tell Us

Install

npm install vue-easytable

yarn add vue-easytable

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>