VXE Table: A Vue data table component supporting Vue 2 and Vue 3

Cross-version Vue support and migration pathway

VXE Table is a data table solution designed to work with both Vue 2 and Vue 3. This cross-version approach lets teams migrate from Vue 2 to Vue 3 without replacing their table component. The component handles the differences between Vue 2 and Vue 3 API internally, so your usage stays consistent across versions. The library is widely used in Vue applications and is actively maintained, with the last push on 2026-09-21. VXE Table abstracts the differences in reactivity, rendering, and component lifecycle between Vue 2 and Vue 3, making it a smooth experience for teams managing multiple codebases or mid-migration. The development branches v3 and v4 maintain synchronized feature updates: when a feature ships in v4 (Vue 3), it also lands in v3 (Vue 2), ensuring consistency. This parallel maintenance eliminates the risk of version-specific feature gaps or API divergence, which is critical for enterprise applications with long upgrade cycles.

Virtual scrolling for large datasets and comprehensive table features

VXE Table provides standard data table functionality including sorting columns, filtering rows, paginating large datasets, and virtualizing long lists. Virtual scrolling renders only the visible rows, allowing tables to handle thousands or millions of rows without performance degradation. When you scroll, the component dynamically unmounts rows that are no longer visible and mounts new ones, keeping memory usage constant. The virtual rendering has been optimized through multiple iterations: v4.12 introduced virtual rendering v2 supporting million-level data with significant performance improvements; v4.13 added virtual rendering v3 optimizing Chrome, Safari, and Firefox smoothness; v4.14 improved v4 with better dragging; v4.15 optimized v5 to reduce memory usage. Columns are configurable with custom templates and renderers. The component supports inline editing where you click a cell to edit it directly, cell selection for user interactions, and row selection with checkboxes. API calls and external data can be integrated through event handlers and configuration options. The component emits events when the user sorts, filters, or selects, letting you fetch new data from your server on demand. The library supports row grouping, cell merging, frozen columns (including compatibility with virtual scrolling as of v4.11), multi-level headers, export and import functionality, printing, and keyboard navigation. Undo and redo support for add, delete, and modify operations was added in version 4.19. The component integrates with external libraries like Gantt charts as of version 4.16. Data validation and data proxy features allow you to manage table state and business logic separately. Custom renderers let you inject any Vue component or HTML into cells, headers, and footers through the slot system.

Installation and basic usage across Vue versions

Install VXE Table via npm:

npm install vxe-table

Import the component and styles into your Vue application. For Vue 3 applications, import from the v4 branch:

import VxeUITable from 'vxe-table'
import 'vxe-table/lib/style.css'

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

Basic usage involves declaring a table element with row and column definitions:

<vxe-table :data="tableData" border>
  <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>

The v3 branch targets Vue 2.6 to 2.7, with v3.9+ as the long-term maintenance version receiving bug fixes and stability improvements. The v4 branch targets Vue 3.x, with v4.7+ as the long-term maintenance version. Both branches maintain feature parity and API compatibility, allowing teams to upgrade frameworks without rewriting table code. Package exports include CommonJS via lib/index.common.js for Node.js environments, ES modules via es/index.esm.js for bundlers, and UMD via lib/index.umd.js for browser CDN usage. TypeScript definitions are available in types/index.d.ts. The latest version is 4.22.2 (released 2026-09-21). Configuration options control sorting, filtering, and pagination behavior. The documentation covers all available props, methods, and events. The library is built on top of Vxe UI, separating table functionality from the broader UI library for better modularity. The repository includes examples in the examples/ directory and detailed webpack configuration in vue.config.js for building custom configurations.

Performance and memory efficiency with virtual scrolling

Virtual scrolling is key to VXE Table's performance. Instead of rendering all rows at once, the component renders only what is visible in the viewport. As the user scrolls, rows are dynamically added and removed from the DOM. This allows tables with thousands or millions of rows to scroll smoothly without consuming excessive memory. A table with one million rows would normally require rendering one million row DOM elements, which is computationally impossible. With virtual scrolling, VXE Table renders perhaps 20 to 50 rows at a time, making the experience smooth and responsive regardless of total dataset size. The buffering strategy keeps a small buffer of rows above and below the viewport so scrolling feels continuous without flicker. Virtual scrolling can be enabled in configuration and works with both local and remote data sources. The implementation also supports virtual merging (virtual合并) which applies the same memory-saving approach to merged cells. Browser support includes Chrome 80+, Firefox 80+, Safari 90+, Edge 75+, and mobile Safari 10+, ensuring compatibility across modern platforms. When working with remote data, you combine virtual scrolling with pagination or server-side filtering to minimize the data transferred to the client.

Customization through slots and event handlers; enterprise features

VXE Table supports custom cell templates using Vue's scoped slots, letting you render custom content in any cell. You can display formatted dates, numbers, links, buttons, or any Vue component inside a cell. Custom column headers and footers are also possible using slot syntax. Row templates let you customize the entire row or add row-level actions. The component fires comprehensive events for user interactions like sorting, filtering, pagination, and cell selection, allowing you to hook custom logic. For example, you can listen to sort events and fetch data from a server with the new sort order. Styling can be customized through CSS classes and variables defined in the styles/ directory. The library exports main entry points through lib/index.common.js for CommonJS, es/index.esm.js for ES modules, and lib/index.umd.js for browser usage via CDN. TypeScript definitions are available in types/index.d.ts. The theme system uses CSS variables, allowing dynamic color switching without recompiling. The framework includes support for multiple event types: cell-click, row-select, sort-change, filter-change, and pagination-change, among others. The community version supports custom renderers, meaning you can inject custom Vue components into cells, headers, and footers. The enterprise version at https://store.vxeui.com adds spreadsheet-style features like data summation, aggregate functions, cell range selection, cell copy/paste, cell find and replace, and integrated charts. The community version remains free and open source under the MIT license.

When VXE Table is the right choice

VXE Table is appropriate for applications that need a performant, feature-rich table component. It is most useful when you have large datasets where default table implementations would struggle. If you need inline editing, complex filtering, or custom rendering, VXE Table provides the infrastructure. It is less suitable for simple read-only tables where a basic HTML table or a lightweight component would suffice.

Editorial conclusion

VXE Table suits Vue developers who need a production-ready table component with virtualization and built-in features. It is most useful when you have large datasets where scrolling performance matters. Start by installing via npm and importing the component; configuration options are documented in the repository.

Frequently asked questions

Official sources

1. License: MIT
2. Project website
3. README
4. Releases
5. x-extends/vxe-table on GitHub