A Vue grid that feels
like a real application.
Sort, filter, search, pin, resize, reorder, select, and export — every interaction below runs on the same core your Vue app ships. No mockups, no video: this is the grid itself.
A live @coreui/data-grid instance running on this page · open the full-page demo →
From npm install
to a working grid.
Install the Vue data grid package, import CDataGrid in <script setup>, and bind :columns and :items — the sample on the right is a complete, runnable single-file component. Every feature after that is a single prop: column-filters, row-selection, pagination.
Built for Vue 3. The package targets Vue 3.4+ and the Composition API. Bind plain arrays or reactive state — the grid follows your data either way — and use scoped slots for custom cells.
Using Nuxt? The grid renders in the browser, so use it in client-rendered components. Everything else — server-side data included — works the same. Full setup in the installation docs.
npm install @coreui/vue-data-grid
<script setup> import { CDataGrid } from '@coreui/vue-data-grid' import '@coreui/data-grid/dist/css/data-grid.css' const columns = [ { key: 'name', label: 'Name' }, { key: 'role', label: 'Role' }, ] defineProps(['items']) </script> <template> <CDataGrid :columns="columns" :items="items" :item-key="(item) => String(item.id)" column-filters row-selection pagination /> </template>
No enterprise tier.
Everything is included.
Most commercial grids split sorting from "advanced" sorting and hold pinning, export, or server-side data behind an enterprise SKU. The CoreUI Vue data grid ships one edition: every feature below is in the single licence, documented, and TypeScript-typed.
| Feature | What you get | Vue edition |
|---|---|---|
| Sorting | Single and multi-column sorting with custom comparators, plus a sorting-change event for server-side sorting. | ✓ Included |
| Filtering | Global search and a per-column filter row with a full operator set — or bring your own filter UI per column. | ✓ Included |
| Pagination | Client-side paging out of the box; server-driven paging through a data provider. | ✓ Included |
| Row virtualization | A recycling row model that stays fast at 100,000 rows and beyond — only visible rows exist in the DOM. | ✓ Included |
| Column pinning | Pin columns left or right with correct sticky offsets and edge shadows. | ✓ Included |
| Column sizing & ordering | Drag to resize, drag headers to reorder, show and hide columns — all controllable state. | ✓ Included |
| Inline editing | Keyboard-first cell editing built on the grid navigation model. | ✓ Included |
| Row selection | Single, multi, and shift-click range selection that survives sorting, filtering, and paging. | ✓ Included |
| CSV export | Export the current view as a string or a download — formatters apply, so exports match the screen. | ✓ Included |
| Server-side data | A debounced data provider flips sorting, filtering, and paging to your backend; stale responses are invalidated automatically. | ✓ Included |
| Keyboard navigation | The W3C ARIA grid pattern: a roving-tabindex active cell with arrow-key movement across the whole grid. | ✓ Included |
| Toolbar, slots & custom cells | Replace the toolbar, pagination, and empty state; render any content per column in your framework's idiom. | ✓ Included |
| State & history | Read, persist, and restore the full grid state — sorting, filters, column layout, selection. | ✓ Included |
| Localization | Every built-in string is a label you can translate. | ✓ Included |
Every row links to its documentation page with runnable Vue examples. The full option, event, and method reference lives in the API docs.
Fast at 100,000 rows.
Small enough to not matter.
Row virtualization keeps the DOM small: a 100,000-row grid renders a few dozen <tr> elements, not 100,000. Rows recycle as you scroll, so formatters stay off the hot path.
Beyond ~100k client-side rows, the honest answer is server-side mode — the grid hands sorting, filtering, and paging to your backend instead of pretending the browser is a database. How the virtualizer works, what overscan tunes, and when to switch modes is documented in the performance guide.
Buy one grid.
Get all four editions.
MUI X is React-only. Most enterprise suites sell each framework as a separate product or bundle the grid into a 90-component platform. One CoreUI Data Grid licence covers the JavaScript core and the React, Vue, and Angular editions — with identical markup and one shared stylesheet, so multi-framework teams learn the grid once.
| A team using two frameworks | CoreUI Data Grid | Per-framework vendors | MUI X |
|---|---|---|---|
| Frameworks covered | JavaScript, React, Vue & Angular | One product per framework | React only |
| Licences to buy | One | One per framework, per developer | One — plus a second vendor for the other framework |
| Price | $199 per developer early access ($349 after launch), all editions included | Per-developer subscription per product, typically renewed yearly | Per-developer plan, React only |
Your coding agent
already knows this grid.
Teams increasingly evaluate a library by whether Claude, Copilot, or Cursor can drive it. CoreUI Data Grid ships an official MCP server that gives your assistant live access to the current documentation — options, events, methods, and examples — instead of stale training data.
The docs also publish llms.txt and llms-full.txt, and every documentation page has a Markdown version — append .md to its URL.
claude mcp add coreui-data-grid -s user -- \ npx -y @coreui/docs-mcp \ --framework vue \ --base-path /data-grid/vue/docs
Configs for Cursor, VS Code, Windsurf, and Claude Desktop are in the MCP docs.
Drop it in and ship: toolbar, filters, pagination, and theming through CSS custom properties that follow your CoreUI theme — dark mode included. Custom cell rendering per column, in Vue's native idiom, without leaving the component.
Reach past the rendered grid to the underlying table instance — the same "bring your own UI" control a headless library gives you, with a styled grid to fall back on. Custom row models, derived state, and integrations are covered in the headless API docs.
An accessible data grid,
to a named standard.
With cellNavigation on, the grid implements the W3C WAI-ARIA grid pattern — not a vague "accessible" checkbox. Without it, the grid deliberately keeps native table semantics rather than claiming role="grid" without the full keyboard contract.
- One tab stop, roving focus — Tab enters the grid once; ←→↑↓ move the active cell, Home/End jump within a row, Ctrl+Home/Ctrl+End across the grid
- Actions on the keyboard — Enter sorts a header or starts editing, Space toggles row selection, Escape steps back out of cell content
- Screen-reader signals — correct
aria-rowcount/aria-rowindexandaria-colcount/aria-colindexeven while virtualized,aria-busyduring server loads, and live-region announcements of result counts as filters change - Keyboard-accessible chrome — the column menu follows the ARIA menu pattern, with "Move left / Move right" as a keyboard alternative to drag-and-drop reordering
- Documented limits —
cellNavigationis opt-in in this release; the accessibility guide states exactly what is supported today and what ships after NVDA and VoiceOver verification
Built by a team
you already depend on.
CoreUI has shipped open-source and commercial UI components since 2013: more than 43,000 GitHub repositories depend on coreui/coreui, and the libraries see roughly 490,000 npm downloads a week. The Data Grid is built and supported by the same team — alongside the CoreUI for Vue component library it pairs with.
AG Grid has a first-class Vue binding, but its most-wanted features — pivoting, master-detail, Excel export — sit in a separate Enterprise tier; MUI X doesn't exist for Vue at all. CoreUI Data Grid ships every feature in one edition and one licence that also covers React, Angular, and vanilla JavaScript. It deliberately covers less surface than AG Grid Enterprise, so if you need pivoting or Excel export, AG Grid is the right call. See the full breakdown in AG Grid alternatives: 8 data grids compared.
PrimeVue's DataTable and Vuetify's data table are strong free options if you're already on those design systems — adopting them mostly means adopting the whole system. CoreUI Data Grid is a standalone grid: it brings its own stylesheet, themes through CSS custom properties, and adds row virtualization at 100,000 rows, a headless API, and commercial support under one licence.
Vue 3.4 and newer. The component is written for the Composition API and <script setup>, uses scoped slots for custom cells, and follows your reactive state — plain arrays and reactive sources both work as :items.
Yes. The grid renders in the browser, so use it in client-rendered components in a Nuxt app. Server-side sorting, filtering, and paging work through the data provider exactly as in any other Vue application.
Client-side, row virtualization keeps the grid fast at 100,000 rows — the docs include a live demo running on exactly that. Beyond that scale, switch to server-side mode and let your backend drive paging, sorting, and filtering; the grid emits the state changes and invalidates stale responses automatically.
With cellNavigation enabled it implements the W3C WAI-ARIA grid pattern — a single tab stop with a roving-tabindex active cell, arrow-key navigation, and correct ARIA row and column indices even while virtualized. The accessibility guide documents exactly what is supported today and what is planned.
No. The grid needs the table styles from the @coreui/coreui or @coreui/coreui-pro stylesheet (v5+) on the page, but your app doesn't have to be built with CoreUI components — it drops into any Vue application.
The Data Grid is at version 0.1.0 — stable enough to build on, with 1.0.0 planned for early September 2026. Until then, occasional small breaking changes land with documented migration notes, and the $199 early-access price is the lowest the grid will ever have (it rises to $349 at launch).
- 0.1.0-rc.0Current early-access release — every feature on this page is shipped and documented.
- 1.0.0Planned for early September 2026. Until then, occasional small breaking changes land with migration notes in the changelog.
Page last updated July 23, 2026 · Roadmap: what's next for the Data Grid
The vanilla core — ES modules or a UMD bundle, no framework and no build step required.
A native <CDataGrid> component — hooks-friendly, React 19-ready, at home in Next.js.
A standalone <c-data-grid> component for current Angular, typed end to end.
One grid, four editions — features, live demo, and pricing on a single page.
One license. Every framework.
Buy once and build with the JavaScript core and the React, Vue, and Angular editions — no per-framework lock-in. Get early access at the lowest price the Data Grid will ever have.
- All four editions — JavaScript, React, Vue, and Angular under one license
- Unlimited projects — build unlimited commercial and personal apps, no per-project fees
- Every feature — sorting, filtering, pagination, virtualization, pinning, resize, reorder, selection, and CSV export
- TypeScript definitions — full typings for columns, options, and events
- Documentation & examples — a dedicated docs site per framework with runnable examples
- Updates & support — one year of updates and email support