CoreUI Data Grid v0.3.0-rc.0 - Right-to-Left Layouts

We are excited to announce the release of CoreUI Data Grid v0.3.0-rc.0. This release brings right-to-left layouts to the whole grid - column order, the live reorder preview, resizing, and keyboard navigation - without an option to flip, a separate stylesheet, or a mirrored build. 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

• Right-to-left layouts: Set dir="rtl" on the grid or any ancestor and the whole grid follows - column order, the live reorder preview and its drop slot, the resize handle and the direction that widens a column, and the two horizontal arrow keys for both cell navigation and range selection. There is no RTL option, no separate stylesheet, and no mirrored build: the grid reads its own computed direction, so an RTL subtree inside an LTR page works, and flipping dir on a live grid is picked up without re-creating it. Documented per edition under Guides → RTL.
• @coreui/data-grid/direction: The direction helpers as a subpath, so the framework editions share one implementation.

Changed

• The pointer drag engine works on a logical axis rather than on rect.left. Behavior in LTR is unchanged, and the compiled CSS is byte-identical apart from the resize handle moving from right to inset-inline-end.
• columnResizeDirection is passed to table-core, and re-read when a resize starts, so a direction flipped after initialization still applies.

Bundle Size

• @coreui/data-grid is 64,844 B gzipped (from 64,577 B), and the lite entry 53,699 B (from 53,432 B).
• RTL support cost +267 B, the same in both bundles - it is our own code, not a table-core feature, which is the rule the lite bundle is held to.

Released Packages

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

Migration Notes

This is a release candidate with no breaking changes announced in the published release notes. After upgrading:

1. Install the updated package for your edition.
2. Left-to-right layouts need no changes - behavior is unchanged.
3. If you override the resize handle in your own CSS, note that it moved from right to inset-inline-end.

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