Glide Data Grid 5.1.2

Fixes a potential crasher in safari.

Glide Data Grid 5.1.1

Release Notes

• Minor bugfixes for text input

Glide Data Grid 5.1.0

Release Notes

New API

• Theme now exports headerBottomBorderColor to control the color of the line directly under the header.
• onKeyUp/onKeyDown are now available to end users
• drawFocusRing can be set to false to disable the drawing of the focus ring.
• Custom ImageWindowLoader can be passed to the DataEditor to allow for custom image loading handling.
• customRenderer API - FIXME
• onColumnResize now has a 4th parameter which reports the new size of the column including any pixels added by the column grow parameter being set.
• onScroll API now supports scrolling to a specific pixel value and specifying the scroll target behavior
• ImageCell can now specify the rounding radius of the image being drawn
• Declarative model for setting scroll offset via scrollOffsetX and scrollOffsetY
• Add ability to control max auto column width independently of max column width settable by users
• initialScrollOffset

Improvements

• Our monorepo is now a fairly standard monorepo setup, huzzah
• Links cell added to glide-data-grid-cells
• Button cell added to glide-data-grid-cells
• Code splitting now works correctly again
• Bounce scrolling now supported on iOS and MacOS
• Add ability to set rendering strategy in experimental flags

Bug Fixes

• Fixed a rare bug that can cause flickering lines
• Glide Data Grid now properly handles inputs when used in a scaled environment
• Scrolling to the selected cell now works correctly when using a controlled gridSelection
• DropdownCell no longer automatically selects the first item and instead selects the current value.

Glide Data Grid 5.0.0

5.0.0 Release notes

🚨🚨 Breaking changes and porting guide

Glide Data Grid 5.0 no longer depends on styled-components! This means the Theme for your data grid is no longer provided via the ThemeProvider API.

Mandatory CSS file

Because Glide Data Grid no longer uses a CSS-in-JS solution, the CSS must be imported by consumers. This is usually achieved by doing the following somewhere in your project source.

import "@glideapps/glide-data-grid/dist/index.css";

Your bundler will take care of packing this in with the rest of the CSS your project requires. This is tested working with both next-js and create-react-app. Examples can be found in the test-projects folder.

Theme porting

If you are not providing a custom theme to your data grid there is nothing to do. If you are using a custom theme you should replace:

return (
    <ThemeProvider theme={gridTheme}>
        <DataEditor {...myEditorProps} />
    </ThemeProvider>
);

with:

return <DataEditor theme={gridTheme} {...myEditorProps} />;

Porting custom editors

All theme variables can now be accessed as a CSS variable:

.my-editor {
    background-color: var(--gdg-bg-cell);
    color: var(--gdg-text-dark);
}

All variables except lineHeight are available in this manner. The full list includes

--gdg-accent-color
--gdg-accent-fg
--gdg-accent-light
--gdg-text-dark
--gdg-text-medium
--gdg-text-light
--gdg-text-bubble
--gdg-bg-icon-header
--gdg-fg-icon-header
--gdg-text-header
--gdg-text-group-header
--gdg-text-header-selected
--gdg-bg-cell
--gdg-bg-cell-medium
--gdg-bg-header
--gdg-bg-header-has
--gdg-bg-header-hovered
--gdg-bg-bubble
--gdg-bg-bubble-selected
--gdg-bg-search-result
--gdg-border-color
--gdg-horizontal-border-color
--gdg-drilldown-border
--gdg-link-color
--gdg-cell-horizontal-padding
--gdg-cell-vertical-padding
--gdg-header-font-style
--gdg-base-font-style
--gdg-font-family
--gdg-editor-font-size

The theme can be accessed in JS by using the new useTheme hook:

import { useTheme } from "@glideapps/glide-data-grid";

const MyComponent: React.VFC = () => {
    const dataGridTheme = useTheme();
    alert(dataGridTheme.bgHeader);

    // ...
};

The theme object returned from useTheme may not be identical to the passed theme object if any theme overrides are in use or the passed theme object did not contain all required keys. The 4.2.0 series has also been updated to include CSS variables. This should allow any third party library of custom editors to support both 4.2 and 5.0 at the same time provided they don't need the theme in JS.

rightElementSticky replaced with rightElementProps

Previously the rightElement of a data editor could be made sticky by doing:

<DataEditor rightElement={el} rightElementSticky={true} />

This is now done by providing a rightElementProps

<DataEditor
    rightElement={el}
    rightElementProps={{
        sticky: true,
    }}
/>

⚠️ Removal of deprecated API

The following previously deprecated API's are no longer present

• drawCustomCell replaced by drawCell
• onColumnResized replaced by onColumnResize
• BooleanCell.allowEdit replaced by BooleanCell.readonly
• BooleanCell.showUnchecked no replacement has been defunct for a long time

🥳 New features

• react-virtualized-autosizer no longer used as a dependency
• Vertical and horizontal scroll shadows now available and configurable
• Cursor now settable per cell
• validateCell now receives the previous cell to make validation easier.
• Row marker header column now draws a checkbox rather than silently accepting inputs
• drawHeader now receives the index of the drawn header
• Value coercion can now return the desired selected range post coercion.
• rightElementProps new API which allows for making the right element not only sticky but also grow to consume leftover space.
• onCellsEdited is now always called prior to calling onCellEdited allowing for implementing a single edit callback.
• isDraggable can now be set to cell or header to allow dragging on just one or the other

🐞 Bug fixes

• Setting gridSelection externally will keep the newly selected selection in view.
• No longer crashes when calling getBounds with a cell that is not in the current range, and instead returns undefined.
• Drag scrolling now significantly smoother
• Headers now properly select with touch events
• Headers will not emit spurious click events when completing drag operations
• Copying in safari no longer beeps the browser
• Trailing row options theme now applies to the trailing row even if it is not sticky
• Many svg loading improvements
• onCellsEdited now correctly prevents onCellEdited from being emitted when requested
• Auto-sizing columns will no longer cause their headers to be truncated
• Context menus can now be correctly cancelled on all operating systems, not just Windows
• NextJS production builds no longer complain

Glide Data Grid 4.2.0

Release Notes

🥳 New Features

🌯 Text Wrapping

Just set allowWrapping to true on your TextCell

🗓️ Date Picker Cell

Available in the glide-data-grid-cells package.

✅ Data Validation

Let your users know the value they entered will not be accepted. You can also coerce values as they type.

Just provide the validateCell callback

readonly validateCell?: (cell: Item, newValue: EditableGridCell) => boolean | EditableGridCell;

➗ Percentage column sizing

2022-06-23_09-35-55.mp4

If your columns do not fill the entire width of the allocated area you can now allocate the leftover space to whatever column you want by setting the grow property on your column.

🖱️🖱️ Double click to size column

2022-06-23_09-39-55.mp4

🦾 Minor Improvements

• DropdownCell now attempts to follow theme.
• highlightRegions now can be set to have a solid color outline.
• Row Markers now display a handle when row drag and drop is enabled.
• appendRow now available in imperative handle, thank you @pzcfg
• onColumnResize now passes the index of the resized column as well as the column itself.
• Improve column resize performance.

🐞 Bug Fixes

• Protected cell rendering now handles being in selection correctly.
• Dragging on non-resizeable columns no longer shows a resize indicator.
• Search keybinding now works when caps-lock is pressed.
• Improve NextJS compatibility
• Disabling vertical border on the freeze column edge works correctly now
• Not every browser supports window.navigator.clipboard and we no longer crash.
• Newly appended rows with default values no longer get overwritten.
• Measurement of many cells improved

Glide Data Grid 4.1.0

Release Notes

🚨 Deprecations

• BooleanCell.showUnchecked now deprecated and replaced with passing null as the BooleanCell value.
• BooleanCell.allowEdit now deprecated and replace with BooleanCell.readonly.

Both deprecated options continue to work as intended, but implementors should begin migrating to the new options.

😲 New Features

🚣‍♂️ Improved support for styling of trailing row

trailingRowOptions of a GridColumn may now include a themeOverride and a disabled boolean which do what they say.

✅⁉️ Boolean cell supports indeterminate and empty states

BooleanCell can now take null or undefined as its data to show empty or indeterminate states respectively. To make this easier to remember, named exports are included for BooleanIndeterminate and BooleanEmpty.

👉👈 Support for overriding text alignment in cells

All GridCell types now support a contentAlign parameter which can be set to "right" | "left" | "center" and will cause the text in the cell to be aligned as requested. Thanks to @lukasmasuch

🪥 Custom cells can now handle Paste with ease

Custom cell renders can now optionally provide an onPaste callback which receives the CustomCells data property and a paste string. Implementors should return back a new data value which will then be used to create a new cell to pass to onCellEdited. This allows onPaste for custom cells to work the same as it does for all built in cells.

All cells shipped in glide-data-grid-cells have been updated to support the new mechanism.

🐳 Mass paste handling made easier

onCellsEdited will be invoked if multiple cells are to be pasted into. This receives a list of all cells which are about to receive an onCellEdited callback due to the paste or other mass edit event. This is intended to allow more efficient handling to implementors and minimize render cycles.

🕺 Basic animation support for custom cells

During a draw event for a custom cell, the cell may now call args.requestAnimationFrame() out of the passed args to the draw event. This will trigger the cell to be drawn again in the near term future for doing animations. Draw rate automatically throttles to around 30FPS after a fixed time with no breaks in animation.

🐜💪 Minor Improvements

• CompactSelection.remove now supports removing a slice instead of just an index. Thanks to @BrianHung
• Custom editors no longer automatically commit the tempValue when finished editing is called, allowing for editing to be properly cancelled by the custom editor.
• Text entry into a cell now more eagerly being edit mode. This makes things like entering a negative number much easier and improves foreign language support.
• Top and right edges of the grid will no longer draw a double border in some cases, thank you @lukasmasuch
• Visually center text with better algorithm which accounts for oddities from font to font
• Boolean cells now supported in paste.

🪲 Bug Fixes

• Slight improvements to the newline handling for overlay editors.
• Custom cells are now properly included in search results via the copyData property.
• Values copied out of the grid now copy raw values into HTML and display values into text. This improves copy/paste interop inside of Glide Data Grid.
• Ideal height calculation for Grid now properly accounts for trailing row.
• Focus will no longer be lost when interacting with cells outside of the visual viewport, thank you @BrianHung
• Fix isDraggable

Glide Data Grid 4.0.3

Release Notes

🚨 Deprecation notices

onColumnResized has been renamed to onColumnResize. This is to reflect the fact that it is an event that must be handled in order to have visual impact. The old event is still present and functions identically. It will be removed in the next major release.

🎊 New Features

💯 rowMarkerStartIndex

rowMarkerStartIndex allows for changing the default behavior of row markers. Instead of starting at 1 you can now start at any number you want.

⭐🛑 onColumnResizeStart/End events

The onColumnResizeStart and onColumnResizeEnd events provide start and stop notifications column resize interactions. The Data Grid itself does nothing with these events, but they are provided for user convenience.

🪝 Custom cell hook

A new hook is exported called useCustomCells. Documentation has been added to the API.md but the skinny here is that its a convenient and easy way to import well formatted custom cells. Further this should make it possible for multiple third parties to export custom cells in a well known format which can be consumed by a single hook to inject into the data grid.

🐞 Bug Fixes

• Fix crash when pasting onto custom cells
• Fix issue which could cause firefox not to render the grid
• Fix issue where delete callback could delete the wrong data
• Fix issue where boolean cell would not always respect allowEdit
• Fix issue where font theme may not be correctly applied
• Fix issue where rows would not apply border color settings on theme overrides

Glide Data Grid 4.0.1

• Fix issue where useColumnSizer would cause bouncing column sizes on resize, fixes #246
• Fix issue in React 18 where selection would oscillate back and forth.

See our 4.0.0 release notes for all the amazing news things in the 4.x line.

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 grid role 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

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 multi

When 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.

🐞 Bug Fixes

• Prevent issue with vertical underscroll on mobile devices.
• Minor performance improvements when rendering lots of empty text cells
• react-number-format is 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.

Glide Data Grid 3.4.0

3.4.0 Release Notes

New Features

🌉 Span Support

Cells can now be spanned across multiple columns. Spans are defined by setting the span property on GridCells. Requests for GridCells which are part of the same span must return the same information or undefined behavior will occur.

📦 Sources package released

glide-data-grid-source has been released alongside this release of glide-data-grid. The source package contains useful hooks which can be used to easily add collapsing column groups, sorting columns, and re-arrangeable columns onto existing data sources. You can try out all of these features on the new project homepage which exposes all of these features by using the source package.

🎨 getRowThemeOverride

Prior to the introduction of getRowThemeOverride the only way to implement striped rows in the data grid was to set a theme override for each cell. No longer. Striped rows are as easy as a single callback with mod 2.

🦣🐁 Automatic column sizing

The data grid is now capable of automatically sizing every column in the sheet. Simply leave out the previously required width parameter and instead replace it with the id parameter. The id must be stable and not simply the index of the column to avoid weird drag and drop behavior or performance issues.

Auto sized columns are sized be measuring the width of their first 10 cells. Fewer cells may be measured if the number of columns begins to exceed a 10 thousand columns.

🦊🏁 Firefox performance improvements

Through the magic of banging our heads against a wall repeatedly we have managed to bring firefox performance more in line with that of chrome. Even very large grids should scroll at or very near to 60fps in 3.4.0. Due to this the experimental.disableFirefoxRescaling has been replaced with experimental.enableFirefoxRescaling to reflect that this performance enhancement is now disabled by default. The data grid now renders between 2 and 10 times faster on firefox with large grids, depending on workload and GPU.

🔬 Minor features

• Support for insert to custom row index
• Add experimental flag for strict mode. In strict mode getCellContent never calls for cells outside the range of the last visible region sent to onVisibleRegionChanged
• Drilldown cells now render much faster

Bug Fixes

• Fix issue where drag scrolling may not stop when mouse click releases.
• Images in firefox will no longer flicker when recycling an image element
• Prevent header menu click events when resizing
• Fix issue where header could sometimes be blanked when rapidly moving the mouse
• Fix theming issues in some overlay editors and search interface
• Fix padding changes causing weird flickering artifacts
• Touch scrolling no longer selects cells as you scroll
• Boolean cells can again be checked/unchecked with the keyboard