Releases: ghiscoding/slickgrid-react
v5.3.1
v5.3.0
5.3.0 (2024-06-29)
Features
Bug Fixes
Installation
Please remember that all packages of @slickgrid-universal
(v5.3.2
) and Slickgrid-React
(v5.3.0
) must be updated at the same time and they will always get bumped on the same day to avoid any upgrade issues.
also remember that Slickgrid-Universal monorepo is where the biggest portion of the code exists (~90%), so most of the commits are now happening on that side.
- review the Slickgrid-Universal changelog
- and the Slickgrid-React changelog (above)
v5.2.0
5.2.0 (2024-06-18)
New Release Info
This new release brings Filter Shortcuts that once defined will be added as sub-menus the Column Header Menu. These shortcuts are nothing new in terms of what you can already do with Column Filters, however the main reason to use them is to define some filters with simple logic, for example give me all the Blanks or Non-Blanks Values or even better filter the last 6 months data. For more info and demo, take a look at:
- Example 6 - Filter "Next 20 days" with Date Range
- Example 15 - Filter "Description" Blanks/Non-Blanks and "Start" Until Now/Future
- Read the Filter Shortcuts docs on how to use it
Lastly there's also a new Example 37 which is showing Column Totals in the grid Footer (the code was taken from an old SlickGrid example).
Features
- add Footer Totals Row and fix footer styling (#366) (4f6226e)
- add new optional
filterShortcuts
to Column Filter (#365) (88b8e93) - paste multiline content as single cell (d415a51)
Installation
Please remember that all packages of @slickgrid-universal
(v5.2.0
) and Slickgrid-React
(v5.2.0
) must be updated at the same time and they will always get bumped on the same day to avoid any upgrade issues.
also remember that Slickgrid-Universal monorepo is where the biggest portion of the code exists (~90%), so most of the commits are now happening on that side.
- review the Slickgrid-Universal changelog
- and the Slickgrid-React changelog (above)
v5.1.0 - Filter Predicates
5.1.0 (2024-06-08)
New Release Info
This new release brings a ton of new features and most of the new feature ideas came from this great Stack Overflow question Angular Slickgrid - Custom Filter which the user asked if it was possible to create a custom filter as SQL LIKE
. So, from this idea in mind and considering that we already had a sortComparer
for custom Sorting but no ways to customize Filtering, now let's work around this idea shall we?
filterPredicate
for local JSON dataset (see Example 32 forSQL LIKE
demo)- new
filterQueryOverride
which is the filter override for Backend Services (OData / GraphQL) - new
OperatorType.custom
that can be used with above custom filter predicate/override - new Operator
a*z
(StartsWith & EndsWith combo) available for local JSON dataset and Backend Services - new Top-Header panel which now allows the user to use both Draggable Grouping and Header Grouping together, this just wasn't possible before (see Example 18)
This new release also brings a lot of improvements to the Excel Export with a new Example 36 which demos how to dynamically use Excel Formulas (e.g. Sums), you can even use Excel Formulas with Grouping to do Sums, isn't it awesome!? Let's just say that pretty much everything you can do in excel-builder-vanilla, you can probably do in Slickgrid-Universal.
Features
- add
filterQueryOverride
to GraphQL Service (#353) (7157271) - add
filterQueryOverride
to OData Service (#354) (8e53c4b) - add a
filterPredicate
option for user customization (#352) (abd9356) - add local data StartsWith/EndsWith (
a*z
) filter combo (#355) (23f3f9d) - add optional Top-Header for Draggable Grouping & Header Grouping (#358) (e4d1706)
- add StartsWith/EndsWith (
a*z
) to OData/GraphQL (#356) (643f8a8) - enhance Excel
valueParserCallback
with dataContext & new demo (#350) (e1e6c0d)
Bug Fixes
- demo: out of boundaries page Grid Preset should be unset (#347) (36a3a85)
- Draggable Grouping drop zone should always be 100% wide (b15abe4)
- TreeData: addItem should keep current sorted column (#359) (734a770)
Installation
Please remember that all packages of @slickgrid-universal
(v5.1.0
) and Slickgrid-React
(v5.1.0
) must be updated at the same time and they will always get bumped on the same day to avoid any upgrade issues.
also remember that Slickgrid-Universal monorepo is where the biggest portion of the code exists (~90%), so most of the commits are now happening on that side.
- review the Slickgrid-Universal changelog
- and the Slickgrid-React changelog (above)
v5.0.2
v5.0.1 - Modern UI
5.0.1 (2024-05-10)
New Major 5.0 Release
This new release brings a lot of changes oriented toward better UI/UX, our SVG icons are now pure CSS and can be colorized like any other text via the native CSS color
property (which helped a lot improving the Dark Mode Theme).
Another noticeable UI change is the migration of the date picker from Flatpickr
to Vanilla-Calendar-Pro, this new library has ESM support, it has modern styling and an awesome UI/UX. Another change that is mostly internal but is also indirectly connected to the date picker is the migration from MomentJS
to Tempo which is a new modern lib and is also packaged as ESM which is great for Tree Shaking. Lastly DOMPurify
is now optional, giving you the choice to install it or to use something else like isomorphic-dompurify
for SSR support... Please note that even if it is now optional, we strongly suggest that you install it nonetheless that is if you want to stay secure and CSP compliant (see migration below for more info).
I believe that with all of these recent changes, the project is pretty much feature complete and you should not expect any new major releases for a long time (hopefully) which is also why I decided to require Angular 18 as soon as it came out.
Note
Follow the Migration to 5.0 for all the changes
⚠ BREAKING CHANGES
- pure SVG icons, Moment to Tempo, Flatpickr to Vanilla-Calendar (#343)
- make DOMPurify as optional (#335)
- migrate from Moment to Tempo (#334)
- remove Font-Awesome and use new SVG icons (#331)
- migrate from Flatpickr to Vanilla-Calendar (#333)
Features
- migrate from Flatpickr to Vanilla-Calendar (#333) (41254f2)
- make DOMPurify as optional (#335) (41c1c2f)
- migrate from Moment to Tempo (#334) (da29dd1)
- pure SVG icons, Moment to Tempo, Flatpickr to Vanilla-Calendar (#343) (a27125c)
- remove Font-Awesome and use new SVG icons (#331) (7cb3670)
Bug Fixes
- we shouldn't always commit on focusout/blur (#332) (aab435b)
- remove Font-Awesome dependency (6463b5d)
Installation
Please remember that all packages of @slickgrid-universal
(v5.0.0
) and Slickgrid-React
(v5.0.1
) must be updated at the same time and they will always get bumped on the same day to avoid any upgrade issues.
also remember that Slickgrid-Universal monorepo is where the biggest portion of the code exists (~90%), so most of the commits are now happening on that side.
- review the Slickgrid-Universal changelog
- and the Slickgrid-React changelog (above)
v4.7.0
4.7.0 (2024-04-20)
Quick Info
This new release adds 2x new grid options defaultEditorOptions
and defaultFilterOptions
so that user can define global Editor/Filter options instead of having to duplicate same options on each column editorOptions
/filterOptions
. An example is shown below.
- Note: for
defaultFilterOptions
, we use the same keys as the Editor (date
,select
,slider
, ...) but please note that these 3 filters options have combined options into 1 prop for compound & range filters (e.g.date
is for bothcompoundDate
anddateRange
filter options).
this.gridOptions = {
defaultEditorOptions: {
autocompleter: { debounceWaitMs: 150 }, // auto-typed as AutocompleterOption
date: { minDate: 'today' },
longText: { cols: 50, rows: 5 }
}
}
Features
v4.6.3
4.6.3 (2024-04-01)
Quick Info
This release will now work with multiple tooltips on the same cell (e.g. multiple buttons with icons like the "Action" column in Example 35).
Bug Fixes
- allow multiple tooltips per grid cell (#318) (99d783a)
- revisit package
exports
to pass "are the types wrong" (#314) (62ea969)
Installation
Please remember that all packages of @slickgrid-universal
(v4.6.1
) and Slickgrid-React
(v4.6.1
) must be updated at the same time and they will always get bumped on the same day to avoid any upgrade issues.
v4.6.2
4.6.2 (2024-03-23)
Quick Info
This release upgrades multiple-select-vanilla
package, that I also maintained, with a much more modern UI with the use of SVG icons. The SVG icons in that external lib are now also written in pure CSS which helps for Dark Mode (in that mode, the primary color for checked icon is a lighter version of the primary color). Note however that the SVG icons in Slickgrid-Universal are not yet pure CSS since that would introduce breaking changes in Slickgrid-Universal (a new major version will be pushed later on to address that).
⚠️ Custom Editor/Filter should not be new
ed
Please note that Custom Editor/Filter should never be new
ed even though the documentation previously said otherwise, this has been corrected in this release via an update on the Column interface, so if you have any of them instantiating that way then please fix them to avoid build errors.
// same goes for Custom Filter
editor: {
// reference your custom editor class without instantiating it
- model: new CustomInputEditor()
+ model: CustomInputEditor
},
⚠️ internalColumnEditor
is deprecated and no longer needed
Note that in the past, SlickGrid and Slickgrid-Universal/Slickgrid-React were using 2 different references for editor
. The original SlickGrid was using editor
as a Class to be later instantiated (e.g. Editors.longText
) but that wasn't very convenient for the end users (you). For that reason I decided a long time ago to take this editor
and reassign to another ref named internalEditor
and then SlickGrid kept using editor
(read from editor.model
) and whenever the user wanted to read the SlickGrid editor after the grid was initialized, the user would have to get it from column.internalEditor
(because after the initialization editor
is SlickGrid's internal editor class not the one provided by the user), but that was so damn confusing... but now that Slickgrid-Universal is a standalone (no longer relying on 6pac/slickgrid
) I decided to get rid of this confusion, so with this new release the editor
remains the same to the user but the one used by SlickGrid just got renamed to editorClass
. So in summary, editor
is the same for the end user and editorClass
is what is defined by model: Editors.longText
and the internal ref swap that Slickgrid-Universal/Slickgrid-React was previously doing is no longer needed internally. Below is an example of when that would be in use
// previously, to add an item to the editor/filter collection
this.columnDefinitions = [{ id: 'complexity', editor: { model: Editors.singleSelect, collection: [{ value: 1, label: 'Simple' }, /*...*/ ]; }];
// then adding an item would require to read `internalColumnEditor`
// after grid init, our `editor` became `internalColumnEditor
- const complexityEditor = this.columnDefinitions[0].internalColumnEditor;
// BUT with this new release, adding a new item to the collection is as simple as
+ const complexityEditor = this.columnDefinitions[0].editor;
complexityEditor.collection.push({ value: 9, label: 'Hard' });
// and if you want to read the SlickGrid editor, you would now use
this.columnDefinitions[0].editorClass; // which is the same as `editor.model`
Bug Fixes
- Filter
model
is nowFilterConstructor
and shouldn't be newed (#310) (5f3f765) - hide Toggle Dark Mode from Grid Menu by default (#308) (074f07e)
Features
Bug Fixes
- invalid types exports (5ea0e19)
v4.5.0 - Dark Mode
4.5.0 (2024-03-05)
Dark Mode ✨
This is probably a UX change that many users will be happy to start using, however there are a few important notes to be aware of as shown below.
- Dark Mode must be enabled via a
darkMode
grid option, it will not auto-detect the color scheme from the browser (you can however easily do it yourself). There are a couple of reasons as to why it was created as a grid option, it's mostly related to the fact that a few features in the lib require the creation of certain DOM Elements that are appended to thebody
(e.g. ColumnPicker, GridMenu, LongTextEditor, CompositeEditorModal, ...) and it requires extra code in place that SlickGrid will take care of it for you but can only work via a grid option, and for that reason it simply cannot be just simple CSS classes. - SVG icon color are using a lighter gray by default, if you're using a Font family for the icons then that won't affect you however keep reading. As mentioned earlier, the SVG icons are using a light gray and that is because the same color must be used for both Light & Dark theme because at the moment the project will create the SVG with a fixed
fillColor
defined in SASS and once it is set, you cannot change it... you might ask, well can that be fixed in the future? The answer is Yes but... I did find that we can convert all SVG to pure CSS (using UnoCSS, by AntFu) approach but that will introduce some breaking changes and considering that I recently released a major version, I will wait couple more months to proceed with another major. Part of the breaking changes will be to drop support for Fonts and keep only SVGs internally in a future major release. - the Dark Mode Theme was created using CSS variables, you might need to tweak some of these variables depending on your primary color, see Slickgrid-Universal CSS variables
- also note that I'm not a Designer, so if you feel that some colors are off then please contribute a PR
- for more info read the Dark Mode documentation
- you can see Dark Mode demo in Example 1, Example 24 and Example 30. All of these examples have a Toggle Light/Dark Mode button and the Example 1 also has the extra browser auto-detect Dark Mode on the 1st grid only.
Also worth knowing that I also improved multiple-select-vanilla
by adding a new feature to replace tabIndex
by arrow navigation highlight. This feature will let you use the keyboard (up/down arrows or mouse hover) to navigate the select options and choose any of them (via Enter key) and all of that without losing your current focus (which is a lot better than using tabIndex
). This new feature should be a lot more UX friendly.
This is pretty much completing the roadmap of all the features that I wanted to add to this library, the first project started 7 years ago and I added a lot of new features over the years.
Bug Fixes
- add extra conditions to help strict mode (#302) (8b4d1f6)
- remove width style on grid container for CSP safe (#306) (529abab)
Features
Installation
Please remember that all packages of @slickgrid-universal
(v4.5.0
) and Slickgrid-React
(v4.5.0
) must be updated at the same time and they will always get bumped on the same day to avoid any upgrade issues.