explaingit

x-extends/vxe-table

8,564TypeScriptAudience · developerComplexity · 3/5Setup · moderate

TLDR

vxe-table is a Vue 2 and Vue 3 component for displaying and editing large amounts of tabular data in web apps, with virtual scrolling that handles millions of rows, Excel-like keyboard navigation, drag-and-drop columns, and multi-column sorting.

Mindmap

mindmap
  root((repo))
    What It Does
      Display tabular data
      Edit data inline
      Handle large datasets
    Core Features
      Virtual scrolling
      Multi-column sort
      Drag and drop
      Keyboard navigation
    Enterprise Features
      Excel copy paste
      Find and replace
      Chart integration
    Audience
      Vue developers
      Business app builders
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Build an admin dashboard with a data grid that handles millions of rows without browser slowdown using virtual scrolling

USE CASE 2

Add sortable, filterable, editable tables to a Vue business app with keyboard navigation and export-to-file out of the box

USE CASE 3

Create a spreadsheet-like editing experience in a Vue web app with undo/redo support for add, edit, and delete operations

USE CASE 4

Replace a slow or basic HTML table in a Vue app with a high-performance grid that supports row grouping and expandable rows

Tech stack

TypeScriptVueJavaScript

Getting it running

Difficulty · moderate Time to first run · 30min

Advanced features like Excel-style copy-paste and area selection require the paid enterprise edition sold separately.

In plain English

vxe-table is a feature-rich table and data grid component for Vue 2 and Vue 3 web applications. It is aimed at business applications that need to display and edit large amounts of tabular data, similar to what you might do in a spreadsheet but embedded inside a web page. The core free version covers a wide range of common table needs: fixed columns, multi-level headers, row and column drag-and-drop reordering, sorting across multiple fields at once, filtering, cell merging, row grouping, expandable rows, and a virtual tree mode. You can show a loading state, format cell content, add custom slot templates, and configure a toolbar with export, import, and print options. Keyboard navigation is supported so users can move through cells without a mouse. For handling large datasets, vxe-table uses virtual scrolling, which renders only the rows visible on screen rather than the full dataset. Recent versions have been tuned to handle millions of rows without the page becoming slow. An undo-and-redo system was added in recent releases for tracking add, edit, and delete operations. An enterprise edition adds additional features including cell area selection, Excel-style copy and paste across cells, find and replace, aggregate functions, data summaries, and integrated charting. These are sold separately through the project's store. Both a basic and a table-specific documentation site are provided online in Chinese, along with a Gantt chart extension. The component is installed via npm and works with both the Composition API and Options API styles of Vue. An English README is available in the repository alongside the default Chinese one.

Copy-paste prompts

Prompt 1
Show me how to set up vxe-table in a Vue 3 project with virtual scrolling enabled to display 100,000 rows without performance issues
Prompt 2
Write a vxe-table config in Vue 3 with fixed first and last columns, multi-column sorting, and a toolbar with CSV export
Prompt 3
How do I add row drag-and-drop reordering to vxe-table and save the new order back to an API on drop?
Prompt 4
Set up vxe-table in Vue 3 with inline cell editing, validation, and undo/redo support for add, edit, and delete operations
Prompt 5
How do I configure vxe-table to show a loading spinner while data is fetching and display a custom empty-state message when no rows exist?
Open on GitHub → Explain another repo

← x-extends on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.