Name		Name	Last commit message	Last commit date
.github		.github
build		build
examples		examples
packages		packages
tests/unit		tests/unit
.browserslistrc		.browserslistrc
.eslintignore		.eslintignore
.eslintrc.js		.eslintrc.js
.gitignore		.gitignore
.prettierignore		.prettierignore
.prettierrc.js		.prettierrc.js
CHANGE-LOG.md		CHANGE-LOG.md
LICENSE		LICENSE
README-CN.md		README-CN.md
README.md		README.md
babel.config.js		babel.config.js
components.json		components.json
jest.config.js		jest.config.js
package.json		package.json
yarn.lock		yarn.lock

Repository files navigation

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

Table component

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>