Skip to content

Releases: ghiscoding/slickgrid-universal

v5.0.1

11 May 20:53
@github-actions github-actions
v5.0.1
4affd2c
Compare
Choose a tag to compare
v5.0.1

5.0.1 (2024-05-11)

Bug Fixes

Contributors

ghiscoding and renovate-bot
Assets 2
Loading

v5.0.0 - Modern UI

10 May 00:15
@github-actions github-actions
v5.0.0
526fc83
Compare
Choose a tag to compare
v5.0.0 - Modern UI

5.0.0 (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).

Note

Follow the Migration to 5.0 for all the changes

⚠ BREAKING CHANGES

  • pure SVG icons, Moment to Tempo, Flatpickr to Vanilla-Calendar (#1518)

Features

Bug Fixes

Contributors

ghiscoding and ghiscoding-SE
Assets 2
Loading

v5.0.0-beta.3

09 May 03:23
@github-actions github-actions
v5.0.0-beta.3
26cd69e
Compare
Choose a tag to compare
v5.0.0-beta.3 Pre-release
Pre-release

5.0.0-beta.3 (2024-05-09)

5.0 Beta Release, please follow the Migration Guide v5 for all info.

Bug Fixes

Contributors

ghiscoding
Assets 2
Loading

v5.0.0-beta.2

07 May 03:56
@ghiscoding ghiscoding
v5.0.0-beta.2
821e9e3
Compare
Choose a tag to compare
v5.0.0-beta.2 Pre-release
Pre-release

5.0.0-beta.2 (2024-05-07)

5.0 Beta Release, please follow the Migration Guide v5 for all info.

⚠ BREAKING CHANGES

  • migrate from Moment to Tempo (#1507)
  • common: make DOMPurify as optional sanitizer grid option (#1503)
  • styling: delete "bare" Themes but keep "lite" & add to Bootstrap (#1493)
  • common: migrate from moment to moment-tiny (#1456)
  • filters: remove native Filters.select (#1485)
  • styling: delete checkmarkFormatter and any Font-Awesome related (#1484)
  • common: migrate from Flatpickr to Vanilla-Calendar (#1466)
  • styling: remove SASS math.div polyfill (#1483)
  • styling: convert SVG icons to pure CSS (#1474)

Features

Bug Fixes

Contributors

ghiscoding and ghiscoding-SE
Assets 2
Loading

v4.7.0

20 Apr 00:11
@github-actions github-actions
v4.7.0
185b6f9
Compare
Choose a tag to compare
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 both compoundDate and dateRange filter options).
this.gridOptions = {
  defaultEditorOptions: { 
    autocompleter: { debounceWaitMs: 150 }, // auto-typed as AutocompleterOption
    date: { minDate: 'today' },
    longText: { cols: 50, rows: 5 } 
  }
}

Bug Fixes

Features

Contributors

ghiscoding, zewa666, and ghiscoding-SE
Assets 2
Loading

v4.6.1

31 Mar 19:00
@github-actions github-actions
v4.6.1
445c8be
Compare
Choose a tag to compare
v4.6.1

4.6.1 (2024-03-31)

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 22

Bug Fixes

Contributors

ghiscoding
Assets 2
Loading

v4.6.0

23 Mar 18:15
@github-actions github-actions
v4.6.0
e00a993
Compare
Choose a tag to compare
v4.6.0

4.6.0 (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).

⚠️ internalColumnEditor is deprecated and no longer needed

Note that in the past, SlickGrid and Slickgrid-Universal 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 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

Features

Contributors

ghiscoding, zewa666, and ghiscoding-SE
Assets 2
Loading

v4.5.0 - Dark Mode

05 Mar 03:14
@github-actions github-actions
v4.5.0
882b8bc
Compare
Choose a tag to compare
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 the body (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
  • you can see Dark Mode demo in Example 1, Example 7, Example 12 or Example 16. All examples have a Toggle Light/Dark Mode button and Example 1 also has the 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, this project started 7 years ago and I added a lot of features over the years.

Bug Fixes

Features

Contributors

ghiscoding and ghiscoding-SE
Assets 2
Loading

v4.4.1

13 Feb 06:01
@github-actions github-actions
v4.4.1
4a97127
Compare
Choose a tag to compare
v4.4.1

4.4.1 (2024-02-13)

Quick Info (Excel Export)

this new release is mainly targeting @slickgrid-universal/excel-export 🚀

We are migrating from excel-builder.js to a new fork Excel-Builder-Vanilla, the approach is a very similar to what I have done previously with multiple-select-vanilla, which is to create new forks of the project, and it is all about modernizing the project. This migration brings a lot of goodies by using this new Excel-Builder-Vanilla, it was rewritten in TypeScript, dropped Q (replaced by regular Promise), dropped Lodash (now uses native code) and finally replaced JSZip with fflate which itself also has an ESM build giving us Tree Shaking and it is also giving us better perf by using Web Workers (when using CSP, you might need to adjust your CSP rules). Why the switch? The reason is mainly to be ESM ready because technologies are evolving and ESM is really the future (the next release of ViteJS is also expected to drop CJS (CommonJS) support). The switch has other benefits too, the most noticeable one being the large decrease of its build size (that is because we dropped Q and Lodash).

You might be wondering, why not switch to a more popular library like SheetJS or ExcelJS? Well, believe or not, all these projects are still written as CJS with no foreseeable support to ESM builds. For that reason you cannot take advantage of proper Tree Shaking which mean that whoever rely on these projects, are in fact downloading their entire (large) library and all their dependencies. We certainly don't need all of these features (ie: we only want to build an Excel, not read it), all we need is to export to Excel and this is exactly what Excel-Builder-Vanilla is giving us in an ESM build and it is also extremely small since it's only targeting Excel file creation. 🏗️

Below are the migrating advantages to Excel-Builder-Vanilla

  • rewritten in TypeScript (providing us with TS Types (d.ts)
  • dropped very old dependencies that are no longer necessary (Q and Lodash)
  • switched from JSZip to fflate (has ESM support with Tree Shaking and also better perf by using Web Workers)
  • big decrease in the final build size (our standalone build (.zip), used in Salesforce, dropped by almost 10%)

No breaking change, the changes required were all internal and are totally transparent to the developers since the API is exactly the same as before, the only difference will be your build size decrease ;)

For a very customized view of what you can do with Excel-Builder and Slickgrid-Universal, take a look at the Example 2, try to group by any column and then Export to Excel to see the very customized Excel output.

Note that if you had a JSZip path defined in your tsconfig.json, you can now remove it. that is because we migrated to fflate and it doesn't require any special config.

{
  "compilerOptions": {
-    "paths": {
-      "jszip": [
-        "node_modules/jszip/dist/jszip.min.js"
-      ]
-    }
  }
}

Bug Fixes

Features

Contributors

ghiscoding, zewa666, and renovate-bot
Assets 2
Loading

v4.3.1

27 Jan 19:13
@github-actions github-actions
v4.3.1
aeade05
Compare
Choose a tag to compare
v4.3.1

4.3.1 (2024-01-27)

Bug Fixes

Performance Improvements

Contributors

ghiscoding and renovate-bot
Assets 2
Loading