Major version 4.0 Removal of jQuery requirement

This is it SlickGrid is now jQuery free 🌊

In our previous v3.0.0 release (see Migration to v3.0), we dropped jQueryUI and now we are back at it and we dropped jQuery. SlickGrid now has only 1 dependency left, SortableJS and that's it. There are multiple benefits to drop jQuery and go vanilla (aka browser native), the biggest advantages are:

1. it should provide better performance
2. build size should be smaller (see table below)

However just a quick note on number 2, even if we dropped jQuery you might think the drop in file size would be 100% of jQuery file size but it's more like ~95%. Let me explain, in order to drop jQuery we had to find alternatives for some of jQuery functions & utils that were useful (like extend, offset, parents, ...), those were added into slick.core.js file. So in the end it is of course much smaller when we factor in jQuery's size, but it's also good to be aware that some of SlickGrid core files got slightly bigger. In other words, if you are still using jQuery than it will be a bigger for you, however it will be much smaller after dropping jQuery but not quite the size of jQuery itself, see the file size comparison table below for more info.

We also dropped the TreeColumns from our internal code (thanks to @6pac), this came from the X-SlickGrid frozen feature merge and it caused a few issues that were identified, so we decided to remove it. This will hopefully close issues and not create new ones. We also bring a new feature to better handle hidden columns references (see PR #775) and some new Example Hidden Columns and Frozen Grid with Hidden Columns to take advantage of a new getVisibleColumns() function and hidden column property.

Finally we also did some Spring cleaning and closed a lot of old issues, a few of them were just no longer relevant and we fixed what we could (ie, some accessibility issues were fixed).

See Migration below

Contributors

A huge thanks to @MarkoBL for getting the ball rolling, Marko did the first step of modifying all core files (all the files in the root). We went ahead and modified the rest (all Controls & Plugins), fixed a few bugs found and release a new version.

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 (all minified)	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 (about half the size) 🚀

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 completely (because it was using jQueryUI), just use Slick.Editors.Flatpickr instead

// make sure to include Flatpickr CSS/Script
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
+ <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

// and use the Flatpickr Editors
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 output got changed and it is now returning an EventData instance 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 the users in the world 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 builds and possibly TypeScript, we've opened a new Discussion - Possibly supporting ES6/ESM. At this moment it's all in the air, but it might come rather quickly (maybe even in just a couple months or weeks). 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 😄

If you have any problems with the new release, please open a new Discussion or Issue