vxe-table

A vue based PC form component, support add, delete, change, virtual list, virtual tree, lazy load, shortcut menu, data validation, print export, form rendering, data paging, modal window, custom template, renderer, JSON configuration...

Design concept
- Efficient and concise API design for modern browsers.
- Modular tables, on-demand loading.
- 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.
Plan
- <input checked="" disabled="" type="checkbox"> ~~v1.0 Based on vue2.6, Support for all major browsers.~~
- <input checked="" disabled="" type="checkbox"> ~~v2.0 Based on vue2.6, Support for all major browsers.~~
- <input checked="" disabled="" type="checkbox"> v3.0 Based on vue2.6, supports modern browsers and retains compatibility with IE11.
- <input checked="" disabled="" type="checkbox"> v4.0 Based on vue3.x, Only support modern browser, not IE.

Browser Support


Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔

Features

<input checked="" disabled="" type="checkbox"> Basic table
<input checked="" disabled="" type="checkbox"> Configuration grid
<input checked="" disabled="" type="checkbox"> Base form
<input checked="" disabled="" type="checkbox"> Configuration form
<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"> Minimum/maximum 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"> Multi field 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/Export/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"> Toolbar
<input checked="" disabled="" type="checkbox"> Pulldown
<input checked="" disabled="" type="checkbox"> Virtual list
<input checked="" disabled="" type="checkbox"> Virtual tree
<input checked="" disabled="" type="checkbox"> Editable CRUD
<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"> VxeGlobalRenderer
<input checked="" disabled="" type="checkbox"> Virtual scroller
<input checked="" disabled="" type="checkbox"> Virtual merger
<input checked="" disabled="" type="checkbox"> CSS Variable Theme
<input checked="" disabled="" type="checkbox"> (插件) Cell area selection
<input checked="" disabled="" type="checkbox"> (插件) Cell copy & paste
<input checked="" disabled="" type="checkbox"> (插件) Cell find and replace

Installing

Version: vue 3.x

npm install xe-utils vxe-table@next

Get on unpkg and cdnjs

npm

import { createApp } from 'vue'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'

createApp(App).use(VXETable).mount('#app')

CDN

Remember to lock the version number in CDN mode to avoid being affected by incompatible updates
It is not recommended to use the CDN address of a third party for production, as the connection may fail at any time

<!-- Style -->
<link rel="stylesheet" href="https://unpkg.com/vxe-table@next/lib/style.css">
<!-- Script -->
<script src="https://unpkg.com/xe-utils"></script>
<script src="https://unpkg.com/vxe-table@next"></script>

Example

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

<script lang="ts" setup>
import { ref } from 'vue'

const tableData = ref([
  { 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>

Online Documents

👉 Document

Participate in document improvement and supplement detailed documents.

💡 Document source code

Run the project

Install dependencies

npm install

Start local debugging

npm run serve

Compile packaging, generated compiled directory: es,lib

npm run lib

Package detail

yk-vxe-table-v4

readme