Major version 4.0 Removal of jQuery requirement

This is it SlickGrid is now jQuery free 🌊

In our previous v3.0 release (see Migration to v3.0), we dropped jQueryUI and now in v4.0 we are going even further and are now dropping jQuery entirely. You can still use jQuery but it's no longer a dependency. SlickGrid only has 1 dependency left, SortableJS and that's it. There are multiple benefits in dropping jQuery and go the vanilla route, the biggest advantages are:

1. it should provide better performance (browser native)
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 that the drop in size would equal to jQuery's file size, however it's more like ~90-95% in saving. The reason is simple, in order to drop jQuery we had to find alternatives for some jQuery's functions & utils that are still needed (things like extend, offset, parents, ...) and those were added into the slick.core.js file (so that file got a slightly bigger). So in the end it is of course much smaller when the user decides to remove jQuery entirely, but it's also good to be aware that some of SlickGrid core files got slightly bigger (see below). In other words, if you are still using jQuery then it will be a slightly bigger for you, however it will be much smaller once you finally drop jQuery but not quite the size of jQuery size itself, see the file size comparison table below for more info.

We also dropped the TreeColumns from our internal code (thanks to @6pac), this code came in when we merged X-SlickGrid frozen feature and it caused a few issues that were identified, so we decided to remove it since we don't see any benefits to using it. This will hopefully close issues and not create new ones. We are also providing a new feature to better handle hidden columns (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

New Requirements

We are now targeting browsers that support at least ES6, this mean IE11 is still supported (for now) but not older. This allowed us to remove some polyfills that we previously had in the code.

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 and released our new major version. Thanks Marko!

Size Comparisons

Below is a list of the typical SlickGrid files that you need to create a common grid with Formatters and Editors. The file size comparison was achieved by comparing the size of each minified files (under dist/ folder) by looking at the SlickGrid unpkg site.

filename (all minified)	before	after	notes
jQuery v3.6	88Kb (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	239.91Kb	118.31Kb	we saved 121.6Kb (about half the size or 51%) 🚀

Also for comparison sake, as described in Major version 3.0, we also dropped jQueryUI which was 237Kb, in other words in v2.x the same grid was about 477Kb (237Kb+240Kb) and today we are now at 118.3Kb, so it's quite a drop in size 🎉

Migration

NOTE: before removing jQuery from your project, please make sure that your entire project works without jQuery (not just SlickGrid).

The migration is quite simple and straightforward, just follow these 3 simple steps:

1. remove jQuery from your list of dependencies (or <script>), but only if your project allows the change

// 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 (or your own custom Editor)

// make sure to include Flatpickr CSS and 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 is 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 internal code with the code change below

// code changed in `plugins/slick.headermenu.js`
// the code below is used when a user cancels the event and returns false
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;
}

/* note again note that `notify` is rarely used by regular users of SlickGrid since most users will want to `subscribe` instead and that part did not change. */

Note since SortableJS is a hard dependency, you also need to make sure that you import it and you assign it to the window object (unless you load it through <script> if so then there's nothing to do). Another way would to be to configure it in your WebPack or Vite config to make it globally available.

+ import Sortable from 'sortablejs';
+ window.Sortable = Sortable;

Final Note

So for all the users in the world who were avoiding SlickGrid because it required jQuery... please come back 😉

Also a quick note, we are already looking at v5.0 which will hopefully close one of the oldest issue #41 by providing ES6/ESM builds and possibly TypeScript, we've opened a new Discussion - Possibly supporting ES6/ESM in that regard. At this moment it's still in the idea and planning phase, but it might come rather quickly (maybe even in just a couple of months). So stay tuned for more to come, feel free to add to that discussion.

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

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

Enjoy!