Major version 4.0 Removal of jQuery requirement

This is it SlickGrid is now jQuery free 🌊

In our previous v3.0.0 (see Migration to v3.0) release, we dropped jQueryUI and now we are back at it and we dropped jQuery. There are multiple benefits to drop jQuery and go vanilla (aka native), the biggest advantages are: 1- it should provide slightly better performance 2- build size should be smaller

However just a quick note on number 2, do not imagine that jQuery size is a full gain. Let me explain, jQuery does provide a lot of functions & utils and we had to replace some of these functions (like extend, offset, parents`, ...) in order to remove jQuery entirely, so in the end it is of course much smaller anyway but it's good to be aware of that SlickGrid core files got a bit bigger. In other words, if you are still using jQuery, it will be a bigger for you, but after you are dropping jQuery than it would be much smaller but not quite the size of jQuery, see the table below for comparison.

See Migration below

Contributors

A huge thanks to @MarkoBL for getting the ball rolling

Size Comparisons

Below is a list of the typical SlickGrid files that you need to create a basic grid with Formatters and Editors. The file size comparison was done by looking at the size of the minified files (under dist/ folder) and were simply pulled from the unpkg site.

filename	before	after	notes
jQuery v3.7	86Kb (or 274Kb uncompressed)	0Kb	bye bye jQuery
slick.core.min.js	5.68Kb	9.02Kb
slick.dataview.min.js	16.9Kb	16.9Kb	same size
slick.editors.min.js	14.7Kb	13.9Kb	Slick.Editors.Date got removed, use Slick.Editors.Flatpickr instead
slick.formatters.min.js	0.84Kb	0.84Kb
slick.grid.min.js	110Kb	73.7Kb
slick.interactions.min.js	3.79Kb	3.95Kb
Total	237.91Kb	118.31Kb	we saved 119.6Kb 🚀

Migration

The migration is quite simple and straightforward

1. remove jQuery from your list of dependencies

// package.json
{
  "dependencies": {
-    "jquery": "3.6.1",
  }
}

2. Slick.Editors.Date got removed (because it was using jQueryUI), please use Slick.Editors.Flatpickr instead

let columns = [
- {id: "start", name: "Start", field: "start", minWidth: 60, editor: Slick.Editors.Date, sortable: true},
+ {id: "start", name: "Start", field: "start", minWidth: 60, editor: Slick.Editors.Flatpickr, sortable: true},

3. SlickGrid events (for most users there is nothing to change)

• subscribe are exactly the same, no changes required
• notify got changed and is now returning an EventData instead of returning a boolean value (or undefined). So, to get the returned value, you must now call a new getReturnValue() function.

For example inside the Header Menu Plugin, we had to change our code with the following

again note that notify is rarely used by regular users of SlickGrid, most users will want to subscribe and that call did not change.

// code changed in `plugins/slick.headermenu.js`
let callbackArgs = { "grid": _grid, "column": columnDef, "menu": menu };
- if (_self.onBeforeMenuShow.notify(callbackArgs, event, _self) == false) {
+ if (_self.onBeforeMenuShow.notify(callbackArgs, event, _self).getReturnValue() == false) {
  return;
}

Final Note

So for all these users that were avoiding SlickGrid because it required jQuery, please come back 😉

Also a quick note, we are already looking at v5.0 which will hopefully provide ES6/ESM build and possibly TypeScript. At this moment it's all in the air, but it might come rather quickly (maybe even in just a couple months). So stay tuned for more.

Please remember that this is an Open Source project, most of it is done in our spare time and we welcome any contributions. Also please be respectful and let's enjoy the new release 😄