Awesome Open Source
Awesome Open Source

npm vue2 NPM downloads codecov license Discord Gitter

vue-easytable

English | 中文

Become a Patreon

Sponsors

Support this project by becoming a sponsor. Your logo or name will show up here with a link you provided. Become a sponsor

Gold Sponsor

Silver Sponsor

Become a Patreon

Generous Sponsor

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

or

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>

Todo List

What are we doing

Environment Support

  • Modern browser and ie11 and above
IE / EdgeIE / Edge FirefoxFirefox ChromeChrome SafariSafari OperaOpera
IE11, Edge last 2 versions last 2 versions last 2 versions last 2 versions

How to contribute

If you want to contribute,just create a Pull Request

Contributors

Thanks to the following friends for their contributions 🙏

Discussion group

License

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

Alternatives To Vue Easytable
Select To Compare


Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,119,969
Vue (70,430
Table (22,942
Grid (12,444
Excel (7,347
Clipboard (3,858
Unit Test (2,790
Google Sheets (1,415
Context Menu (937
Sheet (193
Loading Spinner (163
Virtual Scroll (96
Vue Table (43