Glide Data Grid 4.0.0
4.0.0 Release Notes
🚨🚨 Breaking API Changes
📦 DataEditorContainer gone
The DataEditorContainer wrapper is dead. Long live the now permanently infused DataEditorContainer. The DataEditor now has optional width/height properties which act exactly like how the container used to work, when not set the DataEditor will now attempt to reasonably self size.
Further a className can now be passed to have direct control over the container sizing. Warning, messing around too much with the container may cause very unexpected behavior.
✅ Selection API changes
The selection of the Data Grid has been unified into a single object. This dramatically reduces the complexity of handling selection scenarios involving multiple types of selection, watching for clearing of selections, and responding to selection states.
interface GridSelection {
readonly current?: {
readonly cell: readonly [number, number];
readonly range: Readonly<Rectangle>;
readonly rangeStack: readonly Readonly<Rectangle>[];
};
readonly columns: CompactSelection;
readonly rows: CompactSelection;
}This means that the selectedColumns and selectedRows properties are now a part of the selection property. The new rangeStack is used when selecting multiple cell ranges.
getCellsForSelection changes
getCellsForSelection has a different API in 4.0 due to the GridSelection changes. Instead of passing a GridSelection it simply passes a Rectangle.
To further improve the consistency of data access for developers, getCellsForSelection can be implemented by passing true. This causes the data grid to internally use getCellContent whenever getCellsForSelection would normally be needed.
onDelete replacing onDeleteRows
onDeleteRows is gone and replaced with onDelete.
onDelete?: (selection: GridSelection) => boolean | GridSelection;The onDelete callback receives the current GridSelection and returns either a boolean indicating if the deletion event should continue or a new GridSelection which will be deleted instead. This is useful if, for example, you wish to delete rows entirely when they selected rather than simply clearing their contents.
🔍 Search Changes
Now that getCellsForSelection can be trivially default implemented, search depends on a getCellsForSelection implementation being set, even if it's just the default true option.
🥳💃 New Features
🦾 Accessibility Overhaul
One of the major focuses of the Glide Data Grid 4.0 release, and in fact one of the major reasons the API was broken is to allow us to further improve the accessibility of the data grid. There are too many improvements to list but here are some highlights
- Conformance with all major expected keybindings
- Ensure there are no more tab traps
- Improved screen reader support
- Faster screen reader updating
- Allow performing complicated selects of rows and columns with keyboard only
- Port to using with a
gridrole in accessibility tree - Properly set many more aria tags including
- aria-multiselectable
- aria-rowcount
- aria-colcount
- aria-selected
- aria-rowindex
- aria-colindex
- aria-readonly
- Accessibility grid now matches visual output 1:1
- Tabbing into the grid now auto-focuses the first cell if nothing is focused
- Focus capture now has less focus juggling, improving screen reader behavior
- Prevent issue with vertical underscroll on mobile devices.
- Minor performance improvements when rendering lots of empty text cells
react-number-formatis now lazy loaded to improve initial load times.- Shift+enter now correctly moves the focus to the cell above.
- Fix off by one error with screen-reader columns
- Overlay editors will attempt to move back on screen when being forced out, requires InteresectionObserver to work.
This all works out of the box, there is no configuration required. No special modes you have to set, nothing. We offer no capacity to turn off accessibility support, and at this time never intend to.
While it is not required to have a fully accessible grid, we strongly recommend turning on the pageUp and pageDown keybindings listed below. When enabled the data grid acts in a more standards compliant manner, but it will swallow pageup/down commands when focused. For maximum compatibility we have left these keybinds off by default.
⌨️ Keybinding Improvements
4.0.0 introduces a lot of improvements to keybinding handling to be more in line with the suggested aria keybindings,
Keybindings can be controlled with the newly introduced keybinding property which takes a list of flags to enable/disable certain key combos.
const keybindingDefaults: Keybinds = {
selectAll: true,
selectRow: true,
selectColumn: true,
downFill: false,
rightFill: false,
pageUp: false,
pageDown: false,
clear: true,
copy: true,
paste: true,
search: false,
first: true,
last: true,
};| Key Combo | Default | Flag | Description |
|---|---|---|---|
| Arrow | ✔️ | N/A | Moves the currently selected cell and clears other selections |
| Shift + Arrow | ✔️ | N/A | Extends the current selection range in the direction pressed. |
| Alt + Arrow | ✔️ | N/A | Moves the currently selected cell and retains the current selection |
| Ctrl/Cmd + Arrow | Home/End | ✔️ | N/A | Move the selection as far as possible in the direction pressed. |
| Ctrl/Cmd + Shift + Arrow | ✔️ | N/A | Extends the selection as far as possible in the direction pressed. |
| Shift + Home/End | ✔️ | N/A | Extends the selection as far as possible in the direction pressed. |
| Ctrl/Cmd + A | ✔️ | selectAll |
Selects all cells. |
| Shift + Space | ✔️ | selectRow |
Selecs the current row. |
| Ctrl/Cmd + Space | ✔️ | selectCol |
Selects the current col. |
| PageUp/PageDown | ❌ | pageUp/pageDown |
Moves the current selection up/down by one page. |
| Escape | ✔️ | clear |
Clear the current selection. |
| Ctrl/Cmd + D | ❌ | downFill |
Data from the first row of the range will be down filled into the rows below it |
| Ctrl/Cmd + R | ❌ | rightFill |
Data from the first column of the range will be right filled into the columns next to it |
| Ctrl/Cmd + C | ✔️ | copy |
Copies the current selection. |
| Ctrl/Cmd + V | ✔️ | paste |
Pastes the current buffer into the grid. |
| Ctrl/Cmd + F | ❌ | search |
Opens the search interface. |
| Ctrl/Cmd + Home/End | ✔️ | first/last |
Move the selection to the first/last cell in the data grid. |
| Ctrl/Cmd + Shift + Home/End | ✔️ | first/last |
Extend the selection to the first/last cell in the data grid. |
📏 Multi-Range selections
The data grid now supports multiple selections. Click+Drag to make an initial selection, then Ctrl + Drag to add another.
rangeSelect?: "none" | "cell" | "rect" | "multi-cell" | "multi-rect"; // default rect
columnSelect?: "none" | "single" | "multi"; // default multi
rowSelect?: "none" | "single" | "multi"; // default multiWhen multi-select is enable, more than one range, row, or column can be selected at a time.
🤝 Selection blending
Prior to v4.0.0 the data grid did not allow for mixing of column, row, and range based selections. With 4.0.0 this is now possible to enable.
type SelectionBlending = "exclusive" | "mixed";
rangeSelectionBlending?: SelectionBlending;
columnSelectionBlending?: SelectionBlending;
rowSelectionBlending?: SelectionBlending;When a column/range/row selection blending is set to "exclusive", any other types of selections will be cleared when a selection of that type is made. When a selection of a different type is made, exclusive selections will also be cleared. In "mixed" mode range, column, and row selections can be blended into a single selection.
✨ Highlight Regions
interface Highlight {
readonly color: string;
readonly range: Rectangle;
}
highlightRegions?: readonly Highlight[];Highlight regions can be provided to highlight specific ranges and show the user contextually important cells.
🖌️ Custom editor improvements
Custom editors can now receive the initial input value when a user begins typing on a cell. Further they can define a deletedValue callback when is responsible for emptying the CustomCell on delete.
📱😮💨 Diagonal Scroll Prevention
Passing preventDiagonalScrolling={true} will cause the data grid to lock to a single scroll axis. This is particular useful for mobile and touch devices where diaganol scrolling can be hard to avoid intentionally.
🍷 fillHandle added
Set fillHandle={true} to active a mouse interactive downfill handle! The little blue box makes its first appearance in glide-data-grid.
😴😲 onCellActivated
There is now a callback for whenever a cell is activated. Cell activation normally opens the overlay, but this event emits even if no overlays are allowed for the cell in question.
⛰️ Range cells
The glide-data-grid-cells package now has a range cell.
🖼️ Faster image loading
With the 4.0.0 release we are dramatically improving the image loading experience when rapidly scrolling. Image downloads are cancelled more aggressively leading to shorter times between scroll stopping and images loading.