vue-easytable

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

TableVueVirtual list
Happy-Coding-Clans/vue-easytablehappy-coding-clans.github.io/vue-easytable/vue-easytable

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


-   Official documents (Github)
-   Official documents (China)

Features


Base components

-   [x] Loading component
-   [x] Pagination component
-   [x] Contextmenu component
-   [x] Icon component
-   [x] Locale component

Table component

-   [x] Internationalization
-   [x] Theme Custom & Built in theme
-   [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 Selection(keyboard operation)
-   [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,
Please Tell Us

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";

  6. Vue.use(VueEasytable);

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

Example:

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

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

Todo List


What are we doing

Environment Support


-   Modern browser and ie11 and above

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

How to contribute


If you want to contribute,just create a
Pull Request

Contributors


Thanks to the following friends for their contributions 🙏


Discussion group


-   Join In Gitter Chat Room
-   Join In Discord Chat Room

License


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