📚
Slickgrid-Universal
Live DemoGitHubOther Frameworks
  • Introduction
  • Getting Started
    • Quick start
    • Salesforce (LWC)
    • Vanilla Installation
  • Styling
    • Dark Mode
    • Styling CSS/SASS/Themes
  • Column Functionalities
    • Cell Menu (Action Menu)
    • Editors
      • Autocomplete
      • old Date Picker (flatpickr)
      • new Date Picker (vanilla-calendar)
      • LongText (textarea)
      • Select Dropdown Editor (single/multiple)
    • Filters
      • Input Filter (default)
      • Select Filter (dropdown)
      • Compound Filters
      • Range Filters
      • Styling Filled Filters
      • Single Search Filter
    • Formatters
    • Sorting
  • Events
    • Available events
    • On Events
  • Grid Functionalities
    • Auto-Resize / Resizer Service
    • Resize by Cell Content
    • Column Picker
    • Composite Editor Modal
    • Custom Tooltip
    • Column & Row Spanning
    • Context Menu
    • Custom Footer
    • Excel Copy Buffer Plugin
    • Export to Excel
    • Export to File (csv/txt)
    • Grid Menu
    • Grid State & Presets
    • Grouping & Aggregators
    • Header Menu & Header Buttons
    • Pagination
    • Infinite Scroll
    • Pinning (frozen) of Columns/Rows
    • Row Detail
    • Row Selection
    • Tree Data Grid
    • Row Based Editing Plugin
  • Developer Guides
    • CSP Compliance
  • Localization
    • with I18N
    • with Custom Translate Service
    • with Single Locale
  • Backend Services
    • Custom Backend Service
    • OData
    • GraphQL
      • JSON Result Structure
      • Filtering Schema
      • Pagination Schema
      • Sorting Schema
  • Migrations
    • Migration Guide to 1.x (2021-12-11)
    • Migration Guide to 2.x (2022-10-17)
    • Migration Guide to 3.x (2023-05-29)
    • Migration Guide to 4.x (2023-12-15)
    • Migration Guide to 5.x (2024-05-10)
    • Versions 6 to 8 are skipped...
    • Migration Guide to 9.x (2025-05-10)
Powered by GitBook
On this page
  • SlickGrid is now jQuery free (2023-05-29) 🌊
  • Changes
  1. Migrations

Migration Guide to 3.x (2023-05-29)

PreviousMigration Guide to 2.x (2022-10-17)NextMigration Guide to 4.x (2023-12-15)

Last updated 2 months ago

SlickGrid is now jQuery free (2023-05-29) 🌊

In our previous v2.0 release (see ), we dropped jQueryUI and now in v3.0 we are going even further and are now dropping entirely. You can still use jQuery but it's no longer a dependency. 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)

Major Changes - Quick Summary

  • minimum requirements bump

    • package now requires RxJS >=8.7.1

  • we dropped jQuery requirement

    • it also required us to rewrite the multiple-select (jQuery based lib) into a brand new lib which is now native and has zero dependency


NOTE: if you come from an earlier version other than 2.x, then please make sure to follow each migration in their respected order

Changes

Replaced multiple-select with

This change was required because the previous library was a jQuery based lib, so I rewrote the lib as a new native lib to drop jQuery. However with this change, there were a couple of options that were dropped and/or modified.

// you can load `MultipleSelectOption` from either the new Multiple-Select-Vanilla lib or from Slickgrid-Universal (which is a re-export)
  import { MultipleSelectOption } from '@slickgrid-universal/common'; // still works, but is a re-export of the import shown below
+ import { MultipleSelectOption } from 'multiple-select-vanilla';     // preferred

filterOptions: {
-  autoDropWidth: true, // removed and no longer required
} as MultipleSelectOption

Slickgrid-Universal

If you use any of the Slickgrid-Universal extra dependencies then make sure to upgrade them all to the new major 3.0.0 version

  "dependencies": {
-   "@slickgrid-universal/excel-export": "^2.6.4",
+   "@slickgrid-universal/excel-export": "^3.0.0",
}

Editor/Filter params should be using editorOptions/filterOptions

For better TypeScript support, we now recommend to use either editorOptions or filterOptions depending if it's an Editor or a Filter.

this.columnDefinitions = [{
  id: 'cost', name: 'Cost', field: 'cost',
  editor: {
    model: Editors.slider,
-    params: { hideSliderNumber: false }
+    editorOptions: { hideSliderNumber: false } as SliderOption
  },
  filter: {
    model: Filters.slider,
-    params: { hideSliderNumber: false }
+    filterOptions: { hideSliderNumber: false } as SliderOption
  },

Final Note

and that's about it, the migration is relatively simple as you can see :)


File Size Comparisons

The comparison below was made by looking at the folder properties from "size on disk" on Windows, and it looks like we're averaging 4-5% smaller size in our new release by removing jQuery.

Slickgrid-Universal

File
before
after
diff
% diff

624Kb (638,976)

596Kb (610,304)

-28Kb

4.48% smaller

4.99Mb (5,234,688)

4.72Mb (4,956,160)

-0.27Mb (or -272Kb)

4.07% smaller

The new lib also offers a bunch of new options as well, you can see the full interface at

Migration to v2.0
jQuery
@slickgrid-universal/rxjs-observable
multiple-select-vanilla
multiple-select-vanilla
MultipleSelectOption
SF Bundle Zip File
GitHub Vite Demo Website