Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/kohaiy/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.
https://github.com/kohaiy/easytable
easytable table vue vue-easytable vue3
Last synced: 17 days ago
JSON representation
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.
Host: GitHub
URL: https://github.com/kohaiy/easytable
Owner: kohaiy
Created: 2024-01-10T15:50:01.000Z (10 months ago)
Default Branch: main
Last Pushed: 2024-04-21T16:47:32.000Z (7 months ago)
Last Synced: 2024-10-20T11:46:18.030Z (24 days ago)
Topics: easytable, table, vue, vue-easytable, vue3
Language: TypeScript
Homepage: https://easytable.kohai.top/
Size: 14.2 MB
Stars: 26
Watchers: 1
Forks: 1
Open Issues: 4
Metadata Files:
- Readme: README-EN.md
Awesome Lists containing this project

README

        [![npm](https://img.shields.io/npm/v/@easytable/vue.svg)](https://www.npmjs.com/package/@easytable/vue)

[![vue3.2](https://img.shields.io/badge/vue-3.2+-brightgreen.svg)](https://vuejs.org/)

[![NPM downloads](https://img.shields.io/npm/dm/@easytable/vue.svg?style=flat)](https://npmjs.org/package/@easytable/vue)

[![codecov](https://codecov.io/gh/Happy-Coding-Clans/@easytable/vue/branch/master/graph/badge.svg?token=UJy3LHInUn)](https://codecov.io/gh/Happy-Coding-Clans/@easytable/vue)

[![license](https://img.shields.io/npm/l/@easytable/vue.svg?maxAge=2592000)](http://www.opensource.org/licenses/mit-license.php)

[![Discord](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/gBm3k6r)

[![Gitter](https://badges.gitter.im/@easytable/vue/community.svg)](https://gitter.im/@easytable/vue/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)

# vue-easytable

**English** | [中文](./README.md)

> [!IMPORTANT]

> 本仓库迁移自 [vue-easytable](https://github.com/huangshuwei/vue-easytable) Vue.js 2.x ，基于 Vue.js 3.x 重构中……

## 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)](http://happy-coding-clans.github.io/vue-easytable/)

-   [Official documents (China)](http://huangshuwei.gitee.io/vue-easytable/)

## Features

**Base components**

-   [x] [Loading component](https://happy-coding-clans.github.io/vue-easytable/#/en/doc/base/loading)

-   [ ] [Pagination component](https://happy-coding-clans.github.io/vue-easytable/#/en/doc/base/pagination)

-   [ ] [Contextmenu component](https://happy-coding-clans.github.io/vue-easytable/#/en/doc/base/contextmenu)

-   [x] [Icon component](https://happy-coding-clans.github.io/vue-easytable/#/en/doc/base/icon)

-   [ ] [Locale component](https://happy-coding-clans.github.io/vue-easytable/#/en/doc/base/locale)

**Table component**

-   [ ] [Internationalization](http://happy-coding-clans.github.io/vue-easytable/#/en/doc/locale)

-   [ ] [Theme Custom & Built in theme](http://happy-coding-clans.github.io/vue-easytable/#/en/doc/theme)

-   [ ] [Virtual Scroll](http://happy-coding-clans.github.io/vue-easytable/#/en/doc/table/virtual-scroll)

-   [ ] [Column Fixed](http://happy-coding-clans.github.io/vue-easytable/#/en/doc/table/column-fixed)

-   [ ] [Column Hidden](http://happy-coding-clans.github.io/vue-easytable/#/en/doc/table/column-hidden)

-   [ ] [Header Fixed](http://happy-coding-clans.github.io/vue-easytable/#/en/doc/table/header-fixed)

-   [ ] [Header Grouping](http://happy-coding-clans.github.io/vue-easytable/#/en/doc/table/header-grouping)

-   [ ] [Filter](http://happy-coding-clans.github.io/vue-easytable/#/en/doc/table/header-filter)

-   [ ] [Sort](http://happy-coding-clans.github.io/vue-easytable/#/en/doc/table/header-sort)

-   [ ] [Column Resize](https://happy-coding-clans.github.io/vue-easytable/#/en/doc/table/column-resize)

-   [ ] [Cell Style](http://happy-coding-clans.github.io/vue-easytable/#/en/doc/table/cell-style)

-   [ ] [Cell Custom](http://happy-coding-clans.github.io/vue-easytable/#/en/doc/table/cell-custom)

-   [ ] [Cell Span](http://happy-coding-clans.github.io/vue-easytable/#/en/doc/table/cell-span)

-   [ ] [Cell Selection(keyboard operation)](http://happy-coding-clans.github.io/vue-easytable/#/en/doc/table/cell-selection)

-   [ ] [Cell Autofill](http://happy-coding-clans.github.io/vue-easytable/#/en/doc/table/cell-autofill)

-   [ ] [Cell Edit](http://happy-coding-clans.github.io/vue-easytable/#/en/doc/table/cell-edit)

-   [ ] [Clipboard](http://happy-coding-clans.github.io/vue-easytable/#/en/doc/table/clipboard)

-   [ ] [Contextmenu](http://happy-coding-clans.github.io/vue-easytable/#/en/doc/table/contextmenu)

-   [ ] [Cell Ellipsis](http://happy-coding-clans.github.io/vue-easytable/#/en/doc/table/cell-ellipsis)

-   [ ] [Row Radio](http://happy-coding-clans.github.io/vue-easytable/#/en/doc/table/row-radio)

-   [ ] [Row Checkbox](http://happy-coding-clans.github.io/vue-easytable/#/en/doc/table/row-checkbox)

-   [ ] [Row Expand](http://happy-coding-clans.github.io/vue-easytable/#/en/doc/table/row-expand)

-   [ ] [Row Style](http://happy-coding-clans.github.io/vue-easytable/#/en/doc/table/row-style)

-   [ ] [Footer Summary](http://happy-coding-clans.github.io/vue-easytable/#/en/doc/table/footer-summary)

-   [ ] [Event Custom](http://happy-coding-clans.github.io/vue-easytable/#/en/doc/table/event-custom)

-   [More](http://happy-coding-clans.github.io/vue-easytable)

If there is no feature you want,

[Please Tell Us](http://happy-coding-clans.github.io/issue-template-generater/#/en)

## Install

```

npm install vue-easytable

```

or

```

yarn add vue-easytable

```

## Usage

Write the following in main.js:

```javascript

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:

```javascript

  

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

          },

        ],

      };

    },

  };

```

## Todo List

[What are we doing](https://github.com/Happy-Coding-Clans/vue-easytable/projects)

## Environment Support

-   Modern browser and ie11 and above

| [](http://godban.github.io/browsers-support-badges/)IE / Edge | [](http://godban.github.io/browsers-support-badges/)Firefox | [](http://godban.github.io/browsers-support-badges/)Chrome | [](http://godban.github.io/browsers-support-badges/)Safari | [](http://godban.github.io/browsers-support-badges/)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](https://github.com/huangshuwei/vue-easytable/pulls)

## Contributors

Thanks to the following friends for their contributions 🙏



  



## Discussion group

-   [Join In Gitter Chat Room](https://gitter.im/vue-easytable/community)

-   [Join In Discord Chat Room](https://discord.gg/gBm3k6r)

## License

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