CoreUI Data Grid v0.4.0 - Safer Lookups and Smoother Virtualization

We are excited to announce the release of CoreUI Data Grid v0.4.0. This release fixes how the grid finds its own cells when a column key contains special characters, makes the Angular edition emit state events only on a real change, ships proper ESM type declarations, and improves virtualized scrolling. As always, everything below is available in all four editions - JavaScript, React, Vue, and Angular.

Speed up your responsive apps and websites with fully-featured, ready-to-use open-source admin panel templates—free to use and built for efficiency.

Angular

Bootstrap

React.js

Vue.js

How to Update

Install the package for your framework:

# Vanilla JavaScript
npm install @coreui/[email protected]

# React
npm install @coreui/[email protected]

# Vue
npm install @coreui/[email protected]

# Angular
npm install @coreui/[email protected]

• All editions require the CoreUI stylesheet (@coreui/coreui-pro or @coreui/coreui, version 5 or later) plus the data grid stylesheet shipped with the package.
• See the CoreUI Data Grid documentation for the setup steps of your edition.

What’s New

Added

• @coreui/data-grid/selector: escapeAttributeValue, the helper every edition uses to put a column key or row index into an attribute selector.

Fixed

• Column keys with ", \ or a line break: The grid’s own DOM lookups interpolated the key into an attribute selector as is. A " or a line break made querySelector throw, and a \ silently matched another column, so arrow navigation, focus restore, menu and filter refocus and column drag stopped or hit the wrong cell. All four editions now escape the key.
• Angular state events for unchanged state: Re-applying the same state, for example the same sorting or column visibility, emitted sortingChange or visibilityChange again with the unchanged object. The Angular edition now emits only on a real change, like the other three.
• ESM type declarations: An ESM app compiling with module: node16 and skipLibCheck: false got errors from the declarations of the JavaScript, React and Vue packages. The import condition now serves ESM .d.mts files. CommonJS apps need nodenext for the same check.

Changed

• Virtualization: The viewport is measured without its scrollbar, iOS momentum scrolling is handled, and when an already measured row that straddles the top edge grows (autoRowHeight), the rows below move instead of the scroll position.
• The React edition is developed and tested on React 19, and React 18, the peer floor, is tested in CI.

Bundle Size

• @coreui/data-grid is 67,377 B gzipped (from 64,844 B), and the lite entry 56,007 B (from 53,699 B).
• In the full bundle, the virtualization update accounts for +3,138 B (+2,241 B of it the iOS momentum-scroll handling), the other dependency updates for -690 B, escaping the keys for +70 B, code-style rewrites for +20 B and the shorter version banner for -5 B.
• data-grid.css is unchanged; data-grid.standalone.css grows by 62 B gzipped because Sass writes six dark-mode tokens as percentage rgb().

Released Packages

• @coreui/[email protected]
• @coreui/[email protected]
• @coreui/[email protected]
• @coreui/[email protected]

Migration Notes

There are no breaking changes. After upgrading:

1. Install the updated package for your edition.
2. If an Angular app relied on a second sortingChange, visibilityChange or similar event for an unchanged state, it now gets only the first.
3. With autoRowHeight, a row that grows while it straddles the top edge now pushes the rows below it instead of moving the scroll position.

For the full feature list and setup guides for every edition, visit the CoreUI Data Grid documentation.