README-EN.md

If you have any question, open an issue

vue-fantable

English | 中文

If I have seen further, it is by standing on the shoulders of giants.

Introduction

If you are using Vue2, you should use vue-easytable.

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

Just use vue-fantable like vue-easytable

Characteristics

• Support 300000 rows of data display through virtual scroll
• Free forever. Of course, you can also choose to donate, ensure the long-term maintenance of the project

API & Examples

• Official documents (Github)
• Official documents (China)

Install

Make sure your program having Vue@3.2 or above.

npm install vue-fantable
# or
yarn add vue-fantable

Usage

Write the following in main.js:

import {createApp} from "vue";
import "vue-fantable/libs/theme-default.css";
import App from './app.vue'
import VueFantable from "vue-fantable";
const app = createApp(App)
app.use(VueFantable);

app.mounted('#app')

Example:

<template>
  <fan-table :columns="columns" :table-data="tableData" :max-height="400"/>
</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>

Features

Base components

• Loading component
• Pagination component
• Contextmenu component
• Icon component
• Locale component

Table component

• Internationalization
• Theme Custom & Built in theme
• Virtual Scroll
• Column Fixed
• Column Hidden
• Header Fixed
• Header Grouping
• Filter
• Sort
• Column Resize
• Cell Style
• Cell Custom
• Cell Span
• Cell Selection(keyboard operation)
• Cell Autofill
• Cell Edit
• Clipboard
• Contextmenu
• Cell Ellipsis
• Row Radio
• Row Checkbox
• Row Expand
• Row Style
• Footer Summary
• Event Custom
• More

If there is no feature you want, Please Tell Us

Todo List

Environment Support

• Modern browser

Edge	Firefox	Chrome	Safari	Opera
Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions

How to contribute

• One star is helpful to let more people know us.
• If you want to contribute,just create a pull request.

Contributors

Thanks to vue-easytable. This project is inherited from vue-easytable@2.27.1.

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