A React 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 React 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 React data grid package, import CDataGrid, and pass columns and items — the sample on the right is a complete, runnable component. Every feature after that is a single prop: columnFilters, rowSelection, pagination.
React 19-ready. The package supports React 17, 18, and 19 — one codebase, hooks-friendly, no legacy context or deprecated lifecycles.
Using Next.js? The grid is an interactive client component: add 'use client' at the top of the file and it drops straight into the App Router. Everything else — server-side data included — works the same. Full setup in the installation docs.
npm install @coreui/react-data-grid
'use client' // Next.js App Router only import { CDataGrid } from '@coreui/react-data-grid' import '@coreui/data-grid/dist/css/data-grid.css' const columns = [ { key: 'name', label: 'Name' }, { key: 'role', label: 'Role' }, ] export function UsersGrid({ items }) { return ( <CDataGrid columns={columns} items={items} itemKey={(item) => String(item.id)} columnFilters rowSelection pagination /> ) }
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 React data grid ships one edition: every feature below is in the single licence, documented, and TypeScript-typed.
| Feature | What you get | React 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 React 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 react \ --base-path /data-grid/react/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 React'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 React component library it pairs with.
Both are excellent grids with a different trade-off. AG Grid keeps its most-wanted features — pivoting, master-detail, Excel export — in a separate Enterprise tier, and MUI X splits features across Pro and Premium plans and only exists for React. CoreUI Data Grid ships every feature in one edition and one licence that also covers Vue, Angular, and vanilla JavaScript. It deliberately covers less surface than AG Grid Enterprise — no pivoting or Excel export today — so if you need those, AG Grid is the right call. See the full breakdown in AG Grid alternatives: 8 data grids compared.
Yes. @coreui/react-data-grid supports React 17, 18, and 19 from a single package — hooks-based, with no deprecated lifecycles and no legacy context.
Yes. The grid is an interactive client component, so mark the file with 'use client' and use it anywhere in the App Router or the Pages Router. Server-side sorting, filtering, and paging work through the data provider exactly as in any other React app.
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.
Yes — per-column custom cells are regular React render functions, and the toolbar, pagination, and empty state are replaceable slots. If you outgrow the styled grid entirely, the headless API exposes the underlying table instance for full "bring your own UI" control.
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 React 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 Vue 3 component built for the Composition API, with scoped slots for custom cells.
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