Frozen Columns and SlickGrid/DataView interfaces

Quick Word

I would like to remind everyone that this lib is mostly done by 1 person (myself @ghiscoding) and I would seriously prefer if you have any coding questions to ask them on Stack Overflow since a lot more users can help you out with any simple installation or usage questions. You might have also notice that I've installed a Bot that will auto-close any issues that are missing the REQUIRED sections from the issue templates (I've installed that because I got tired of having to repeat the same questions over and over, if you want help then please take the time to fill in your issue form accordingly, 30sec of your time to fill in the issue template with all info goes a long way)... but again I would prefer any questions be asked on Stack Overflow

New Features

This new version brings a couple of new features, the 2 main ones are explained below:

• SlickGrid interface and SlickDataView interface, this is great with VSCode intellisense.
  • these are NOT linked anywhere in the lib (it will be in next major version, continue reading below) because that would have probably thrown a lot of TS build compiling warnings/errors but you can start using them wherever you find them useful, so you can change all your code from any type to the following:

import { SlickGrid, SlickDataView, } from 'angular-slickgrid';
 
export class MyComponent {
  grid: SlickGrid;
  dataView: SlickDataView;
}

• a new "Frozen Columns" header menu (this is an opt-in feature) - demo animated gif | Example 15 (bottom grid only)
  • in order to see this new header menu command, you will have to use the following code since it's an opt-in feature, also note that it will also an extra Grid Menu command "Clear Frozen Columns" to remove all columns freezing (pinning)

this.gridOptions {
     `gridMenu: { hideClearFrozenColumnsCommand: false },
      headerMenu: { hideFreezeColumnsCommand: false }`
}

What's coming in the Future (much later in the year)

This version is probably the last minor (features) version before a major (breaking changes) version. The next major version, which by the way is a very loose roadmap date (maybe before Christmas would be nice). What will this next major version be all about?

1. It will use another lib Slickgrid-Universal with all the common code
   • it is a Monorepo structure (built with Lerna) and by the way Angular is a monorepo structure
2. It's fully typed, so it has all necessary TypeScripts interfaces (including the 2 new SlickGrid and SlickDataView that were mentioned earlier)
3. All @deprecated code will be removed
   • to prepare yourself, you might want to look at your console, most of the deprecated code already send console.warning messages
4. It will be framework agnostic (can be used by Angular-Slickgrid, Aurelia-Slickgrid, SalesForce, ...)
5. It will have a few decoupled Services as separate packages (OData, GraphQL, FileExport & ExcelExport)
   • You can see an example of the changes here
   • this also mean smaller bundle size for you (currently these 4 Services are in Angular-Slickgrid, want it or not)
6. Any work done for this new breaking version will go under the new version-next branch

So the main points are number 1 & 5, the latter being the main breaking change, this new lib was built because I already support 2 frameworks (Angular & Aurelia) and now we are starting to use it in SalesForce, that is yet a 3rd framework (SalesForce uses plain ES6 JS). I thought this would be a great opportunity to move all of the common code (which Angular-Slickgrid & Aurelia-Slickgrid share about 80% of the same code) into 1 single lib (a common lib written in TypeScript but is framework agnostic) which could later be used in any frameworks (Angular-Slickgrid, Aurelia-Slickgrid, ... maybe other frameworks in the future, who knows) or in plain TypeScript or ES6.

All that to say, the focus is now on Slickgrid-Universal, once that is all complete then the work would be to rewrite Angular-Slickgrid by dropping all the common code (the 80% code) and instead use the code from common lib (Slickgrid-Universal). At the end of it, when everything is done, it will be only 1 place to update common code (instead of always having to update both Angular & Aurelia libs with most often the exact same piece of code). At the end of the day, Angular-Slickgrid will use Slickgrid-Universal which itself will use SlickGrid core lib, and anything related to Angular will remain in Angular-Slickgrid but anything else (common shared code) will be coming from Slickgrid-Universal, for the most part most users won't notice any differences except for the decoupled Services (OData, GraphQL, FileExport & ExcelExport) where you'll have to reference the new lib directly for example @slickgrid-universal/excel-export, you can see an example of the usage for Export Services and Backend Services in the upcoming Migration Guide.

More info can be found on the Slickgrid-Universal GitHub page.

Final Word

If you like the lib, please upvote ⭐ and/or Buy Me a Coffee ☕

Features

• editor: use better error message for inclusive values (#499) (6f7b569)
• pinning: add "Frozen Columns" to header menu (#494) (7782ad3)
• sorting: header menu clear sort, reset sorting when nothing left (#509) (5898c18)
• typing: add SlickGrid and DataView interfaces (#483) (2cee037)
• typings: add more TS Generic Types (#489) (a379837)
• badge: add Cypress badge (7c6c8e1)
• core: use DataView transactions with multiple item changes (#527) (154bfb1)
• styling: add custom footer font-size SASS variable (#519) (bc56030)
• tests: add more Cypress E2E tests for grid with Editors (#532) (701b624)
• tests: add more Cypress E2E tests for Tree Data (#525) (36f958d)

Bug Fixes

• core: add missing use of custom datasetIdPropertyName (#476) (9be8fbf)
• editor: float validator should accept decimal even without 0 suffix (#510) (04b4465)
• editor: shouldn't call cell changed when cell value is undefined (211a2b9)
• editor: shouldn't call cell changed when cell value is undefined (#516) (0aaeb02)
• example: use highest id as new id in addItem example, fixes #495 (#497) (1550d9d)
• excel: Excel Export add mime type to work in Firefox, fixes #500 (#501) (56c8e17)
• extension: registerPlugin not implemented correctly (#482) (92ffa3d)
• filter: recreate filter when toggling header row, fixes #493 (#496) (56d74ae)
• filter: Select Filter should use default locale without translation (#503) (5284ada)
• formatter: add possibility to parse a date formatter as a UTC date (#511) (53cc371)
• header: re-create header grouping title after changing picker cols (#502) (f03c6f9)
• lint: adhere to strict triple equality check (#477) (c49f950)
• pagination: disabled page buttons should not be clickable (#506) (fbe0d5f)
• picker: add missing pre-header title grouping extractor (#498) (ffcbf55)
• presets: compound filters operator not working correctly w/presets (#507) (f7b5270)
• styling: cell/context menus get re-position below the grid (#479) (eba2d0f)
• treeData: should support use of custom datasetIdPropertyName (#475) (7aa4f97)
• types: add missing option flags in grouping interface (#481) (a1fe38e)
• editors: add saveOutputType to finally have proper save format (#535) (cc8c31d)
• filter: Grid Preset Filters should work with Tree Data View (#522) (f574fe4)
• footer: tweak date format in custom footer for redability (#518) (b2a0823)
• menu: context menu to copy cell with queryFieldNameGetterFn (#537) (7e0640e)
• security: update standard-version npm pack to fix security warning (9d2a9f5)
• styling: sass variable should be interpolate before using calc (#536) (14f2fa0)