feat!: prepare official v4.0.0 release (#777)

* feat!: Drop jQuery requirement (#734) * feat!: Drop jQuery requirement * fix: addresses all issues found in jQuery removal previous PR #734 (#742) - fixes some errors that came up while testing the whole thing in Slickgrid-Universal * feat(plugins): convert slick.draggablegrouping to vanillaJS (#744) - fix ESLint for Cypress - also remove jQuery from package.json list of dependencies * show tooltip if the cell content is taller than the cell height - fixes #740 (#741) * show tooltip if the cell content is taller than the cell height The current code does not show a tooltip when word wrap is turned on and the text is taller than the cell height. * combined height check with width check * fix: enable AutoScroll with SortableJS for column reordering, fixes #735 (#736) * fix: enable AutoScroll with SortableJS for column reordering, fixes #735 * chore: add auto-scroll comment for clarity * chore(ci): run Cypress on the `next` branch as well as `main` * feat(plugin): convert slick.autotooltips to vanillaJS (#745) - remove jQuery from plugin and also in the autotooltip example as well * chore: fix some UI issues in draggable grouping plugin * feat(plugins): convert copy manager plugins to vanillaJS (#746) * feat(plugins): remove jQuery from slick.customtooltip plugin (#747) * feat(plugins): remove jQuery from header buttons/menus plugins (#748) * chore: apply better code styling to few core files (#749) * chore: apply better code styling to few core files * feat(plugins): remove jQuery from ColumnPicker & GridMenu controls (#752) * feat(plugins): remove jQuery from ColumnPicker & GridMenu controls * tests: use input checked property instead of attr checked - the previous code with `attr('checked')` was jQuery oriented and we are going away from jQuery * feat(plugins): remove jQuery from CellMenu & ContextMenu plugins (#753) * feat(plugins): remove jQuery from range decorator selection model (#754) * feat(plugins): remove jQuery from range decorator selection model * feat(plugins): remove jQuery from CheckboxSelectColumn plugins (#755) * feat(plugins): remove jQuery from RowMove plugins (#756) * feat(plugins): remove jQuery from Grid State plugin (#757) * feat(plugins): remove jQuery from Grid Resizer plugin (#758) * chore: remove Map polyfill since we will target ES6 (#759) - Slick.Map polyfill is no longer required since Map is included in ES6 browsers * feat(plugins): remove jQuery from Row Detail plugin (#760) * Correct some instances of migration from $.each() to iteration (return needs to become continue) * chore: remove eval & grep utils and replace with simple ES6 filter * fix: filter header row should follow grid scroll * feat(controls): remove jQuery from Slick Pager control (#762) * fix: scrolling for all containers should work for regular & frozen grids * fix: add missing aria accessibility (#764) - closes #586, #587, #588 and #678 * chore: filling the window should be used with slick.resizer, closes #515 * chore: migrate more examples to vanilla JS with DOMContentLoaded * chore: convert html template to pure DOM create element with JS (#766) * chore: remove jQuery from all possible examples (#767) * chore: fix html code showing up in column picker & grid menu picker (#768) * fix(core): set wheel/touch listeners to passive for better perf (#769) - this fixes warnings shown in Chrome and other browser console mentioning that we should consider using `passive` event listeners - also uses a polyfill in case the `passive` option is not supported (for example IE) * chore: better use of DOM element creation and innerHTML (#770) - also remove `passive` mode to certain events that use preventDefault since that is not compatible with `passive` mode * chore: remove jQuery from lib folder, replace with CDN (#771) * Bugfix/example issues fixes (#772) * fix: found a few small issues while testing examples with jQuery CDN * fix: throw error when freezing columns are wider than canvas (#773) - closes #667 - freezing columns cannot be wider than the actual grid canvas because when that happens, the viewport scroll becomes hidden behind the canvas... so let's throw an error advising the user to make adjustments * fix: toggling frozen rows should recalc scroll height, closes #737 (#774) - when changing frozen rows via `setOptions`, it should recalculate each viewports (top/bottom) - the previous code skipped scroll height recalculation and that caused the issue identified in #737 * feat: Enable hidden property for column. Adds example-column-hidden, method… (#765) * Enable hidden property for column. Adds example-column-hidden, method getVisibleColumns() and alternate method updateColumns() calling event onBeforeUpdateColumns() for when a hidden property has changed but the column list itself has not changed. * remove jQuery from example and add frozen rows/hidden cols example * final changes: add frozen columns example, fix issue with hidden columns on frozen grid boundary, fix gridmenu control to work with .hidden flag on columns) * changes as suggested in #765 * feat: remove legacy TreeColumns code - now unused (#775) * remove legacy treecolumns code - now unused * fix typo and add back apparently unnecessary call to setcolumns() which does in fact do crucial refreshing of grid structure * chore: fix a small editor problem with percent editor * chore(release): publish version 4.0.0-beta.0 * chore: add migration guide to v4.0 link in changelog * chore: remove jQuery from Example 4 --------- Co-authored-by: Marko B. Ludolph <der.ludi@web.de> Co-authored-by: tr4npt <tranp@fastmail.us> Co-authored-by: Ben McIntyre <email.ben.mcintyre@gmail.com>
6pac · May 18, 2023 · 9e49d71 · 9e49d71
1 parent 21fe941
commit 9e49d71
Show file tree

Hide file tree

Showing 179 changed files with 7,731 additions and 33,149 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,10 @@
+# http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_style = space
+indent_size = 2
+insert_final_newline = false
+trim_trailing_whitespace = true
diff --git a/.eslintrc b/.eslintrc
@@ -1,13 +1,22 @@
 {
-    "extends": "eslint:recommended",
+    "extends": [
+        "eslint:recommended",
+        "plugin:cypress/recommended"
+    ],
     "env": {
-        "browser": true
+        "browser": true,
+        "es6": true,
+        "node": true
     },
     "globals": {
-        "jQuery": true,
-        "Slick": true
+        "flatpickr": true,
+        "Slick": true,
+        "Sortable": true
     },
     "rules": {
+        "cypress/no-unnecessary-waiting": "off",
+        "cypress/unsafe-to-chain-command": "off",
+        "no-cond-assign": "off",
         "no-prototype-builtins": [0]
     }
 }
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.0.0-beta.0](https://github.com/6pac/SlickGrid/compare/3.0.4...4.0.0-beta.0) (2023-05-17)
+
+### Please read the [Migration Guide v4.0](https://github.com/6pac/SlickGrid/wiki/Major-version-4.0---Removal-of-jQuery-requirement)
+---
+### Bug Fixes
+
+* add missing aria accessibility ([#764](https://github.com/6pac/SlickGrid/issues/764)) ([897cc55](https://github.com/6pac/SlickGrid/commit/897cc55441625ab1bd3dd556c7c54d4796ce5f1d)), closes [#586](https://github.com/6pac/SlickGrid/issues/586) [#587](https://github.com/6pac/SlickGrid/issues/587) [#588](https://github.com/6pac/SlickGrid/issues/588) [#678](https://github.com/6pac/SlickGrid/issues/678)
+* addresses all issues found in jQuery removal previous PR [#734](https://github.com/6pac/SlickGrid/issues/734) ([#742](https://github.com/6pac/SlickGrid/issues/742)) ([b3a6575](https://github.com/6pac/SlickGrid/commit/b3a6575bd913f5b8aa0c81dfe88b71519a7a846e))
+* **core:** set wheel/touch listeners to passive for better perf ([#769](https://github.com/6pac/SlickGrid/issues/769)) ([b62e25d](https://github.com/6pac/SlickGrid/commit/b62e25d537c9a6cfb8b2004ad898b6bb0635dfd8))
+* dist source map file naming was incorrect ([#730](https://github.com/6pac/SlickGrid/issues/730)) ([aa4093a](https://github.com/6pac/SlickGrid/commit/aa4093a2b1d2afa791a645c65518fb2c35f50204))
+* enable AutoScroll with SortableJS for column reordering, fixes [#735](https://github.com/6pac/SlickGrid/issues/735) ([#736](https://github.com/6pac/SlickGrid/issues/736)) ([2c56433](https://github.com/6pac/SlickGrid/commit/2c5643313f7379877d4e4320bbe7b9de9585438c))
+* filter header row should follow grid scroll ([98aeb9b](https://github.com/6pac/SlickGrid/commit/98aeb9b9b19ca2972af214629c62efc20330b5a0))
+* scrolling for all containers should work for regular & frozen grids ([2405fe6](https://github.com/6pac/SlickGrid/commit/2405fe62b970eb84e5f24f7f5fbcb3f7b3469c78))
+* throw error when freezing columns are wider than canvas ([#773](https://github.com/6pac/SlickGrid/issues/773)) ([bc60d8a](https://github.com/6pac/SlickGrid/commit/bc60d8ac4c9ab7fffbc38420e8a6c5b7234830dd)), closes [#667](https://github.com/6pac/SlickGrid/issues/667)
+* toggling frozen rows should recalc scroll height, closes [#737](https://github.com/6pac/SlickGrid/issues/737) ([#774](https://github.com/6pac/SlickGrid/issues/774)) ([46db491](https://github.com/6pac/SlickGrid/commit/46db4914c19dd3c6789aaeed22cda91664a415fa))
+
+### Features
+
+* **controls:** remove jQuery from Slick Pager control ([#762](https://github.com/6pac/SlickGrid/issues/762)) ([ed0507b](https://github.com/6pac/SlickGrid/commit/ed0507bff30dc28f6e8b3f3ee7bf0f7339fd2282))
+* Enable hidden property for column. Adds example-column-hidden, method… ([#765](https://github.com/6pac/SlickGrid/issues/765)) ([78540ef](https://github.com/6pac/SlickGrid/commit/78540ef2339dc3d47ca2faba78b7be3963e14ad0))
+* **plugin:** convert slick.autotooltips to vanillaJS ([#745](https://github.com/6pac/SlickGrid/issues/745)) ([133d783](https://github.com/6pac/SlickGrid/commit/133d783d508e8c55d0b8196b90725079164e986d))
+* **plugins:** convert copy manager plugins to vanillaJS ([#746](https://github.com/6pac/SlickGrid/issues/746)) ([47b571d](https://github.com/6pac/SlickGrid/commit/47b571d1fc376af01cb895d19f42205c8a34ddca))
+* **plugins:** convert slick.draggablegrouping to vanillaJS ([#744](https://github.com/6pac/SlickGrid/issues/744)) ([59b0d2e](https://github.com/6pac/SlickGrid/commit/59b0d2e9f2ad549bb67982289b6c27862bab9ee1))
+* **plugins:** remove jQuery from CellMenu & ContextMenu plugins ([#753](https://github.com/6pac/SlickGrid/issues/753)) ([c4671be](https://github.com/6pac/SlickGrid/commit/c4671be7385b8bac8fdfb82769f726bf8705bf84))
+* **plugins:** remove jQuery from CheckboxSelectColumn plugins ([#755](https://github.com/6pac/SlickGrid/issues/755)) ([57160af](https://github.com/6pac/SlickGrid/commit/57160af7e5290730c0528f1cfebcaadae86820c3))
+* **plugins:** remove jQuery from ColumnPicker & GridMenu controls ([#752](https://github.com/6pac/SlickGrid/issues/752)) ([9ea0d9a](https://github.com/6pac/SlickGrid/commit/9ea0d9a7fa5a1c453e737a60cd0f1292f822ac3b))
+* **plugins:** remove jQuery from Grid Resizer plugin ([#758](https://github.com/6pac/SlickGrid/issues/758)) ([5deb818](https://github.com/6pac/SlickGrid/commit/5deb8188424f6cbc0876f4053c0dc5400212c70b))
+* **plugins:** remove jQuery from Grid State plugin ([#757](https://github.com/6pac/SlickGrid/issues/757)) ([aa8dc63](https://github.com/6pac/SlickGrid/commit/aa8dc63b3e6e635c6a6419d79a5a2a29e2b29762))
+* **plugins:** remove jQuery from header buttons/menus plugins ([#748](https://github.com/6pac/SlickGrid/issues/748)) ([58701c4](https://github.com/6pac/SlickGrid/commit/58701c4288744a1288b8cddbd9432b0d709ead30))
+* **plugins:** remove jQuery from range decorator selection model ([#754](https://github.com/6pac/SlickGrid/issues/754)) ([6724f1d](https://github.com/6pac/SlickGrid/commit/6724f1db8d2a013d999e563ffab9a35897a72afb))
+* **plugins:** remove jQuery from Row Detail plugin ([#760](https://github.com/6pac/SlickGrid/issues/760)) ([72e6139](https://github.com/6pac/SlickGrid/commit/72e61391147656151e22bc25abb583a0cba5cc89))
+* **plugins:** remove jQuery from RowMove plugins ([#756](https://github.com/6pac/SlickGrid/issues/756)) ([8c72373](https://github.com/6pac/SlickGrid/commit/8c72373e6bcab2f1972de9a774ec89bc0ed8c187))
+* **plugins:** remove jQuery from slick.customtooltip plugin ([#747](https://github.com/6pac/SlickGrid/issues/747)) ([aac6eec](https://github.com/6pac/SlickGrid/commit/aac6eecf99cfbbad7787cdbdfd95935955148fc2))
+* remove legacy TreeColumns code - now unused ([#775](https://github.com/6pac/SlickGrid/issues/775)) ([af82a57](https://github.com/6pac/SlickGrid/commit/af82a570ba79e796400fc1e2ba265ffe2dafd480))
+
 ## [3.0.4](https://github.com/6pac/SlickGrid/compare/3.0.3...3.0.4) (2023-02-15)
 
 ### Features

diff --git a/controls/slick.columnpicker.js b/controls/slick.columnpicker.js
@@ -25,17 +25,18 @@
  * @constructor
  */
 
-(function ($) {
+(function (window) {
   'use strict';
   function SlickColumnPicker(columns, grid, options) {
     var _grid = grid;
     var _options = options;
     var _gridUid = (grid && grid.getUID) ? grid.getUID() : '';
-    var $columnTitleElm;
-    var $list;
-    var $menu;
+    var _columnTitleElm;
+    var _listElm;
+    var _menuElm;
     var columnCheckboxes;
     var onColumnsChanged = new Slick.Event();
+    var _bindingEventService = new Slick.BindingEventService();
 
     var defaults = {
       fadeSpeed: 250,
@@ -54,68 +55,94 @@
     function init(grid) {
       grid.onHeaderContextMenu.subscribe(handleHeaderContextMenu);
       grid.onColumnsReordered.subscribe(updateColumnOrder);
-      _options = $.extend({}, defaults, options);
-
-      $menu = $("<div class='slick-columnpicker " + _gridUid + "' style='display:none' />").appendTo(document.body);
-      $("<button type='button' class='close' data-dismiss='slick-columnpicker' aria-label='Close'><span class='close' aria-hidden='true'>&times;</span></button>").appendTo($menu);
+      _options = Slick.Utils.extend({}, defaults, options);
+
+      _menuElm = document.createElement('div');
+      _menuElm.className = `slick-columnpicker ${_gridUid}`;
+      _menuElm.style.display = 'none';
+      document.body.appendChild(_menuElm);
+
+      const buttonElm = document.createElement('button');
+      buttonElm.type = 'button';
+      buttonElm.className = 'close';
+      buttonElm.dataset.dismiss = 'slick-columnpicker';
+      buttonElm.ariaLabel = 'Close';
+
+      const spanCloseElm = document.createElement('span');
+      spanCloseElm.className = 'close';
+      spanCloseElm.ariaHidden = 'true';
+      spanCloseElm.innerHTML = '&times;';
+      buttonElm.appendChild(spanCloseElm);
+      _menuElm.appendChild(buttonElm);
 
       // user could pass a title on top of the columns list
       if (_options.columnPickerTitle || (_options.columnPicker && _options.columnPicker.columnTitle)) {
         var columnTitle = _options.columnPickerTitle || _options.columnPicker.columnTitle;
-        $columnTitleElm = $("<div class='title'/>").append(columnTitle);
-        $columnTitleElm.appendTo($menu);
+        _columnTitleElm = document.createElement('div');
+        _columnTitleElm.className = 'slick-gridmenu-custom';
+        _columnTitleElm.textContent = columnTitle;
+        _menuElm.appendChild(_columnTitleElm);
       }
 
-      $menu.on("click", updateColumn);
-      $list = $("<span class='slick-columnpicker-list' />");
+      _bindingEventService.bind(_menuElm, 'click', updateColumn);
+
+      _listElm = document.createElement('span');
+      _listElm.className = 'slick-columnpicker-list';
 
       // Hide the menu on outside click.
-      $(document.body).on("mousedown", handleBodyMouseDown);
+      _bindingEventService.bind(document.body, 'mousedown', handleBodyMouseDown);
 
       // destroy the picker if user leaves the page
-      $(window).on("beforeunload", destroy);
+      _bindingEventService.bind(document.body, 'beforeunload', destroy);
     }
 
     function destroy() {
       _grid.onHeaderContextMenu.unsubscribe(handleHeaderContextMenu);
       _grid.onColumnsReordered.unsubscribe(updateColumnOrder);
-      if ($list) {
-        $list.remove();
+      _bindingEventService.unbindAll();
+
+      if (_listElm) {
+        _listElm.remove();
       }
-      if ($menu) {
-        $menu.off("click").remove();
+      if (_menuElm) {
+        _menuElm.remove();
       }
-      $(document.body).off("mousedown", handleBodyMouseDown);
-      $(".slick-columnpicker." + _gridUid).hide(_options && _options.columnPicker && _options.columnPicker.fadeSpeed);
-      $columnTitleElm = null;
-      $list = null;
-      $menu = null;
-      $(window).off("beforeunload");
     }
 
     function handleBodyMouseDown(e) {
-      if (($menu && $menu[0] != e.target && !$.contains($menu[0], e.target)) || e.target.className == "close") {
-        $menu.hide(_options && _options.columnPicker && _options.columnPicker.fadeSpeed);
+      if ((_menuElm !== e.target && !(_menuElm && _menuElm.contains(e.target))) || e.target.className === 'close') {
+        _menuElm.setAttribute('aria-expanded', 'false');
+        _menuElm.style.display = 'none';
       }
     }
 
     function handleHeaderContextMenu(e) {
       e.preventDefault();
-      $list.empty();
+      Slick.Utils.emptyElement(_listElm);
       updateColumnOrder();
       columnCheckboxes = [];
 
-      var $li, $input, columnId;
-      var columnLabel, excludeCssClass;
+      let columnId, columnLabel, excludeCssClass;
       for (var i = 0; i < columns.length; i++) {
+        if (columns[i].hidden) continue;
+
         columnId = columns[i].id;
         excludeCssClass = columns[i].excludeFromColumnPicker ? "hidden" : "";
-        $li = $('<li class="' + excludeCssClass + '" />').appendTo($list);
-        $input = $("<input type='checkbox' id='" + _gridUid + "colpicker-" + columnId + "' />").data("column-id", columnId).appendTo($li);
-        columnCheckboxes.push($input);
+
+        const liElm = document.createElement('li');
+        liElm.className = excludeCssClass;
+        liElm.ariaLabel = columns[i] && columns[i].name;
+
+        const checkboxElm = document.createElement('input');
+        checkboxElm.type = 'checkbox';
+        checkboxElm.id = `${_gridUid}colpicker-${columnId}`;
+        checkboxElm.dataset.columnid = columns[i].id;
+        liElm.appendChild(checkboxElm);
+
+        columnCheckboxes.push(checkboxElm);
 
         if (_grid.getColumnIndex(columnId) != null) {
-          $input.attr("checked", "checked");
+          checkboxElm.checked = true;
         }
 
         if (_options && _options.columnPicker && _options.columnPicker.headerColumnValueExtractor) {
@@ -124,44 +151,74 @@
           columnLabel = defaults.headerColumnValueExtractor(columns[i], _options);
         }
 
-        $("<label for='" + _gridUid + "colpicker-" + columnId + "' />")
-          .html(columnLabel)
-          .appendTo($li);
+        const labelElm = document.createElement('label');
+        labelElm.htmlFor = `${_gridUid}colpicker-${columnId}`;
+        labelElm.innerHTML = columnLabel;
+        liElm.appendChild(labelElm);
+        _listElm.appendChild(liElm);
       }
 
       if (_options.columnPicker && (!_options.columnPicker.hideForceFitButton || !_options.columnPicker.hideSyncResizeButton)) {
-        $("<hr/>").appendTo($list);
+        _listElm.appendChild(document.createElement('hr'));
       }
 
       if (!(_options.columnPicker && _options.columnPicker.hideForceFitButton)) {
-        var forceFitTitle = (_options.columnPicker && _options.columnPicker.forceFitTitle) || _options.forceFitTitle;
-        $li = $("<li />").appendTo($list);
-        $input = $("<input type='checkbox' id='" + _gridUid + "colpicker-forcefit' />").data("option", "autoresize").appendTo($li);
-        $("<label for='" + _gridUid + "colpicker-forcefit' />").text(forceFitTitle).appendTo($li);
+        let forceFitTitle = (_options.columnPicker && _options.columnPicker.forceFitTitle) || _options.forceFitTitle;
+
+        const liElm = document.createElement('li');
+        liElm.ariaLabel = forceFitTitle;
+        _listElm.appendChild(liElm);
+
+        const forceFitCheckboxElm = document.createElement('input');
+        forceFitCheckboxElm.type = 'checkbox';
+        forceFitCheckboxElm.id = `${_gridUid}colpicker-forcefit`;
+        forceFitCheckboxElm.dataset.option = 'autoresize';
+        liElm.appendChild(forceFitCheckboxElm);
+
+        const labelElm = document.createElement('label');
+        labelElm.htmlFor = `${_gridUid}colpicker-forcefit`;
+        labelElm.textContent = forceFitTitle;
+        liElm.appendChild(labelElm);
+
         if (_grid.getOptions().forceFitColumns) {
-          $input.attr("checked", "checked");
+          forceFitCheckboxElm.checked = true;
         }
       }
 
       if (!(_options.columnPicker && _options.columnPicker.hideSyncResizeButton)) {
-        var syncResizeTitle = (_options.columnPicker && _options.columnPicker.syncResizeTitle) || _options.syncResizeTitle;
-        $li = $("<li />").appendTo($list);
-        $input = $("<input type='checkbox' id='" + _gridUid + "colpicker-syncresize' />").data("option", "syncresize").appendTo($li);
-        $("<label for='" + _gridUid + "colpicker-syncresize' />").text(syncResizeTitle).appendTo($li);
+        let syncResizeTitle = (_options.columnPicker && _options.columnPicker.syncResizeTitle) || _options.syncResizeTitle;
+
+        const liElm = document.createElement('li');
+        liElm.ariaLabel = syncResizeTitle;
+        _listElm.appendChild(liElm);
+
+        const syncResizeCheckboxElm = document.createElement('input');
+        syncResizeCheckboxElm.type = 'checkbox';
+        syncResizeCheckboxElm.id = `${_gridUid}colpicker-syncresize`;
+        syncResizeCheckboxElm.dataset.option = 'syncresize';
+        liElm.appendChild(syncResizeCheckboxElm);
+
+        const labelElm = document.createElement('label');
+        labelElm.htmlFor = `${_gridUid}colpicker-syncresize`;
+        labelElm.textContent = syncResizeTitle;
+        liElm.appendChild(labelElm);
+
         if (_grid.getOptions().syncColumnCellResize) {
-          $input.attr("checked", "checked");
+          syncResizeCheckboxElm.checked = true;
         }
       }
 
-      $menu
-        .css("top", e.pageY - 10)
-        .css("left", e.pageX - 10)
-        .css("max-height", $(window).height() - e.pageY - 10)
-        .fadeIn(_options && _options.columnPicker && _options.columnPicker.fadeSpeed);
+      repositionMenu(e);
+    }
 
-      $list.appendTo($menu);
-      $li = null;
-      $input = null;
+    function repositionMenu(event) {
+      const targetEvent = event && event.touches && event.touches[0] || event;
+      _menuElm.style.top = `${targetEvent.pageY - 10}px`;
+      _menuElm.style.left = `${targetEvent.pageX - 10}px`;
+      _menuElm.style.maxHeight = `${window.innerHeight - targetEvent.clientY}px`;
+      _menuElm.style.display = 'block';
+      _menuElm.setAttribute('aria-expanded', 'true');
+      _menuElm.appendChild(_listElm);
     }
 
     function updateColumnOrder() {
@@ -171,9 +228,9 @@
       // We create a new `columns` structure by leaving currently-hidden
       // columns in their original ordinal position and interleaving the results
       // of the current column sort.
-      var current = _grid.getColumns().slice(0);
-      var ordered = new Array(columns.length);
-      for (var i = 0; i < ordered.length; i++) {
+      let current = _grid.getColumns().slice(0);
+      let ordered = new Array(columns.length);
+      for (let i = 0; i < ordered.length; i++) {
         if (_grid.getColumnIndex(columns[i].id) === undefined) {
           // If the column doesn't return a value from getColumnIndex,
           // it is hidden. Leave it in this position.
@@ -188,13 +245,13 @@
 
     /** Update the Titles of each sections (command, customTitle, ...) */
     function updateAllTitles(gridMenuOptions) {
-      if ($columnTitleElm && $columnTitleElm.text) {
-        $columnTitleElm.text(gridMenuOptions.columnTitle);
+      if (_columnTitleElm && _columnTitleElm.innerHTML) {
+        _columnTitleElm.innerHTML = gridMenuOptions.columnTitle;
       }
     }
 
     function updateColumn(e) {
-      if ($(e.target).data("option") == "autoresize") {
+      if (e.target.dataset.option === 'autoresize') {
         // when calling setOptions, it will resize with ALL Columns (even the hidden ones)
         // we can avoid this problem by keeping a reference to the visibleColumns before setOptions and then setColumns after
         var previousVisibleColumns = getVisibleColumns();
@@ -204,7 +261,7 @@
         return;
       }
 
-      if ($(e.target).data("option") == "syncresize") {
+      if (e.target.dataset.option === 'syncresize') {
         if (e.target.checked) {
           _grid.setOptions({ syncColumnCellResize: true });
         } else {
@@ -213,18 +270,18 @@
         return;
       }
 
-      if ($(e.target).is(":checkbox")) {
-        var isChecked = e.target.checked;
-        var columnId = $(e.target).data("column-id") || "";
-        var visibleColumns = [];
-        $.each(columnCheckboxes, function (i) {
-          if ($(this).is(":checked")) {
-            visibleColumns.push(columns[i]);
+      if (e.target.type === 'checkbox') {
+        const isChecked = e.target.checked;
+        const columnId = e.target.dataset.columnid || '';
+        let visibleColumns = [];
+        columnCheckboxes.forEach((columnCheckbox, idx) => {
+          if (columnCheckbox.checked) {
+            visibleColumns.push(columns[idx]);
           }
         });
 
         if (!visibleColumns.length) {
-          $(e.target).attr("checked", "checked");
+          e.target.checked = true;
           return;
         }
 
@@ -255,5 +312,5 @@
   }
 
   // Slick.Controls.ColumnPicker
-  $.extend(true, window, { Slick: { Controls: { ColumnPicker: SlickColumnPicker } } });
-})(jQuery);
+  Slick.Utils.extend(true, window, { Slick: { Controls: { ColumnPicker: SlickColumnPicker } } });
+})(window);