Releases: glideapps/glide-data-grid
Glide Data Grid 6.0.3
Fun fact: this release was done while riding in a 737 MAX. If this is the last release of GDG ever I pray I shorted Boeing on the way down. I guess this also puts me in the mile high npm club? Hurrah.
Improvements
- src now included in the package to make sure sourcemaps work
- readonly no longer sometimes ignore by uri cell, thanks @lukasmasuch
- Fixed the focus ring sometimes being clipped
- There is now an API
editOnType
to control if the overlay editor can be triggered by simply typing or not.
Glide Data Grid 6.0.2
New Features
- Add multiselect cell
- Add support for circular checkboxes in row marker
- Add ability to configure the editor bloom amount
Enhancement
- Bump react-select version
Bug Fixes
- Fix issue where highlight regions would sometimes not show when center region is only 1 column wide
- Trailing row no longer selectable via DND when not sticky
onItemHovered
no longer emitted when resizing a column, thanks @BrianHung- FIx bug where disabling the focus ring did not disable the background color
- Fix a clipping issue when vertical borders are not drawn
- Add ability to have a hover effect on text cells to preview editing
Glide Data Grid 6.0.1
Bug Fixes
- Fix bug where headers would not always redraw when animating
- Fix full API docs link, thank you @alistairholt
Glide Data Grid 6.0.0
🚨 Breaking Changes
New dependency
- canvas-hypertxt bumped to 1.0.3
- @linaria/react now added as dep (extremely tiny)
✌️ Farewell create react app 4
CRA 4 is no longer officially supported. While it is definitely possible to make it work, it may require extra work. CRA 5 works fine.
🚢 Better exports
Exports for Glide Data Grid are now done in a more standard esm compliant manner. This should enable better tree shaking.
🧼 Cell API cleanup
Some cells have had minor tweaks to their API to bring them in line with standard conventions. The ImageCell
and all the cells in the cells
package now uses the standard readonly
flag.
👋 Minimap removed
The minimap was awesome, and largely unused. It has been removed from this version of Glide Data Grid in the service of smaller packages and a more maintainable surface area. We appreciate your service 🫡
🎨 drawCell
callback improved.
The drawCell callback now receives a callback argument which paints the standard cell. This allows dramatically more flexibility with custom under and overdrawing of cells. It is also now a void method eliminating a source of confusion.
const drawCell: DrawCellCallback = React.useCallback(
(args, draw) => {
// Draw something below the cell drawing
draw()
// Draw something on top of the cell drawing
}, [])
🎉 New Features
💪 Kinetic super scroll on iOS
Are you the one person presenting data grids to your mobile users? This feature is for you. GDG will now artificially boost the framerate during kinetic scroll on iOS to maintain a smooth experience. This is still experimental, but if feedback goes well we intend to promote this to stable.
return (
<DataEditor
{...otherProps}
experimental={{
kineticScrollPerfHack: true,
}}
/>
);
🏁 Performance improvements when updating lots of data at once
Damage rendering now is 2x faster than the 5.0 series. This is enabled by reducing the amount of clipping during a damage pass. This improvement is what has made the DOOM easter egg on the main site possible. The easter egg may also be the reason for the improvement...
![CleanShot 2024-01-10 at 22 43 12@2x](https://private-user-images.githubusercontent.com/30443/295814770-33041725-7398-4c49-9ef1-c199482eb93c.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQxMDI1MTAsIm5iZiI6MTcyNDEwMjIxMCwicGF0aCI6Ii8zMDQ0My8yOTU4MTQ3NzAtMzMwNDE3MjUtNzM5OC00YzQ5LTllZjEtYzE5OTQ4MmViOTNjLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE5VDIxMTY1MFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWI3NWVjODNmOTUyN2UyMTAzMmY3MTAwZjAxOWNjMzIxNjA3OGY5ZGYzNWY4ODZiZjcyZmU2MTU2ZGQxNmFmNmUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.TL32tirabGOuvqiIAfjNSvR_mY6xzW4tt7yT18PeP5U)
🌐 UriCell improvements
The URI cell supports drawing an underscore on hovering a URI value via the hoverEffect
property. It also supports click events (e.g., to open the URL) via the onUriClick
property and uses the displayData
within the cell rendering.
⚽️ Add support for rounding radius in the theme
Configure the rounding radii of checkboxes, bubbles, skeletons, images, buttons, and other rounded elements via the optional roundingRadius
theming property.
🤕 Header menu icons can now be configured
Customize the header menu icon via the menuIcon
property in GridColumn
. It supports triangle
for the default menu icon, dots
for the three-dots menu icon, or a key of one of the icons passed to the headerIcons
prop.
📈 Sparkline cell now supports even more charts
![CleanShot 2024-01-10 at 22 37 25@2x](https://private-user-images.githubusercontent.com/30443/295813517-f88fe87c-833d-450b-8468-be52faba605d.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQxMDI1MTAsIm5iZiI6MTcyNDEwMjIxMCwicGF0aCI6Ii8zMDQ0My8yOTU4MTM1MTctZjg4ZmU4N2MtODMzZC00NTBiLTg0NjgtYmU1MmZhYmE2MDVkLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE5VDIxMTY1MFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTQ5ZmM0YzBiZTg0ODEzM2YxYjAzY2QwN2U4MjRmNDZhMTZiNWUwYWMxY2E2NWI2MzQ1ZjdiMmZkYWYyMDRjZWUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.T_bDHEK5yoeQa89nensPlciplradNal553DnrDav4U4)
The line
graphKind got renamed to area
. The new line
chart now renders just a simple line chart. Additionally, the x-axis can be hidden via hideAxis
.
🥶 Freeze trailing rows
![CleanShot 2024-01-10 at 22 36 58@2x](https://private-user-images.githubusercontent.com/30443/295813417-58b2603c-9113-44b2-9ab1-c79135e50cb9.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQxMDI1MTAsIm5iZiI6MTcyNDEwMjIxMCwicGF0aCI6Ii8zMDQ0My8yOTU4MTM0MTctNThiMjYwM2MtOTExMy00NGIyLTlhYjEtYzc5MTM1ZTUwY2I5LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE5VDIxMTY1MFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTU1YjczNjNlYzg0MTBhMTY2NDJkOGI5NDIwZGY1MWYwOGZjNjYzOTlmODBhOWJkYjRlNTY1M2FhZTY0NzEzOTQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.EzQl4WU4lPL07BINtOLcxTD-PRUcp6c3UydWu7aszAk)
Get going by specifying the number of freeze trailing rows you want.
return (
<DataEditor
{...otherProps}
freezeTrailingRows={2}
/>
);
💀 LoadingCell skeletons
![CleanShot 2024-01-10 at 22 34 25@2x](https://private-user-images.githubusercontent.com/30443/295813007-aac2ed4b-f1f4-44e6-b758-f30caf871f5f.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQxMDI1MTAsIm5iZiI6MTcyNDEwMjIxMCwicGF0aCI6Ii8zMDQ0My8yOTU4MTMwMDctYWFjMmVkNGItZjFmNC00NGU2LWI3NTgtZjMwY2FmODcxZjVmLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE5VDIxMTY1MFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTk4NTNlM2NhN2U5MGQzMTA2NDIxNWFhZjUxODdlODU0MDE5YmUzNmUzOTE2NmIxM2VjOTkzZmEwNzFhMWExNTQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.kIj6ZftTa7ortc4_jbHfNDpBTBctvt3nid3zW8IhJyE)
The loading cell can be configured to show skeletons when skeletonWidth
is set to a value > 0. The height can be configured via the optional skeletonHeight
property, and it also supports a randomized variability applied to the width via skeletonWidthVariability.
⌨️ Fully remappable keybindings
Keybindings can now be remapped instead of just turned off and on. More details here.
🪤 Focus trapping
There is now a trapFocus
prop that will cause the grid to prevent focus leaving the grid during caret browsing or pressing tab.
🙅♀️ Prevent column reordering
Reordering of columns can now be prevented as new column locations are proposed using the new onColumnProposeMove
callback. This allows for greater control over where users are allowed to drag columns.
💾 Copy and paste methods now available
The copy and paste functionality of the data grid is now exposed for direct usage by developers.
🌲 Tree view cell
![image](https://private-user-images.githubusercontent.com/2852129/295968969-258aabf8-b7ee-4dfb-842d-01e257e4b84a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQxMDI1MTAsIm5iZiI6MTcyNDEwMjIxMCwicGF0aCI6Ii8yODUyMTI5LzI5NTk2ODk2OS0yNThhYWJmOC1iN2VlLTRkZmItODQyZC0wMWUyNTdlNGI4NGEucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDgxOSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA4MTlUMjExNjUwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZWUyOGM2YmUyNGI5NmMyNzQzMmU5M2VlM2I5ZTkyNmI1NTg3ZmY2YjkzYjAwYTA3NTcxOGJhN2I3ZDA3NWQ1NyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.sQe39KHD9kCyojXRC5eqZXhcWf0MvgjZlldMHjO2WIU)
This cell represents the basic building block required to make collapsable and groupable rows. We will continue to improve support for row grouping in the rest of the 6.0.0 series.
⬇️ Dropdown cell improvements
Allow specifying label and value independently in dropdown cell and some other visual improvements.
🚀 Improvements
💍 Improved drawing of highlight and selection rings
When the selection ring or a highlight ring is at the right or bottom edge of the grid it will no longer be clipped out.
🦏 Safari performance improvements
Safari now renders around 2 to 5 times faster on mobile devices. Less hitching, better grids, papa johns.
🔦 Large highlight region support
Prior to 6.0.0 large highlight regions could cause excessively slow drawing performance. This is no longer a problem.
🔍 Search no longer renders eagerly
Don't use the search? No problem. You no longer pay the penalty for something you don't need.
🏁 Mouse hover render reduction
Hovering with the mouse no longer results in excessive react rendering.
👓 Hover interactions now can discern blank spots of grid from outside of grid
More details here: #811
↔️ Resize column indicator
![image](https://private-user-images.githubusercontent.com/2852129/295968494-b87ac8cb-9699-40f1-8816-d6c4e9bd0d17.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQxMDI1MTAsIm5iZiI6MTcyNDEwMjIxMCwicGF0aCI6Ii8yODUyMTI5LzI5NTk2ODQ5NC1iODdhYzhjYi05Njk5LTQwZjEtODgxNi1kNmM0ZTliZDBkMTcucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDgxOSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA4MTlUMjExNjUwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9OThkZjU3ZjUxODA3YTU0YWNkYTdjNjI1NDc4MTNjNzExYjhlZGJhMTlmMWFhNmFiZTk5YzlmNGE3NjFlZjZhOSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.gtgkGwnK9svOpIb8V3DssEcMnaKEFqa8LSvRFDfBx3o)
There is a new column resize indicator. It can be configured via the resizeIndicatorColor
theme property.
☕️ Fill handle improvements
- Controllable selection behavior
- FillPattern support
- Larger fill handle click region
- New visual representation
🔲 Get the bounds of the entire scroll area
If getBounds
get called with col
and row
as undefined, the bounding box of the entire data grid scroll area is returned.
🔚 Odds and ends
- GDG now prefixes most of the css classes it uses to avoid conflicting with commonly used names.
- Page up and down keybindings are now on by default
🐞 Bug Fixes
onDelete
now properly called when doing a cut operation.- Fixed a crasher caused by attemping to draw negative radius arcs.
- Fix a bug where
getBounds
would compute for the wrong cell. - Fixed multiple bugs where strict mode would be violated
- Horizontally center bubble cell editor to align with cell rendering.
- Fix copy escaping for array values.
- Fix issues with paste logic.
- Fix text cell editor color in Safari.
- Fix jittering issue with grow columns.
- Use the configured padding for measuring of number, row-id, dropdown and date-picker cells.
- Fix sparkline chart error related to arrays with less than 3 values.
6.0.0 beta 6
🚧 These release notes are under construction. They may contain misinformation, partial truths, and damned lies.
🚨 Breaking Changes
Better exports
Exports for Glide Data Grid are now done in a more standard esm compliant manner. This should enable better tree shaking.
Cell API cleanup
Some cells have had minor tweaks to their API to bring them in line with standard conventions. The ImageCell in particular now uses the standard readonly
flag.
👋 Minimap removed
The minimap was awesome, and largely unused. It has been removed from this version of Glide Data Grid in the service of smaller packages and a more maintainable surface area. We appreciate your service 🫡
drawCell
callback improved.
The drawCell callback now receives a callback argument which paints the standard cell. This allows dramatically more flexibility with custom under and overdrawing of cells. It is also now a void method eliminating a source of confusion.
New Features
Kinetic super scroll on iOS
Are you the one person presenting data grids to your mobile users? This feature is for you. GDG will now artificially boost the framerate during kinetic scroll on iOS to maintain a smooth experience.
Performance improvements when updating lots of data at once
The data grid can now handle damaging hundreds of thousands of cells per second without dropping a beat. See DOOM demo.
UriCell improvements
- hoverEffect
- onUriClick
Improvements
Search no longer renders eagerly
Don't use the search? No problem. You no longer pay the penalty for something you don't need.
🏁 Mouse hover render reduction
Hovering with the mouse no longer results in excessive react rendering.
Hover interactions now can discern blank spots of grid from outside of grid
More details here: #811
Resize column indicator
There is a new column resize indicator (include screenshot).
Fill handle improvements
- Controllable selection behavior
- FillPattern support
- Larger fill handle click region
- New visual representation
Odds and ends
- GDG now prefixes most of the css classes it uses to avoid conflicting with commonly used names.
- Page up and down keybindings are now on by default
Bug Fixes
onDelete
now properly called when doing a cut operation.- Fixed a crasher caused by attemping to draw negative radius arcs.
- Fix a bug where
getBounds
would compute for the wrong cell.
Glide Data Grid 5.3.2
Fixes a critical issue with older versions of Safari. The new copy/paste support was using a feature not supported until iOS 16.4:
https://caniuse.com/?search=lookbehind
If you need to support older version of iOS you should upgrade from 5.3.1 to this version.
Glide Data Grid 5.2.1
Changes
- Point release to fix issue with markdown editor not sending updates correctly.
Glide Data Grid 5.2.0
🥳 New Features
- REM support available via
scaleToRem
prop. You may want to specify font sizes in rems if set to try. - Theme can now set
headerIconSize
to control header icon sizes. rowMarkerTheme
now available for overriding the theme of the row marker column
🐞 Bug Fixes
- Spinners no longer obnoxiously large
- Fix case where horizontal resize cursor would not show
- Links cell now properly uses font cache
- Headers now respect horizontal padding of theme
Glide Data Grid 5.1.4
Bug Fixes
- Fix issue where initial scroll offset might render incorrecty for 1 frame
- Fix issue where selection could clobber initial scroll offset
- Update dependencies to supported versions
Glide Data Grid 5.1.3
Bug Fixes
- Avoid drawing spurious group header separator
- Emit header click from touch events
- Emit cell click from touch events
- Checkbox now scales with cell size
- Fix minor bug where vertical separator could go missing in rare situations