A real data table is never just a table. The moment you ship one, you need sorting, filtering, pagination, pinned columns, resizing, and CSV export — and each one is a project of its own.
Render a few thousand rows and the browser crawls. Virtualization, row recycling, and a fast scroll path are hard to build correctly and easy to get wrong.
Off-the-shelf grids ship inconsistent markup, their own design language, and shaky keyboard and screen-reader support. Accessibility becomes an afterthought you audit yourself.
Your stack spans frameworks. A React grid, a Vue grid, and an Angular grid from three vendors mean three APIs, three learning curves, and three sets of bugs.
Every grid feature you need.
The same grid everywhere.
CoreUI Data Grid is a high-performance grid for JavaScript, React, Vue, and Angular. Every edition shares the same markup, the same class names, and one stylesheet — so a grid you build in React looks and behaves identically in Vue or Angular. Sorting, filtering, pagination, virtualization, pinning, resizing, reordering, selection, and CSV export are built in and TypeScript-typed.
Click to sort ascending, descending, and back. Per-column control with sortable, custom comparators, and a sortingChange event for server-side sorting.
A global search box plus per-column filters with a full set of operators. Bring your own filter UI per column when you need it.
Client-side paging out of the box, or switch to server mode and let a data provider drive page, sort, and filter round-trips.
Scroll through hundreds of thousands of rows at 60fps. Rows recycle as you scroll, keeping formatters off the hot path.
Pin columns left or right with correct sticky offsets and edge shadows. Keep keys and actions visible while the rest scrolls.
Drag column borders to resize and drag headers to reorder. Column order, sizing, and visibility are all controllable state.
Single, multi, and shift-click range selection with a selectionChange event — anchored correctly across sort, filter, and page changes.
Get the current view as a CSV string or trigger a download with one call. Formatters apply, so exports match what users see.
A debounced data provider flips the grid to manual sorting, filtering, and paging — stale in-flight responses are invalidated automatically.
Slot in your own toolbar, pagination, empty state, and per-column cells and filters — in each framework's native idiom.
Semantic table markup with correct aria-rowcount / aria-rowindex, keyboard navigation, and managed focus — built in, not bolted on.
Every string rendered to the DOM is sanitized against an allowlist, so custom renderers and cell content stay XSS-safe.
Write it once.
Ship it anywhere.
The same columns, the same options, the same events — expressed in each framework's native syntax. Learn the grid once and reuse everything you know across JavaScript, React, Vue, and Angular.
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', sortable: true }, { key: 'role', label: 'Role', filterable: true }, { key: 'status', label: 'Status' }, ], items, pagination: true, columnPinning: { left: ['name'] }, })
import { CDataGrid } from '@coreui/react-data-grid' export function Grid() { return ( <CDataGrid columns={columns} items={items} pagination columnPinning={ { left: ['name'] } } onSortingChange={handleSort} /> ) }
<!-- <script setup> imports CDataGrid from '@coreui/vue-data-grid' --> <CDataGrid :columns="columns" :items="items" pagination :column-pinning="{ left: ['name'] }" @sorting-change="onSortingChange" />
<c-data-grid [columns]="columns" [items]="items" pagination [columnPinning]="{ left: ['name'] }" (sortingChange)="onSortingChange($event)" />
Full API reference, options, events, and runnable examples for every edition.
A grid that feels
like a real application.
Sort, filter, pin, resize, and page through data with the interactions your users already expect — rendered on the same fast, accessible core in every framework.
A live @coreui/data-grid instance — sort, filter, search, pin, resize, reorder, select, and export, running on this page.
Fast on the first row.
Fast on the millionth.
Virtualized rendering and a recycling row model keep scrolling smooth no matter how large the dataset — while a headless core gives you full control when you need it.
Reach past the rendered grid to the underlying table instance for full programmatic control — custom row models, derived state, and integrations — without leaving the component.
The framework bindings aren't separate rewrites. They share the vanilla core's behavior, class names, and markup, so a fix or feature lands the same way in every edition.
- Sorting — single and multi-column, custom comparators, and a
sortingChangeevent for server-side sorting - Filtering — a global search plus per-column filters with a full operator set and custom filter UI
- Pagination — client-side out of the box, or server-driven through a data provider
- Virtualization — recycling row model for smooth scrolling over massive datasets
- Column pinning — pin left or right with correct sticky offsets and edge shadows
- Column resizing & reordering — drag to resize, drag to reorder, with controllable sizing and order state
- Column visibility — show and hide columns via a built-in column chooser
- Row selection — single, multi, and shift-click ranges with a
selectionChangeevent - CSV export — export the current view as a string or trigger a download, formatters included
- Custom cells — render any content per column in each framework's native idiom
- Slots — replace the toolbar, pagination, and empty state with your own
- Accessibility — semantic markup, ARIA row counts, keyboard navigation, and managed focus
- Sanitization — allowlist-based sanitizing of every string rendered to the DOM
- TypeScript — typed columns, options, and events across all four editions
Since 2013, CoreUI has been trusted by developers at the world's smartest companies
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
CoreUI Data Grid is at version 0.1.0 — stable enough to build on today, but not yet 1.0. You get every edition and every feature right now, plus all upcoming features and fixes as they land. The 1.0.0 release is planned for early September 2026; until then, expect occasional small breaking changes, always documented in the changelog with migration notes. In return, early access is the lowest price the Data Grid will ever have.
Four editions ship from one codebase: a vanilla JavaScript core plus React (CDataGrid), Vue (CDataGrid), and Angular (c-data-grid) bindings. They share the same markup, class names, and stylesheet, so behavior is identical across all four.
Row virtualization with a recycling row model keeps rendering fast into the hundreds of thousands of rows. For even larger or remote datasets, switch to server mode and let a data provider handle paging, sorting, and filtering on the backend.
Yes. Every column can render custom content, and the toolbar, pagination, and empty state are all replaceable slots — using factories in vanilla, components in React, scoped slots in Vue, and templates in Angular.
Yes. Provide a data provider and the grid switches to manual sorting, filtering, and pagination, emitting the state changes your backend needs. Stale in-flight responses are invalidated automatically so the view never shows outdated data.
Accessibility is built in: semantic table markup, correct aria-rowcount and aria-rowindex in both virtualized and paginated modes, keyboard navigation, and focus management after actions like hiding a column.
CoreUI Data Grid is a commercial CoreUI PRO product with its own documentation. A single license covers all four editions.