CoreUI Data Grid v0.5.0 - Toolbar Parts, Edit Tracking and Data Validation

We are excited to announce the release of CoreUI Data Grid v0.5.0. The toolbar is now built from public parts you can compose and reuse, the grid can track edited cells and validate rows, rows and cells take your own classes, and you can reach a rendered row or cell by its id. This release has breaking changes, mostly in the toolbar and the column chooser, so read the Migration Notes before you upgrade. 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.
• The Vue edition now needs vue 3.5 or later.
• See the CoreUI Data Grid documentation for the setup steps of your edition.

What’s New

Added

• Toolbar parts: The built-in toolbar is now the default composition of public parts: Toolbar and Actions containers and the Columns, Export, Print, Undo, Redo, Search and Button parts, each with its own icon and label. A custom toolbar slot keeps the built-in actions and adds its own next to them instead of rebuilding every one. JavaScript uses toolbar.parts.* in the toolbar slot context, React and Vue the CDataGridToolbar* components, and Angular div[cDataGridToolbar], div[cDataGridToolbarActions] and the c-data-grid-toolbar-* components.
• Your own elements with the behaviour of a part: toolbar.bind(element, kind, options) in JavaScript, the useDataGridToolbar* hooks in React, the useDataGridToolbar* composables and the parts’ scoped slot in Vue, and the button[cDataGridToolbar*] and input[cDataGridToolbarSearch] directives in Angular. React useDataGridToolbar(), the Vue slot prop toolbar and the Angular DATA_GRID_TOOLBAR token give canUndo, canRedo, undo, redo and print to a toolbar built without parts.
• Edit tracking: With editTracking and an itemKey, the grid keeps the value each cell had before its first commit and marks every cell whose value in items differs from it with a corner marker and the description “Edited” for screen readers. isDirty(), getEditedCells() and clearEdited() report and reset the state, editedChange fires when the set of edited cells changes, and a column’s editEquals replaces Object.is. A commit the app refuses or applies later, an undo and an edit back to the old value all show the right state, because the grid compares with the data it receives.
• Data validation: validate(item) returns the problems of a row as { [columnId]: message }, or { message, level: 'warning' } for a problem that only marks the cell. The grid calls it for every rendered row, so data loaded with errors is marked before anyone edits it. A cell with an error gets an outline, the message as its description and tooltip, and aria-invalid when it is a grid cell. An error on the edited cell blocks the commit, errors the commit causes on other cells are announced, and isValid() and getInvalidCells(level) report every row the grid holds.
• Row and cell classes: rowClass({ item, row, rowIndex }) on the grid and cellClass({ value, item, row, cell, column }) on a column return classes the grid adds next to its own, recomputed on every render of the row.
• Rows and cells in the DOM: Every data cell carries its column key in data-coreui-column, and with itemKey every data row carries its id in data-coreui-row-id. getRowElement(id) and getCellElement(id, columnId) return the rendered row and cell, or null when the row is not rendered or the column is hidden.
• Instance access in React and Vue: React gets the grid’s methods through the new gridRef prop and Vue through the template ref, including undo() and redo(), which neither had before.
• @coreui/data-grid/toolbar, @coreui/data-grid/validate and @coreui/data-grid/announce: the toolbar rules, the validation rules and the page-level announcer every edition shares.
• Undo of a removed row announces that the history entry is no longer available instead of doing nothing, and undo or redo that empties its stack says so in the same announcement.

Fixed

• The search field shows the filter restored by stateKey (Vue, Angular), keeps typing when its own commit comes back, takes a filter written from outside, and keeps its text across a form reset.
• The column chooser focuses Show all when no column can be hidden, and closing it by its trigger no longer reopens it.
• In React, Vue and Angular, closing the column menu or the filter dialog with its own button puts focus back on the button instead of dropping it.
• A column chooser that goes away with its part or its feature while it holds focus passes focus to another part instead of losing it.
• A grid nested in a cell no longer takes the keyboard focus, the tab stop or the cell selection of the grid around it.
• Angular data cells no longer render class="undefined" when the column is not pinned.

Changed

• Column chooser: It is now a menu like the column menu, with one checkable item per column. Arrow keys, Home and End move between the items, a click or Space toggles a column and keeps the menu open, Enter toggles it and closes the menu, and Tab closes it and moves on from the trigger.
• Popups: The column chooser, the filter dialog and the column menu stay under their trigger on a page scroll or a window resize, no taller than the room left below, instead of closing.
• Announcements: The grid no longer renders its own live region; announcements go to one page-level region.
• Grid tooltip: It closes with Escape, stays closed on that control until another one shows a tooltip, and follows the data while it is open. A cell being edited shows no tooltip.

Bundle Size

• @coreui/data-grid is 73,160 B gzipped (from 67,377 B), and the lite entry 61,791 B (from 56,007 B).
• In the full bundle, the page-level announcer accounts for +1,180 B, the toolbar parts, popups and search field rule for +2,905 B, row and cell classes for +196 B, edit tracking for +609 B, data validation for +719 B, the row and cell elements for +143 B and the virtual-core update for +31 B.
• data-grid.css is 3,576 B gzipped (from 2,980 B) and data-grid.standalone.css 6,403 B (from 5,907 B), for the toolbar menus and button states, the height limit of the popups and the edited, invalid and warning cell markers.

Dependency Updates

• @tanstack/virtual-core 3.19.8, with its fixes for scroll anchoring after an explicit scroll and for scroll compensation while a touch owns the scroll, plus the matching React, Vue and Angular adapters (@tanstack/react-virtual 3.14.23, @tanstack/vue-virtual 3.13.49, @tanstack/angular-virtual 6.1.9).

Released Packages

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

Migration Notes

This release has breaking changes. After upgrading:

1. A commit that keeps the value cancels. Enter, Tab or a click outside an editor whose value equals the cell’s value fires editCancel instead of editCommit, before editValidate, and adds nothing to the undo history. The built-in text and number editors return the cell’s own value until the user types.
2. Custom toolbar slots. In JavaScript, elements with data-coreui-toolbar-* or data-coreui-global-filter inside your own slots no longer get the grid’s behaviour from those attributes: use toolbar.parts.* or toolbar.bind() in the toolbar slot, or the instance methods (undo(), redo(), print(), downloadCsv()) elsewhere. restoreState() no longer writes the filter into an arbitrary input; the search part shows the restored filter itself.
3. Column chooser markup. The chooser is div.data-grid-menu.data-grid-column-chooser[role="menu"], named by its trigger through aria-labelledby, and each column is a button[role="menuitemcheckbox"] with aria-checked instead of a checkbox input. data-coreui-column-chooser-option moves to that button, and .data-grid-column-chooser-option and .data-grid-column-chooser-footer are gone. Tests that set checked and dispatched change click the item instead.
4. Popups and the column menu. Popups stay open on a scroll. The column menu items take tabindex="-1" and are reached with the arrow keys, and Tab closes the menu.
5. Live region. Tests that read the grid’s own [aria-live] region read the last message of the page-level region instead: [data-coreui-live-announcer] [aria-live="polite"] > :last-child.
6. Focused toolbar buttons. A focused toolbar button that becomes unavailable gets aria-disabled="true" and becomes natively disabled only after focus moves away. Disabled toolbar buttons keep pointer-events, so their tooltip shows.
7. Labels. Complete translations typed as DataGridLabels need the three new keys historyEntryUnavailable, undoneLastAnnouncement and redoneLastAnnouncement.
8. Vue: the peer dependency is vue >=3.5.
9. React: slots.toolbar is a component that receives slotProps.toolbar next to table and labels; type your props by augmenting CDataGridToolbarSlotProps.
10. Angular: the c-data-grid-toolbar and c-data-grid-column-chooser components are gone; the toolbar is div.data-grid-toolbar with c-data-grid-toolbar-* parts. DataGridComponent loses toggleColumnChooser(), closeColumnChooser(), showAllColumns(), resetColumns(), toggleColumnVisibility(), toolbarConfig, toolbarEnabled, announcement, openColumnChooser, columnChooserColumns and the toolbar*IconTemplate signals; use the columns part or directive, and table for visibility. openFilterMenu now holds { key, trigger } and openMenu holds { key, trigger, id }. exportCsv(), print(), undo(), redo(), canUndo and canRedo stay.

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