vue-easytable

Vue table component

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
vue-easytable
2.27.1a year ago7 years agoMinified + gzip package size for vue-easytable in KB

Readme

npm vue2 NPM downloads codecov license Discord Gitter
vue-easytable
English | 中文

<img src="https://c5.patreon.com/external/logo/become_a_patron_button.png" alt="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

<img width="150px" src="https://huangshuwei.gitee.io/site/sponsors/silver-sponsor/Mamadou-Wann.svg" alt="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 / Edge
IE / Edge | Firefox
Firefox | Chrome
Chrome | Safari
Safari | Opera
Opera | | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 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