vxe-table

A vue based PC form component, support add, delete, change, virtual scroll, lazy load, shortcut menu, data validation, tree structure, print export, form rendering, data paging, virtual list, modal window, custom template, renderer, flexible configuration items, extension interface, etc...

Design concept
- Efficient and concise API design for modern browsers
- Modular tables, on-demand loading, extended interfaces
- Designed for single row table editing, supports addition, deletion, modification and query as well as more expansion, with powerful functions and performance at the same time
Donation
- <input checked="" disabled="" type="checkbox"> v1.0 100% Based on vue2.6+, it supports all mainstream browsers and realizes all practical functions of tables
- <input checked="" disabled="" type="checkbox"> v2.0 100% Based on vue2.6+, it supports all mainstream browsers with both functions and performance
- <input checked="" disabled="" type="checkbox"> v3.0 70% Based on vue2.6+, only H5 browser is supported, ie is not supported, rendering performance is greatly improved
- <input disabled="" type="checkbox"> v4.0 0% Based on vue3+, only H5 browser is supported, ie is not supported, rendering performance is greatly improved

👉 If you have a better suggestion, optimization point or Bug, please feel free to ask Issues

Browser Support


11+ ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔

Features

<input checked="" disabled="" type="checkbox"> Basic table
<input checked="" disabled="" type="checkbox"> Grid
<input checked="" disabled="" type="checkbox"> Striped
<input checked="" disabled="" type="checkbox"> Table with border
<input checked="" disabled="" type="checkbox"> Cell style
<input checked="" disabled="" type="checkbox"> Column resizing
<input checked="" disabled="" type="checkbox"> Maximum table height
<input checked="" disabled="" type="checkbox"> Resize height & width
<input checked="" disabled="" type="checkbox"> Fixed column
<input checked="" disabled="" type="checkbox"> Grouping table header
<input checked="" disabled="" type="checkbox"> Table footer
<input checked="" disabled="" type="checkbox"> Highlight row & column
<input checked="" disabled="" type="checkbox"> Table sequence
<input checked="" disabled="" type="checkbox"> Radio
<input checked="" disabled="" type="checkbox"> Checkbox
<input checked="" disabled="" type="checkbox"> Select
<input checked="" disabled="" type="checkbox"> Switch
<input checked="" disabled="" type="checkbox"> Sorting
<input checked="" disabled="" type="checkbox"> Filter
<input checked="" disabled="" type="checkbox"> Merged cells
<input checked="" disabled="" type="checkbox"> Merged footer items
<input checked="" disabled="" type="checkbox"> Import
<input checked="" disabled="" type="checkbox"> Export
<input checked="" disabled="" type="checkbox"> Print
<input checked="" disabled="" type="checkbox"> Show/Hide column
<input checked="" disabled="" type="checkbox"> Loading
<input checked="" disabled="" type="checkbox"> Formatted cell
<input checked="" disabled="" type="checkbox"> Slot - template
<input checked="" disabled="" type="checkbox"> Context menu
<input checked="" disabled="" type="checkbox"> Detail - Expandable row
<input checked="" disabled="" type="checkbox"> Pager
<input checked="" disabled="" type="checkbox"> Form
<input checked="" disabled="" type="checkbox"> Toolbar
<input checked="" disabled="" type="checkbox"> Pulldown
<input checked="" disabled="" type="checkbox"> List
<input checked="" disabled="" type="checkbox"> Editable CRUD
<input checked="" disabled="" type="checkbox"> Tree table
<input checked="" disabled="" type="checkbox"> Validate
<input checked="" disabled="" type="checkbox"> Data Proxy
<input checked="" disabled="" type="checkbox"> Keyboard navigation
<input checked="" disabled="" type="checkbox"> Modal
<input checked="" disabled="" type="checkbox"> Renderer
<input checked="" disabled="" type="checkbox"> Virtual Scroller
<input checked="" disabled="" type="checkbox"> (pro) Cell area selection
<input checked="" disabled="" type="checkbox"> (pro) Cell copy & paste
<input checked="" disabled="" type="checkbox"> (pro) Cell find and replace

Modules

Core
Modules
Component
Plugins
- Strengthen
- Adapter

Installing

Dependent: vue 2.6+, xe-utils 2.7+

npm install xe-utils vxe-table

Get on unpkg and cdnjs

npm

import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'

Vue.use(VXETable)

CDN

<!-- Style -->
<link rel="stylesheet" href="https://unpkg.com/vxe-table/lib/index.css">
<!-- Script -->
<script src="https://unpkg.com/xe-utils"></script>
<script src="https://unpkg.com/vxe-table"></script>
<!-- It is recommended that users introduced by CDN lock the version on the link address to avoid the impact of incompatible updates -->

Example

<template>
  <div>
    <vxe-table :data="tableData">
      <vxe-table-column type="seq" title="Seq" width="60"></vxe-table-column>
      <vxe-table-column field="name" title="Name"></vxe-table-column>
      <vxe-table-column field="sex" title="Sex"></vxe-table-column>
      <vxe-table-column field="address" title="Address"></vxe-table-column>
    </vxe-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [
        { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', address: 'Shenzhen' },
        { id: 10002, name: 'Test2', role: 'Test', sex: 'Man', address: 'Guangzhou' },
        { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', address: 'Shanghai' }
      ]
    }
  }
}
</script>

Docs

💡 User guide
👉 View example
👉 View API

Donation

If you feel that our open source software is helpful to you, please scan the QR code below to enjoy a cup of coffee.☕

Because maintaining an open source project takes a lot of effort and time, if you are using the project, your donation will help keep the project going.
👉 This component is helpful to me and I would like to donate it💰

Package detail

vxe-table-new

readme