Migration Guide to 10.x (2026-02-28)

Simplification and Modernization ⚡

One of the biggest change of this release is to hide columns by using the hidden column property (used by Column Picker, Grid Menu, etc...). Previously we were removing columns from the original columns array and then we were typically calling setColumns() to update the grid, but this meant that we had to keep references for all visible and non-visible columns. With this new release we now keep the full columns array at all time and instead we just change column(s) visibility via their hidden column properties by using grid.updateColumnById('id', { hidden: true }) and finally we update the grid via grid.updateColumns(). Also, what I'm trying to emphasis is that you should really stop using grid.setColumns() in v10+, and if you want to hide some columns when declaring the columns, then just update their hidden properties, see more details below...

Major Changes - Quick Summary

• hidden columns

• Row Detail (now optional)

• What's next?

Note: if you come from an earlier version, please make sure to follow each migrations in their respective order (review previous migration guides)

Column Definitions

Hidden Columns

if you're not dynamically hiding columns and you're not using colspan or rowspan then you won't be impacted by this change.

For years, I had to keep some references in a Shared Service via shared.allColumns and shared.visibleColumns, mostly for translating locales which was mostly being used by Column Picker and Grid Menu to keep track of which columns to hide/show and in which order they were; then later we called grid.setColumns() to update the columns in the grid... but that had side effects since SlickGrid never kept the entire column definitions list (until now). However with v10, we simply start using hidden property on the column(s) to hide/show some of them, then we are now able to keep the full columns reference at all time. We can translate them more easily and we no longer need to use grid.setColumns(), what we'll do instead is to start using grid.updateColumnById('colId', { hidden: true }). If you want to get visible columns, you can now just call grid.getVisibleColumns() which behind the scene is simply filtering columns.filter(c => !c.hidden). This new approach does also have new side effects for colspan/rowspan, because previously if we were to hide a column then previously the column to the right was taking over the spanning, however with the new approach, if we hide a column then its spanning will now disappear with it (so I had to make code changes to handle that too)... If you want more details, you can see full explanations of the complete change in the PR #2281

New Approach with column hidden property

Before	After
grid.setColumns(visibleCols)	grid.updateColumnById('colId', { hidden: true }); and grid.updateColumns();
sharedService.allColumns	grid.getColumns() ... is now including all columns
sharedService.visibleColumns or grid.getColumns()	grid.getVisibleColumns()

Grid Functionalities

following changes should be transparent to most users, I'm just listing them in case of side effects.

1. Reimplementing SlickCompositeEditorComponent modal and migrating from a <div> to a <dialog> which is native code, it has better accessibility (aria) support and a baseline support showing as "widely available". A fallback to <div> is also available in case <dialog> doens't work for everybody (e.g. it doesn't work in Salesforce LWC, hence the available fallback)

2. Reimplementing Grid Menu to use CSS flexbox instead of using calc(100% - 18px) which wasn't ideal, neither customizable, but the new approach is to simply use CSS flexbox which is a much better approach to properly align everything.

Row Detail (now optional)

Since I don't think that Row Detail is being used by everyone, I'm making it an optional plugin (package). This should help decrease build size quite a bit for users who never use it. If however you are one of them using it, then you now need to manually add it as an external resource.

+ import { AureliaSlickRowDetailView } from '@slickgrid-universal/aurelia-row-detail-plugin';

export class Example {
  defineGrid() {
    this.gridOptions = {
      enableRowDetailView: true,
+     externalResources: [AureliaSlickRowDetailView],
      rowDetailView: {
        // ...
      }
    };
  }
}

Changes

Removed @deprecated code

following changes should be transparent to most users

1. applyHtmlCode() was removed and replaced with applyHtmlToElement()

2. Grid Option throwWhenFrozenNotAllViewable was removed and replaced with invalidColumnFreezeWidthCallback

Selection Models, keeping only SlickHybridSelectionModel

1. rename rowSelectionOptions to selectionOptions

2. drop both SlickCellSelectionModel/SlickRowSelectionModel and keep only SlickHybridSelectionModel

3. drop both enableHybridSelection/enableRowSelection merge them into a new enableSelection grid option

SlickHybridSelectionModel was previously introduced in order to merge and allow using both Cell/Row Selections separately and/or in combo on the same grid. It was introduced in v9.x to test it out and after testing it for a few months, it's now safe to drop the older SlickCellSelectionModel / SlickRowSelectionModel models and keep only the hybrid model (for smaller build & less code to maintain). Also, since we now have the Hybrid model and it's now accepting options for different selection models, I think it's better to rename rowSelectionOptions to selectionOptions since it now makes more sense with the hybrid approach and you will need to update your code when using Row Selection, see below:

gridOptions = {
- enableHybridSelection: true,
- enableRowSelection: true,
+  enableSelection: true,

- rowSelectionOptions: {
+ selectionOptions: {
    selectActiveRow: false,

    // type can be: ['cell','row','mixed'] defaults to 'mixed'
+   selectionType: 'mixed',
  }
};

Auto-Enabled External Resources

This change does not require any code change from the end user, but it is a change that you should probably be aware of nonetheless. The reason I decided to implement this, is that I often forget myself to enable the resource associated flag and typically if you wanted to load the resource, then it's most probably because you also want it enabled. For example, if your register ExcelExportService then the library will now auto-enable the resource with its associated flag (which in this case is enableExcelExport:true)... unless you have already enabled/disabled the flag yourself, then in that case the internal assignment will simply be skipped and yours will prevail. Also just to be clear, the list of auto-enabled external resources is rather small, it will auto-enable the following resources:

• ExcelExportService → enableExcelExport: true

• PdfExportService → enablePdfExport: true

• TextExportService → enableTextExport: true

• CompositeEditorComponent → enableCompositeEditor: true

• RowDetailView → enableRowDetailView: true

Menu with Commands

All menu plugins (Cell Menu, Context Menu, Header Menu and Grid Menu) now have a new commandListBuilder: (items) => items which is now allowing you to filter/sort and maybe override built-in commands UI. With this new feature in place, I'm deprecating all hide... properties and also positionOrder since you can now do that with the builder. You could also use a new hideCommands which accepts an array of built-in command names. This will remove a large amount of hide... properties (about 30) that keeps increasing anytime a new built-in command gets added (in other words, this will simplify maintenance for both you and me).

These are currently just deprecations in v10.x but it's strongly recommended to start using the new commandListBuilder and/or hideCommands to move away from the deprecated properties which will be removed in v11.x (next year). For example if we want to hide some built-in commands:

gridOptions = {
  gridMenu: {
-   hideExportCsvCommand: true,
-   hideTogglePreHeaderCommand: true,

    // hide via command name(s)
+   hideCommands: ['export-csv', 'toggle-preheader'],

    // or hide via builder
+   commandListBuilder: (cmdItems) => cmdItems.filter(x => x !== 'divider' && x.command !== 'export-csv' && x.command !== 'toggle-preheader')
  }
}

There's also a new Renderer similar to Slots but implemented with native code to make it cross-platform compatible. The usage is actually very similar to how you would use a cell Formatter. You can see a new Example 51 demoing this new feature and also the command builder mentioned above.

---

Info the changes in the next few lines were all mentioned in the previous "Migration Guide v9.0". So, if you have already made these changes then you could skip the section below but scroll down further to read the last section "What's next? ...version 11?".

Interfaces / Enums changes

Removing most Enums and replacing them with string literal types (use type instead of enum because again type aren't transpiled and enum are). Making this change will help decrease the build size by transpiling a lot less code.

columns = [{
  id: 'age', ...
- type: FieldType.number,
+ type: 'number',
}];

Below is a list of Enums that you need to replace with their associated string literals. A suggestion is to do a Search on any of these group name prefixes, e.g.: FieldType. and replace them all

Hint You can use VSCode search & replace, but make sure it's set to Regular Expression search pattern

Search (regex)	Replace
FieldType\.([a-z_]+)(.*)	'$1'$2

Below is an abbreviated list of Enums to update, make sure to update them all

Enum Name	from enum	to string type	Note
DelimiterType	DelimiterType.comma	','
	DelimiterType.colon	':'
	DelimiterType.space	' '
...	...	...
EventNamingStyle	EventNamingStyle.camelCase	'camelCase'
	EventNamingStyle.kebabCase	'kebabCase'
	EventNamingStyle.lowerCase	'lowerCase'
FieldType	FieldType.boolean	'boolean'
	FieldType.number	'number'
	FieldType.dateIso	'dateIso'
...	...	...
FileType	FileType.csv	'csv'
	FileType.xlsx	'xlsx'
...	...	...
GridStateType	GridStateType.columns	'columns'
	GridStateType.filters	'filters'
	GridStateType.sorters	'sorters'
...	...	...
OperatorType	OperatorType.greaterThan	'>' or 'GT'	See Operator list for all available operators
	OperatorType.lessThanOrEqual	'<=' or 'LE'
	OperatorType.contains	'Contains' or 'CONTAINS'	Operators are written as PascalCase
	OperatorType.equal	'=' or 'EQ'
	OperatorType.rangeExclusive	'RangeExclusive'
...	...	...
SortDirection	SortDirection.ASC	'ASC' or 'asc'
	SortDirection.DESC	'DESC' or 'desc'
...	...	...

renaming editorOptions and filterOptions to a more generic options property

import { type MultipleSelectOption } from '@slickgrid-universal/common';

columnDefinitions = [{
  id: 'duration', field: 'duration', name: 'Duration',
  editor: {
-   editorOptions: {
+   options: {
      maxHeight: 250, useSelectOptionLabelToHtml: true,
    } as MultipleSelectOption,
  },
  filter: {
-   filterOptions: {
+   options: {
      maxHeight: 250, useSelectOptionLabelToHtml: true,
    } as MultipleSelectOption,
  }
}];

// or reuse the same `options`
+ const msOptions = { maxHeight: 250, useSelectOptionLabelToHtml: true } as MultipleSelectOption;

columnDefinitions = [{
  id: 'duration', field: 'duration', name: 'Duration',
  editor: {
+   options: msOptions,
  },
  filter: {
+   options: msOptions,
  },
}];

renaming all text-color-xyz to color-xyz

I decided to remove all text-color-... and rename them all to color-... which is much shorter and easier to use.

You can do a "Search and Replace" in VSCode via Regular Expressions to replace them all easily:

Search	Replace
text-color-	color-

For example:

- <span class="text-color-primary">Primary Text</span>
+ <span class="color-primary">Primary Text</span>

renaming all mdi-[0-9]px to font-[0-9]px

Since I had 2 CSS utilities that do exactly the same, I'm dropping all mdi-..px in favor of font-..px because it makes more sense to represent font sizes that also work on any type of elements (not just icons).

You can do a "Search and Replace" in VSCode via Regular Expressions to replace them all easily (make sure to use regex in VSCode Search & Replace):

Search (regex)	Replace
mdi-([0-9]*)px	font-$1px

For example:

- <span class="mdi mdi-check mdi-22px"></span> Checkmark Icon
+ <span class="mdi mdi-check font-22px"></span> Checkmark Icon

---

What's next? ...version 11?

Wait, are you seriously talking about version 11 akready when version 10 actually just shipped? Thats right, I'm already thinking and planning ahead the next major version, which will be in about a year from now. I can already say that the main focus will be around the use of native CSS anchor positioning to replace JS code for positioning menus, tooltips, etc... which will help decreasing the build size by using fully native code. CSS anchoring has been around in Chrome for a while now, but it is quite recent in Firefox (147), so for that reason I'm postponing it to next year. There's also the new Sanitizer API that I'm hoping to see more availability by next year.

Code being @deprecated (to be removed in the future, 2027-Q1)

You can already start using these new options and props (shown below) in v10.0 and above.

Deprecating ExtensionName enum which will be replaced by its string literal type, for example:

Hint You can use VSCode search & replace, but make sure it's set to Regular Expression search pattern

Search (regex)	Replace
ExtensionName\.([a-z_]+)(.*)	'$1'$2

Below is an abbreviated list of Enums to update, make sure to update them all

Enum Name	from enum	to string type
ExtensionName	ExtensionName.autoTooltip	'autoTooltip'
	ExtensionName.gridMenu	'gridMenu'
	ExtensionName.rowDetail	'rowDetail'
...	...	...