feat!: switch to column hidden property and always keep all columns

[ghiscoding]

This is a breaking change and will be scheduled for the next major version, Q1 of 2026

Description

For years, I had to use a Shared Service to keep references for both shared.allColumns and shared.visibleColumns, for translating locales also used by Column Picker and Grid Menu to keep track of which columns to hide/show, we then call grid.setColumns() to update the columns in the grid... but this as side effects since SlickGrid never kept the entire column definitions list, on the other end if we just start using a hidden property on the column(s) to hide some of them, then we would be able to keep the full reference at all time to these columns. We can then just use grid.getVisibleColumns() which behind the scene is simply doing a columns.filter(c => !c.hidden).

With this change, I still keep a reference to shared.allColumns because that can be useful when we need to reset to the original column positions. For example if we reordered the columns to different positions and we want to reset to the original columns like Example 11 with Saved Views (Grid State)

Note that we already had the hidden column property that Ben (6pac) added in SlickGrid, but it was a bit incomplete, not fully tested and not used by the Column Picker/Grid Menu... this PR now takes full advantage of this approach. With the hidden approach, it's better to "go all-in" because there side effects related to this approach (see below)

Advantages

We no longer have to keep a reference of the visible columns because we can now simply use grid.getVisibleColumns(), which again is simply just a filter that returns a list of columns that doesn't have the hidden property. Another advantage is that we can translate the locales a lot easier with the new code because we keep all the columns (with the previous code, I had to keep reference to all columns, but also keep the order of the columns and visible columns, translate them and then reapply the columns with grid.setColumns()). The other advantage is that the internal code is much more simple because we just need to change the hidden flag instead of using the Shared Service.

Before	After
grid.setColumns(visibleCols)	grid.updateColumnById('gender', { hidden: true }); and grid.updateColumns();
sharedService.allColumns	grid.getColumns()
sharedService.visibleColumns or grid.getColumns()	grid.getVisibleColumns()

Disadvantages or Side effects

There are some side effects related to this new approach of using hidden column property, more specifically with colspan and rowspan. With the previous code, if we had spanning then the hiding a column would simply move over the same spanning to the next column. However with the new code, hiding the column will keep its spanning(s) but will be hidden as well, the other columns spanning(s) will remain on the same column indexes. I think in the end, the new code is actually much more predictable and so I'm inclined to say that the new behavior is better and more predictable (see below).

There's also another side effect which I think is also ok which is that since we would keep all columns but just toggle their hidden properties, then a frozenColumn would also follow and stays with the same column forever. Prior to this PR, with the old code, I had to keep a ref of the column ID and recalculate the frozenColumn index. So with the new code, I can get rid of the code that was recalculating the frozen column index, it's less code and also more predictable

Notes

The hidden column property means that the cell won't be rendered in the DOM (it's simply skipped), but its column index still exists. For example if we have 3 columns and the middle one is hidden, then the first cell class is slick-cell l0 r0 and then the last cell is also shown with slick-cell l2 r2 (notice that l1 r1 isn't displayed but its indexed is kept). This introduced some challenges with colspan/rowspan, more specifically the keyboard arrow navigation because of these ghost index when the column is hidden but their index are still preserved. So anyway, that's why it took me over a month to figure out how to fix them and find all these new side effect bugs that we didn't see before because we previously wipe the array with setColumns() and we didn't previously have blank holes in the middle, so it's a bit of a challenge now but still is the correct approach I think.

Another note is that with Grid Presets if we were to provide a list of columns that had less columns than the original list, it meant that the ones missing were considered hidden columns. However with the new approach, we have columns with potentially hidden props, but I think it can be useful to support both approaches. So with the Grid Presets, I now support both approaches, the user can still use the old approach (less columns equals to hidden columns) and the new approach (all columns but some with hidden flag). Supporting both is great because that means that if the user had any old Grid States saved (to use as Grid Presets when loading a grid), then it would still work.

Conclusion

I think that the hidden is really what SlickGrid should have used from the start, I find it to be the correct way of handling visibility while always keeping the columns reference (for example it's a lot easier to deal with translations). Perhaps it wasn't obvious that this was useful before the Column Picker/Grid Menu were later added to the project, but now that we have them, using hidden makes more sense. The end goal now would be to push the user to stop using setColumns() but now start using the new function updateColumnById('id', { hidden: true }) and then updateColumns() (not setColumns() since that would erase the reference to the full columns ref)

Left Side: previous code ➡ Right Side: new code

cc @zewa666 @6pac

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[pkg-pr-new]

angular-slickgrid

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/angular-slickgrid@2281

aurelia-slickgrid

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/aurelia-slickgrid@2281

slickgrid-react

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/slickgrid-react@2281

slickgrid-vue

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/slickgrid-vue@2281

@slickgrid-universal/binding

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/binding@2281

@slickgrid-universal/common

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/common@2281

@slickgrid-universal/composite-editor-component

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/composite-editor-component@2281

@slickgrid-universal/custom-footer-component

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/custom-footer-component@2281

@slickgrid-universal/custom-tooltip-plugin

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/custom-tooltip-plugin@2281

@slickgrid-universal/empty-warning-component

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/empty-warning-component@2281

@slickgrid-universal/event-pub-sub

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/event-pub-sub@2281

@slickgrid-universal/excel-export

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/excel-export@2281

@slickgrid-universal/graphql

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/graphql@2281

@slickgrid-universal/odata

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/odata@2281

@slickgrid-universal/pagination-component

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/pagination-component@2281

@slickgrid-universal/row-detail-view-plugin

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/row-detail-view-plugin@2281

@slickgrid-universal/rxjs-observable

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/rxjs-observable@2281

@slickgrid-universal/text-export

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/text-export@2281

@slickgrid-universal/utils

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/utils@2281

@slickgrid-universal/vanilla-bundle

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/vanilla-bundle@2281

@slickgrid-universal/vanilla-force-bundle

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/vanilla-force-bundle@2281

commit: c35c9c7

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.0%. Comparing base (0a39376) to head (c35c9c7).
⚠️ Report is 1 commits behind head on next.

Additional details and impacted files

@@           Coverage Diff           @@
##             next    #2281   +/-   ##
=======================================
  Coverage   100.0%   100.0%           
=======================================
  Files         198      198           
  Lines       18215    18256   +41     
  Branches     5010     5021   +11     
=======================================
+ Hits        18215    18256   +41     

Flag	Coverage Δ
angular	100.0% <100.0%> (ø)
universal	100.0% <100.0%> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.