v7.6.0

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

⚠️ Custom Editor/Filter should not be newed

Please note that Custom Editor/Filter should never be newed 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/Angular-Slickgrid 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/Angular-Slickgrid 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 now FilterConstructor and shouldn't be newed (6831c53)
• hide Toggle Dark Mode from Grid Menu by default (6ccd6f3)

Features

• rename SG editorClass & deprecate internalColumnEditor (e9664e0)

v7.5.0 - Dark Mode

7.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
• for more info read the Dark Mode documentation
• you can see Dark Mode demo in Example 1, Example 26 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 to 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

• remove width style on grid container for CSP safe, fixes #1368 (81e5fe1)
• switch to isomorphic-dompurify for SSR support (5b2f29d), closes /github.com/ghiscoding/Angular-Slickgrid/discussions/838#discussioncomment-8574215

Features

• add Dark Mode grid option (91c2726)

---

Installation

Please remember that all packages of @slickgrid-universal (v4.5.0) and Angular-Slickgrid (v7.5.0) must be updated at the same time and they will always get bumped on the same day to avoid any upgrade issues. You can also consult the Versions Compatibility Table - Wiki

please remember that Slickgrid-Universal monorepo now contains the biggest portion of the code (~90%), so most of the commits are now happening on that side.

1. review the Slickgrid-Universal changelog
2. and the Angular-Slickgrid changelog (above)

v7.4.1

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

No breaking change, the changes required were all internal and are totally transparent to the developers because 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, take a look at the Slickgrid-Universal 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"
-      ]
-    }
  }
}

You should also remove excel-builder-webpacker from allowedCommonJsDependencies since it's no longer a CJS dependency (it is now an ESM dep)

{
  "allowedCommonJsDependencies": [
    "autocompleter",
    "dompurify",
-   "excel-builder-webpacker",
    "flatpickr",
    "moment-mini",
    "stream"
  ],
}

Bug Fixes

• build: add compilation mode to fix npm publish (278531b)
• update to latest Slickgrid-Universal v4.4.1 (0e35d1b)
• change namespace imports to ESM default imports. Fixes Angular esbuild error on DomPurify with rowDetailView and no pre/post template #1362 (fac2b37)
• demo: change trading demo full screen z-index lower than ms-select (ae57fbe)

Features

• ExcelExport: migrate to Excel-Builder-Vanilla (ESM) (823317b)

---

Installation

Please remember that all packages of @slickgrid-universal (v4.4.1) and Angular-Slickgrid (v7.4.1) must be updated at the same time and they will always get bumped on the same day to avoid any upgrade issues. You can also consult the Versions Compatibility Table - Wiki

please remember that Slickgrid-Universal monorepo now contains the biggest portion of the code (~90%), so most of the commits are now happening on that side.

1. review the Slickgrid-Universal changelog
2. and the Angular-Slickgrid changelog (above)

v7.3.1

7.3.1 (2024-01-27)

Performance Improvements

• decrease number of calls to translate all extensions only once (21a5016)

v7.3.0

7.3.0 (2024-01-21)

Quick Info

This release brings some great new features, the most interesting one was contributed by @zewa666 which is a new Row Base Editing. The Row Based Edit plugin allows you to edit either a single or multiple specific rows at a time, while disabling the rest of the grid rows. See our new Example 35 and new Row Base Editing docs.

Another great but smaller feature is a new reorderable column option to help lock a column in place (for more info see Slickgrid-Universal PR which include a small animated gif of the feature). Note that this feature is better when used with column position as first or last columns in the grid.

⚠️ Warnings

I did add and set reorderable: false to the following 4 plugins, they can all be overriden when instantiating the plugin via their respective options

• Checkbox Selector Column (Row Selection)
• Row Detail
• Row Move Manager
• Row Base Editor

Thanks

A huge thanks for @zewa666 contribution, the new Row Base Editing is most probably the biggest contribution made so far to this project. Thanks a lot!!! 🎉

---

Features

• plugin: new Row Based Editing (1f768a5)

Performance Improvements

• resizer: autosizeColumns is called too many times on page load (591c0c7)

---

Installation

Please remember that all packages of @slickgrid-universal (v4.3.0) and Angular-Slickgrid (v7.3.0) must be updated at the same time and they will always get bumped on the same day to avoid any upgrade issues. You can also consult the Versions Compatibility Table - Wiki

please remember that Slickgrid-Universal monorepo now contains the biggest portion of the code (~90%), so most of the commits are now happening on that side.

1. review the Slickgrid-Universal changelog
2. and the Angular-Slickgrid changelog (above)

v7.2.0

7.2.0 (2023-12-30)

Quick Info

This release brings some perf improvements and also completes the CSP Safe implementation, there was 1 last DataView function that was not yet converted to be CSP Safe and now it is (don't forget to use the new useCSPSafeFilter if you also use the DataView). There is also a new CSP Compliance documentation that you can read.
Lastly a few other small features and fixes were pushed, see below. Happy Holidays 🎁

---

Bug Fixes

• sync row detail grid option to fix build (870cf47)

Features

• (re)add option to cancel Row Detail opening (03c2c64)

---

Installation

Please remember that all packages of @slickgrid-universal (v4.2.0) and Angular-Slickgrid (v7.2.0) must be updated at the same time and they will always get bumped on the same day to avoid any upgrade issues. You can also consult the Versions Compatibility Table - Wiki

please remember that Slickgrid-Universal monorepo now contains the biggest portion of the code (~90%), so most of the commits are now happening on that side.

1. review the Slickgrid-Universal changelog
2. and the Angular-Slickgrid changelog (above)

v7.1.0

7.1.0 (2023-12-21)

Note that the previous version had some regression issues for some users when publishing their build to external website like AWS or others... this has been fixed with this release. We're back to normal, happy holidays all :) 🎄

Features

• add example for custom header and footer (2d816da)
• reimplement highlight row, node-extend also fixes #1332, #1333 (5809965), closes #1334
• render header and footer content children (9203b0b)

---

Installation

Please remember that all packages of @slickgrid-universal (v4.1.0) and Angular-Slickgrid (v7.1.0) must be updated at the same time and they will always get bumped on the same day to avoid any upgrade issues. You can also consult the Versions Compatibility Table - Wiki

please remember that Slickgrid-Universal monorepo now contains the biggest portion of the code (~90%), so most of the commits are now happening on that side.

1. review the Slickgrid-Universal changelog
2. and the Angular-Slickgrid changelog (above)

v7.0.3

7.0.3 (2023-12-16)

⚠️ BREAKING CHANGES

• migrate to Slickgrid-Universal v4.0 new major version (#1325) (65aac1c)
• upgrade to Angular 17 (#1328) (b72a828)

Bug Fixes

• regression externalResouces should work globally, fix #1329 (72fb260), closes #1320
• read external resource when required (6e9af2a), closes #1320
• deps: update all Slickgrid-Universal dependencies (fdc5fa8)

Quick Info

This new release is merging SlickGrid into the project and is dropping the previous external 6pac/slickgrid dependency. The aim of this release is to be standalone, improve best practices & move towards CSP compliance while also making the project leaner. Merging SlickGrid into the projects has a few benefits, the biggest are (easier to troubleshoot, drop unused code, deduplicate code like DOM utils, decrease external dependencies usage and finally a small decrease in build size).

Another great feature in conjunction with this release is a new Documentation website powered by GitBook. This should be more pleasing to read and also easier to receive documentation changes (note that because of the changes from Wiki to GitBook, some of the links might be invalid and if you find any then please submit a PR).

Read the Migration to 7.0 for all the changes

Note if you have some build errors with missing slickgrid that is because you did not upgrade all Slickgrid-Universal dependencies that you may have, so in short do not install SlickGrid manually, this is wrong and we are no longer depending on 6pac/slickgrid.

---

Installation

Please remember that all packages of @slickgrid-universal (v4.0.3) and Angular-Slickgrid (v7.0.3) must be updated at the same time and they will always get bumped on the same day to avoid any upgrade issues. You can also consult the Versions Compatibility Table - Wiki

please remember that Slickgrid-Universal monorepo now contains the biggest portion of the code (~90%), so most of the commits are now happening on that side.

1. review the Slickgrid-Universal changelog
2. and the Angular-Slickgrid changelog (above)

v6.6.6

6.6.6 (2023-12-15)

Fixes a small regression introduced by PR #1320, I assume this fix to be the last fix under the v6.x branch

Bug Fixes

• regression externalResouces should also work globally (6afc9e9)

v6.6.5

6.6.5 (2023-12-12)

Deprecations

Please note that multiple built-in Formatters are now deprecated and will be removed in the next major version (which is coming very soon). Below is the list of Formatters and their alternatives with code sample on what to change. Note that the CSS class may vary depending on which UI framework you use.

Formatter removed	cssClass equivalent	alternative
Formatters.bold	cssClass: 'text-bold' or fw-bold
Formatters.center	cssClass: 'text-center'
Formatters.italic	cssClass: 'text-italic' or fst-italic
Formatters.alignRight	cssClass: 'text-right' or text-end
Formatters.lowercase	cssClass: 'text-lowercase'
Formatters.uppercase	cssClass: 'text-uppercase'
Formatters.fakeHyperlink	cssClass: 'text-underline cursor'	cssClass: 'fake-hyperlink'
Formatters.checkbox	to be removed	use the Formatters.iconBoolean
Formatters.deleteIcon	to be removed	use the Formatters.icon (see below)
Formatters.editIcon	to be removed	use the Formatters.icon (see below)
Formatters.infoIcon	to be removed	use the Formatters.icon (see below)
Formatters.yesNo	to be removed	create a custom Formatter

The alternative is to use cssClass as shown below

this.columnDefinitions = [
  { 
    id: 'firstName', name: 'First Name', field: 'firstName',
-   formatter: Formatters.bold
+   cssClass: 'text-bold'
  },
  { 
    id: 'lastName', name: 'Last Name', field: 'lastName',
-   formatter: Formatters.multiple, params: { formatters: [Formatters.uppercase, Formatters.bold] },
+   cssClass: 'text-uppercase text-bold'
  },
  {
    id: 'deleteIcon', name: '', field: '',
-   formatter: Formatters.deleteIcon, 
    // NOTE: we previously accepted "icon" and "formatterIcon" property in the past but these props will be removed
+   formatter: Formatters.icon, params: { iconCssClass: 'fa fa-trash pointer' }
  },
];

Bug Fixes

• devMode should be false or an object & use !important on text CSS utils (271ab1b)

---

Installation

Please remember that all packages of @slickgrid-universal (v3.7.2) and Angular-Slickgrid (v6.6.5) must be updated at the same time and they will always get bumped on the same day to avoid any upgrade issues. You can also consult the Versions Compatibility Table - Wiki

please remember that Slickgrid-Universal monorepo now contains the biggest portion of the code (~90%), so most of the commits are now happening on that side.

1. review the Slickgrid-Universal changelog
2. and the Angular-Slickgrid changelog (above)