A Angular 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 Angular 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 Angular data grid package and import the standalone DataGridComponent — no NgModule required. The sample on the right is a complete, runnable component. Every feature after that is a single input: [columnFilters], [rowSelection], [pagination].
Built for current Angular. The package targets Angular 22 with a standalone-first API, and ships full types — DataGridColumn, DataGridItem, and every event payload — so your templates stay type-checked.
Angular CLI projects need no extra build config: add the stylesheet to angular.json styles and import the component. Full setup in the installation docs.
npm install @coreui/angular-data-grid
import { Component, signal } from '@angular/core' import { DataGridComponent } from '@coreui/angular-data-grid' import type { DataGridColumn, DataGridItem } from '@coreui/angular-data-grid' @Component({ selector: 'app-users', imports: [DataGridComponent], template: `<c-data-grid [columns]="columns" [items]="items()" [itemKey]="itemKey" [columnFilters]="true" [rowSelection]="true" [pagination]="true" />`, }) export class UsersComponent { readonly columns: DataGridColumn[] = [ { key: 'name', label: 'Name' }, { key: 'role', label: 'Role' }, ] readonly items = signal<DataGridItem[]>([]) readonly itemKey = (item: DataGridItem) => String(item.id) }
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 Angular data grid ships one edition: every feature below is in the single licence, documented, and TypeScript-typed.
| Feature | What you get | Angular 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 Angular 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 angular \ --base-path /data-grid/angular/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 Angular'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 Angular component library it pairs with.
AG Grid has a mature Angular binding, but its most-wanted features — pivoting, master-detail, Excel export — sit in a separate Enterprise tier; MUI X is React-only and not an option for Angular teams. CoreUI Data Grid ships every feature in one edition and one licence that also covers React, Vue, 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.
Kendo UI's grid is part of a large commercial suite licensed per developer per year, and PrimeNG's table is free but couples you to the Prime design system. CoreUI Data Grid is a standalone grid with its own stylesheet, a one-time $199 licence covering four frameworks, row virtualization at 100,000 rows, and a headless API when you want your own UI.
The package targets Angular 22, the current major. It ships a standalone component — import DataGridComponent directly, no NgModule — with full TypeScript types for columns, items, and every event payload.
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 and the toolbar, pagination, and empty state are all replaceable using Angular templates. 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 Angular 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 Vue 3 component built for the Composition API, with scoped slots for custom cells.
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