vue-easytable

A powerful data table based on vuejs. You can use it as data grid、Microso...

README

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

-   [x] Icon component

Table component

-   [x] Virtual Scroll
-   [x] Column Fixed
-   [x] Column Hidden
-   [x] Header Fixed
-   [x] Header Grouping
-   [x] Filter
-   [x] Sort
-   [x] Column Resize
-   [x] Cell Style
-   [x] Cell Custom
-   [x] Cell Span
-   [x] Cell Autofill
-   [x] Cell Edit
-   [x] Clipboard
-   [x] Contextmenu
-   [x] Cell Ellipsis
-   [x] Row Radio
-   [x] Row Checkbox
-   [x] Row Expand
-   [x] Row Style
-   [x] Footer Summary
-   [x] Event Custom
-   More

If there is no feature you want,

Install


  1. ```
  2. npm install vue-easytable
  3. ```

or

  1. ```
  2. yarn add vue-easytable
  3. ```

Usage


Write the following in main.js:

  1. ```javascript
  2. import Vue from "vue";
  3. import "vue-easytable/libs/theme-default/index.css";
  4. import VueEasytable from "vue-easytable";

  5. Vue.use(VueEasytable);

  6. new Vue({
  7.     el: "#app",
  8.     render: (h) => h(App),
  9. });
  10. ```

Example:

  1. ```javascript
  2. <template>
  3.   <ve-table :columns="columns" :table-data="tableData" />
  4. </template>

  5. <script>
  6.   export default {
  7.     data() {
  8.       return {
  9.         columns: [
  10.           { field: "name", key: "a", title: "Name", align: "center" },
  11.           { field: "date", key: "b", title: "Date", align: "left" },
  12.           { field: "hobby", key: "c", title: "Hobby", align: "right" },
  13.           { field: "address", key: "d", title: "Address" },
  14.         ],
  15.         tableData: [
  16.           {
  17.             name: "John",
  18.             date: "1900-05-20",
  19.             hobby: "coding and coding repeat",
  20.             address: "No.1 Century Avenue, Shanghai",
  21.           },
  22.           {
  23.             name: "Dickerson",
  24.             date: "1910-06-20",
  25.             hobby: "coding and coding repeat",
  26.             address: "No.1 Century Avenue, Beijing",
  27.           },
  28.           {
  29.             name: "Larsen",
  30.             date: "2000-07-20",
  31.             hobby: "coding and coding repeat",
  32.             address: "No.1 Century Avenue, Chongqing",
  33.           },
  34.           {
  35.             name: "Geneva",
  36.             date: "2010-08-20",
  37.             hobby: "coding and coding repeat",
  38.             address: "No.1 Century Avenue, Xiamen",
  39.           },
  40.           {
  41.             name: "Jami",
  42.             date: "2020-09-20",
  43.             hobby: "coding and coding repeat",
  44.             address: "No.1 Century Avenue, Shenzhen",
  45.           },
  46.         ],
  47.       };
  48.     },
  49.   };
  50. </script>
  51. ```

Todo List



Environment Support


-   Modern browser and ie11 and above

[[[[[
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
IE11,lastlastlastlast

How to contribute


If you want to contribute,just create a

Contributors


Thanks to the following friends for their contributions 🙏


Discussion group



License


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