Happy-Coding-Clans/vue-easytablePublic

NotificationsYou must be signed in to change notification settings
Fork759
Star3.8k

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.

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

License

MIT license

3.8k stars 759 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 2,120 Commits
.github		.github
build		build
examples		examples
packages		packages
tests/unit		tests/unit
.browserslistrc		.browserslistrc
.eslintignore		.eslintignore
.eslintrc.js		.eslintrc.js
.gitignore		.gitignore
.prettierignore		.prettierignore
.prettierrc.js		.prettierrc.js
CHANGE-LOG.md		CHANGE-LOG.md
LICENSE		LICENSE
README-CN.md		README-CN.md
README.md		README.md
babel.config.js		babel.config.js
components.json		components.json
jest.config.js		jest.config.js
package.json		package.json
yarn.lock		yarn.lock

Repository files navigation

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:

importVuefrom"vue";import"vue-easytable/libs/theme-default/index.css";importVueEasytablefrom"vue-easytable";Vue.use(VueEasytable);newVue({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>