求推荐支持列拖拽与列可见性配置的Vue表格npm包
Recommended Vue Table NPM Packages with Column Drag-and-Drop & Visibility Control
Hey there! I totally get what you're looking for—having relied on MUI Datatables in React for solid column management, you want that same seamless experience in Vue. Here are three great options that support both column drag-and-drop reordering and visibility configuration straight out of the box:
1. Vuetify Data Table
- Vue Version Support: Vue 2 (Vuetify 2) / Vue 3 (Vuetify 3)
- Key Features:
- Native column drag-and-drop reordering via the
column-reorderprop—just flip this setting on in your table config and you’re good to go - Built-in column visibility control through the table header’s dropdown menu; users can toggle columns on/off with a single click, just like MUI Datatables
- Integrates smoothly with the rest of the Vuetify component ecosystem, making it a natural pick if you’re already using Vuetify in your project
- Polished, pre-built UI that requires minimal custom code to get up and running
- Native column drag-and-drop reordering via the
2. Element Plus Table (Vue 3) / Element UI Table (Vue 2)
- Vue Version Support: Vue 3 (Element Plus) / Vue 2 (Element UI)
- Key Features:
- For Vue 3’s Element Plus, column drag-and-drop is enabled with the simple
column-draggableprop. For Vue 2’s Element UI, the officialsortablejsintegration is well-documented and takes just minutes to set up - Column visibility can be configured via a custom header dropdown or the built-in column filter panel—you can even persist user visibility preferences if needed
- Lightweight compared to full-featured grids, but still packed with all the essential table functionality you need
- For Vue 3’s Element Plus, column drag-and-drop is enabled with the simple
3. AG Grid Vue
- Vue Version Support: Vue 2 / Vue 3
- Key Features:
- Extremely robust column management: drag-and-drop reordering works by default in the column header, and column visibility is controlled via either the column menu or a dedicated column panel
- Comes loaded with advanced features (sorting, filtering, pagination, cell editing) if you ever need to scale up, but works perfectly for basic use cases too
- While it’s a bit heavier than the other options, its API is well-documented and it’s a go-to choice for enterprise Vue projects—think of it as the "power user" pick
If you were considering vue-tables-2, you could technically add drag-and-drop support with a library like SortableJS, but since you want something ready to use immediately, the options above will save you time and extra integration work.
内容的提问来源于stack exchange,提问作者Simon Thiel
相关产品推荐
相关产品推荐

