1. Project Overview

A Vue-based PC table component that supports CRUD operations, virtual lists, virtual trees, lazy loading, context menus, data validation, printing and exporting, form rendering, data pagination, dialogs, custom templates, renderers, and highly flexible configuration options.

• Design philosophy
• Designed for modern browsers with an efficient and concise API
• Modular tables with on-demand loading
• Designed for single-row editable tables, supporting CRUD operations and more extensions. Combines powerful functionality with excellent performance

2. Open Source License

Licensed under MIT

3. Screenshots

4. Feature Overview

Browser support

80+ ✔

80+ ✔

90+ ✔

75+ ✔

10+ ✔

Function Point

• Basic Table
• Advanced Table
• Zebra Stripes
• Multiple Border Styles
• Cell Styles
• Column Resizing
• Maximum Height
• Adaptive Width and Height
• Fixed Columns
• Multi-Level Headers
• Footer Data
• Highlight Rows or Columns
• Sequence number
• Radio
• Checkbox
• Dropdown Options
• Switch
• Sorting
• Multi-Field Sorting
• Filtering
• Cell Merging
• Footer Merging
• Import/Export/Print
• Show/Hide Columns
• Loading
• Content Formatting
• Custom Slots - Templates
• Context Menu
• Expandable Rows
• Pagination
• Forms
• Toolbar
• Dropdown Container
• Virtual List
• Virtual Tree
• CRUD Operations
• Data Validation
• Data Proxy
• Keyboard Navigation
• Modal
• Renderers
• Virtual Scrolling
• Virtual Merging
• (pro) Cell Range Selection
• (pro) Cell Copy/Paste
• (pro) Cell Find and Replace

5. Tech Stack

It is recommended to install via npm, as it works better with bundlers such as webpack and vite.

Dependencies: xe-utils, vue 3.2+

Installation

Version: vue 3.x, Dependencies: xe-utils

npm install xe-utils vxe-table@next

Get on unpkg and cdnjs

npm

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

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

CDN

Using third-party CDN URLs in production is not recommended, as these links may become unavailable at any time, causing your project to fail;

When using a CDN, remember to lock the version number to avoid issues caused by incompatible updates.

<!-- Import styles -->
<link rel="stylesheet" href="[https://unpkg.com/vxe-table@next/lib/style.css\](https://unpkg.com/vxe-table@next/lib/style.css\)">
<!-- Import scripts -->
<script src="[https://unpkg.com/xe-utils\](https://unpkg.com/xe-utils\)"></script>
<script src="[https://unpkg.com/vxe-table@next\](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">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup () {
    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' }
    ])
    return {
      tableData
    }
  }
})
</script>

Documentation

For details, see the README.md documentation:

User Guide

View Documentation

Run the Project

Install Dependencies

npm run update
Start local debugging

npm run serve

Compile and package to generate the compiled directories: es,lib

npm run lib