A JavaScript 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 JavaScript 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 JavaScript data grid from npm, import DataGrid, and point it at an element — the sample on the right is complete and runnable. Every feature after that is a single option: columnFilters, rowSelection, pagination.
No framework, no build step. The core is plain TypeScript-built JavaScript, shipped as ES modules and as a UMD bundle — include the script and stylesheet from any static page or server-rendered app and use the global coreui.DataGrid.
It pairs with the .table styles from @coreui/coreui or @coreui/coreui-pro (≥ 5), and themes itself — dark mode included — through CSS custom properties. Full setup in the installation docs.
npm install @coreui/data-grid
import { DataGrid } from '@coreui/data-grid' import '@coreui/data-grid/dist/css/data-grid.css' new DataGrid(document.getElementById('grid'), { columns: [ { key: 'name', label: 'Name' }, { key: 'role', label: 'Role' }, ], items, itemKey: (item) => String(item.id), columnFilters: true, rowSelection: true, pagination: true, }) // Or without a bundler — UMD bundle + global: // new coreui.DataGrid(element, options)
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 JavaScript data grid ships one edition: every feature below is in the single licence, documented, and TypeScript-typed.
| Feature | What you get | JavaScript 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 JavaScript 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 bootstrap \ --base-path /data-grid/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 JavaScript'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 Bootstrap component library it pairs with.
AG Grid's vanilla JavaScript edition is the closest comparison, and its most-wanted features — pivoting, master-detail, Excel export — sit in a separate Enterprise tier; MUI X is a React library and has no vanilla edition. CoreUI Data Grid ships every feature in one edition and one licence that also covers React, Vue, and Angular bindings built on this same core. 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.
DataTables is a long-standing jQuery-era table enhancer with a big extension ecosystem. CoreUI Data Grid is a modern, dependency-light TypeScript grid: virtualization for 100,000 rows, the W3C ARIA grid keyboard pattern, allowlist sanitization of rendered strings, and the same component available as native React, Vue, and Angular bindings — no jQuery anywhere.
Yes. Besides ES modules for bundler projects, the package ships a UMD bundle — include the script and stylesheet on any static or server-rendered page and instantiate new coreui.DataGrid(element, options). That makes it a natural grid for Rails, Laravel, Django, or plain HTML pages.
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.
The minified JavaScript core is about 48 KB gzipped, measured on the published bundle, and the stylesheet adds roughly 2.4 KB. There are no runtime dependencies to add on top.
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 the rest of your page doesn't have to use CoreUI — it works in any HTML or server-rendered app.
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
A native <CDataGrid> component — hooks-friendly, React 19-ready, at home in Next.js.
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