Happy-Coding-Clans/vue-easytable

JavaScripthappy-coding-clans.github.io/vue-easytable/

A powerful data table based on vuejs. You can use it as data grid、Microsoft Excel or Google sheets. It supports virtual scroll、cell edit etc.

vuejs2tablecomponentvue-jestunit-testvue-easytablevue-tablegridexcelvuevuejscontextmenu

Métricas principais

Crescimento de estrelas

Estrelas

3.8k

Forks

774

Crescimento semanal

—

Issues

1k2k3k

dez. de 2016jul. de 2018fev. de 2020set. de 2021mai. de 2023dez. de 2024jul. de 2026

Artefatosnpmnpm install vue-easytable

README

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>