Perf, Perf and... Perf

As the title suggest, this new release brings a few improvements in terms of performance. especially in the following 3 areas

1. there was a contribution, in this PR, done on the SlickGrid (core) lib to improve batch (insert/edit/delete) and so I also made the changes in the Grid Service to take advantage of them in the following methods (addItems, updateItems and deleteItems)
   • the test done in SlickGrid (core) is by inserting 100k rows in a grid (before: 1100ms vs after: 200ms)
2. date sorting is now 2x times faster (check full test logs in the PR)
   • on 50k rows with sorting 1 date column, before 1981.27ms and after 903.99ms => 2.1x faster
3. date filtering is now between 4x to 6x times faster (check full test logs in the PR)
   • all type of filters might benefit but the date is the biggest perf boost
   • on 50k rows with filtering 1 single date column, before 1471.19ms and after 246.01ms => 6.1x faster
   • on 50k rows with filtering 1 date range column, before 2695.77ms and after 591.40ms => 4.4x faster

You first reaction might be... how did you gain so much perf boost?
It all started when I was looking at where MomentJS is used in the lib, then I noticed that the Date sorting is actually parsing to a MomentJS object twice (1x for validating the date and 1x for the actual date) but that could be improved to do it in 1 parsing execution (use the same moment object to call momentDate.isValid() and then just use it for the sorting diff)... so with that done, I decided to take a look at date filtering to also avoid double parsing, but what I ended up finding, was that were being double parsed and worst than that, it was re-parsing the search values on every single cell value comparison (in other words if we have 50k rows, it was double-parsing the date in the search value 50k times and double-parsing the cell value 50k as well... so when it was supposed to compare and parse 50k rows + 1 time parsing for search value, it was in fact parsing over 4 times that which was about 200k parsing instead of 50k + 1 row... hence the perf boost between 4-6x faster). You can try it yourself, go over the GitHub demo page on Example14 and/or Example 19 then click on "50k rows" and test it out for yourself. If you are dealing with couple thousand rows, you might not notice the difference but make that 25,000 or 50,000 rows and you will surely notice the boost 🚀

Enjoy it

Enjoying the lib? Make sure to upvote ⭐ and/or Buy Me a Coffee ☕
... and if you already have, well then thank you 😺
Cheers

Features

• filters: add updateSingleFilter for a single external filter (#699) (677beb4)
• perf: huge filtering execution speed improvements (#694) (f93a24d)
• perf: improve date sorting speed (#691) (1040352)
• services: add bulk transactions in Grid Service CRUD methods (#687) (277e627)
• tests: add Cypress E2E tests to Bootstrap Tabs Example (#698) (b8d1d14)

Bug Fixes

• backend: incorrect item with GraphQL and useLocalFiltering (#697) (aa78e76)
• exports: Excel Export custom width applies the width to next column (#683) (fffa711)
• filters: don't use indexOf with NOT_IN_CONTAINS (#693) (844e167)
• frozen: hiding multiple columns when using pinning gets out of sync (#684) (a453d76)
• plugin: recreate header menu w/adding column dynamically, fix #689 (#690) (1b89e2f)
• build: enable tsconfig strict mode tsconfig, fixes #675 (#702) (7219249)
• filters: make sure Select Editor/Filter collection is filled (#700) (61e6599)
• filters: use defaultFilterOperator in range when none provided (#705) (a176037)
• helpers: should be able to highlight first row (0) (#701) (269f1e9)
• plugins: do not recreate header button plugin after re-render (#706) (da62a48)

Support Bootstrap 5 & some Tree Shakable improvements

First big release of the year, this version brings a lot of great features, enhancements and a small (but noteworthy) breaking change, see below. Happy New Year 🚀

Main Changes

• a new collectionOverride for the Select Editor (single/multiple) and the AutoComplete Editor which allows to change the collection per cell clicked (see Collection Override - Wiki
• add Bootstrap 5 support (big thanks to @gcko for the contribution and a new BS5 Demo now part of the Angular-Slickgrid-Demos)
• OData Service fixes to better handle filter ranges & decimals (big thanks to @jr01 for these fixes)
• following the OData changes, these were also applied to the GraphQL Service
• a few Tree Shakable enhancements were made
  • external SlickGrid plugins are no longer imported via require(plugin), which was not Tree Shakable, they are now imported the more natural way via import(plugin) which is Tree Shakable
  • I also found out that all the Flatpickr Locales were being imported (also because of require(flatpickr/locale), you need to see the breaking change below.

Breaking Change (Flatpickr Localization)

As mentioned in previous paragraph, I found out that all the Flatpickr (date picker) Locales were all being imported (over 60 locales) and ended up in the bundle/build, so in order to fix that we now ask the developer (you) to import whichever Flatpickr Locale you need via your App Module (right after AngularSlickgridModule import), if you omit/forget to do this, it will display a console warning and revert to English. I didn't want to do a major release for this small change and there's also a console warning to tell you when you forget to import the locale properly, worst case is that you'll see English being used instead of the expected locale.

• more info in this Wiki Flatpickr Localization

Final Note & Thanks

Again big thanks to @gcko and @jr01 for their contributions.
If you like the lib, please upvote ⭐ and/or Buy Me a Coffee ☕

---

Features

• core: export Editors, Filters & Formatters as Public (e244218)
• core: methods to change column positions/visibilities dynamically (49ab5e5)
• editors: add Column Editor collectionOverride option (96cbd78)
• styling: add support for Bootstrap 5 (afb79e7)
• editors: change all private keyword to protected for extensability (#680) (029a90c)
• filters: change all private keyword to protected for extensability (#679) (e5b5e8d)

Bug Fixes

• backend: GraphQL queries with input filter (8465610), closes #656
• backend: OData queries with input filter (5822de1)
• build: import Flatpickr Locale on demand via regular imports (ef06543)
• core: add console error if any of column def id includes dot (b1aa321)
• core: range default should be inclusive instead of exclusive (4990162), closes #650
• core: use regular imports instead of require to load plugins (b5204e5)
• editors: slider value not shown with undefined & fix small styling (b85c6c5)
• exports: should be able to change export file name, fixes #655 (7b2a9ef)
• plugin: Row Detail loses html content when used with Row Selection (93b59c7)
• sorting: add cellValueCouldBeUndefined in grid option for sorting (24584b1)
• comp: empty data warning should work with autoheight grid, fix #671 (58c593b)
• filters: Grid State filters should always include an operator (#676) (9ded204)
• metrics: refresh metrics also when providing new data to DataView (#677) (7b95401)
• metrics: use onRowsOrCountChanged to refresh metrics (#681) (ceb0d77)
• pinning: recalculate frozen idx properly when column shown changes (#682) (996125d)
• plugins: throw when Tree Data used with Pagination, closes #658 (672db5f)
• typings: add specific file type to export service options (b99c6e4)

Improved LongText Editor (textarea) & Multi-Select.js Enhancements

Last release of the year... 🎄

The Editors.longText now has a full new set of options (see longTextEditorOption interface) which you can add to your column definition editiorOptions

• New Wiki - Longtext (textarea) Editor

Also enhanced the 3rd party lib multiple-select.js to auto-position not only the top/bottom but also left/right, so it will typically be position as a drop down (bottom) showing on the right, but in some occasion you might not have enough space (for example if your column is the last column of your grid)

• See a demo on Example 27, open the last column filter and you will see the dropdown showing on the left side.

Final Note

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

---

Features

• editors: add few editor options to LongText (textarea) Editor (38c7442)
• filters: add auto position (left/right) to multiple-select lib (1b23b84)

Bug Fixes

• core: make @types/jquery as a dependency to avoid build error (966ebb0)
• editors: Select Editor option to return flat data w/complex object (a3e6427)
• exports: when cell value is empty object return empty string (0534d13)
• filters: use offset left to calculate multi-select auto position (left/right) (9d79e2d)

New Empty Data Warning, Leak Fixes & Small Chore Updates

This release is not a huge release but it has certain features and fixes worth knowing about.

Small chore update was to just upgrade the lib project to Angular 8 (from 7) and also ng-packagr which is used to create the lib itself. You might be wondering, why not upgrade the lib to Angular 10 internally? Mainly to be a bit more on the cautious side, because Angular 9+ has the new Ivy rendering engine, so better play safe and stick with something that I know still works and is backward-compatible. This version should have no impact but just in case I decided to release it under a minor version.

There's also a new warning message (inside the grid) that will show "No Data to Display." that can shown after filtering or when it's simply empty. As all the other feature I have done, there are few options with it (see the emptyWarning interface for options), you can also disable it with the flag enableEmptyDataWarningMessage.

Another main topic that was brought up, and much time was spent on, was what we thought to be memory and/or detached DOM nodes but even if we fixed a few unsubscribed events (in both the core and this lib), the main problem ended up (and still is) coming from the Flatpickr lib (date picker) which was leaking detached elements (that was patch in the lib) and also an event listener causing performance downgrade which is caused by Flatpickr listening to the keydown event on the document.body and I have opened a PR #2329 to fix that, so hopefully this will be merged eventually (you could maybe upvote the PR #2329 to show interest in getting that merged).

Small Possible Breaking change

If you get an error with JQuery.Event it's because I now use the correct jQuery Event Type, you simply need to install it via yarn --dev @types/jquery (or use the NPM command to install as Dev Dependency) to get rid of the build error.

Lastly...

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

Features

• core: update project lib to Angular 8 with newer ng-packagr (#617) (edae737)
• core: add "Empty Data" warning message when grid is empty (#631) (8f72e38)
• formatters: add a fake hyperlink formatter (#630) (694f0ea)
• formatters: add AlignRight and AlignCenter Formatters (#634) (3645d60)
• services: add 2x new methods hideColumnById(s) (#633) (e4455a9)
• core: add enableMouseWheelScrollHandler grid option (3150124)

Bug Fixes

• core: revert to use WebPack to run Cypress E2E tests (3b3c643)
• extensions: import jQuery mousewheel only with frozen, fixes #618 (#619) (c3b52db)
• filters: slider filter setValues really change input value (#621) (212c275)
• backend: OData/GraphQL pagination should display warning on empty (#632) (7d32bac)
• core: clear dataset when destroying & fix few unsubscribed events (#629) (0ee3421)
• core: Flatpickr is not destroyed properly & leaks detached elements (#627) (a9f7027), closes #625
• core: mem leaks w/orphan DOM elements when disposing, fixes #625 (#626) (d1e284f)
• core: properly dispose plugins to avoid detached DOM elements (#628) (3b4ccc4)
• core: nullify grid/dataView/gridOptions when destroying to avoid leak (b995b65)
• core: header columns grouping misbehave after hiding column (c89a21b)
• extensions: CellExternalCopyBuffer onKeyDown event leak, fix #635 (#636) (9ce8326)
• core: showing/hiding column shouldn't affect its freezing position (7907cb8)
• formatters: date formatters should accept ISO input & output to US (482d0f5)

Compound Filters Styling Changes

This versions brings a few fixes and couple of styling improvements, the biggest changes are

• Compound Filters with Operator dropdown on the left got styled differently and now includes each Operator descriptions.
  • NOTE: make sure to add new translations to the new Operator descriptions, you can see them in the PR #582
• Add more Grid Service methods to help toggling Sort & Filter functionalities.

Final Word

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

Features

• core: add custom entry to Select Editor/Filter collections (#592) (43e483e)
• editors: add Clear Date button to Date Editor (#580) (f2059a2)
• services: add Toggle Filtering/Sorting & Hide Column methods (#587) (b9cf7f9)
• styling: add description to Compound Filter Operators (#588) (56588d1)
• styling: add Pagination button height sass variable (#596) (5db78c2)
• tests: add more Cypress E2E tests for grouping (#584) (90d47e6)
• styling: add frozen on all possible elements with SASS variables (#599) (a6f292c)
• chore: update Cypress reporter call with mochawesome (#614) (07bd99a)

Bug Fixes

• editors: add blank entry on Select Editor should happen once (#591) (f847e43)
• editors: update to latest Flatpickr version (#577) (0675b31)
• filters: disregard time when filtering date only format (#593) (9e3acdc)
• filters: tree data presets caused regression in any grid w/presets (#597) (74d611d)
• pinning: put back vertical scroll on grid after removing freezing (#581) (f07ff75)
• select: make a collection array copy to avoid change by ref (#595) (4d6a395)
• styling: grouping with checkbox should be aligned left (#582) (18289d3)
• styling: support other unit of measure in SASS (#590) (666e6ee)
• styling: Compound Filter Operator dropdown too wide in BS4 (#598) (cb48247)
• core: don't override alwaysShowVerticalScroll flag (#600) (4eb9237), 6pac/SlickGrid#537
• core: hide Grid Menu Filter/Sort cmd when disabling functionality (#607) (6a68e23)
• core: unsubscribe every possible events (#611) (2a92e78), closes #610
• interfaces: column types in GridStateChange (#609) (8705aac)
• styling: add missing pointer cursor to flatpickr inputs (32cd122)
• styling: flatpickr bg-color should be using SASS variable (#616) (8a613d4)

Styling Enhancements

This new version brings a few Styling enhancements one of which is a new colors.scss to help coloring SVGs by providing new color-X CSS classes (like color-primary, color-danger, ...), this new file is included in both the Material-Design/Salesforce Themes but is not included in the Bootstrap Theme (since that theme doesn't have SVGs). Also if you wish to have a lighter CSS file and not include this new colors.scss, you could use the new bare versions which doesn't include any non-essential Styling (it doesn't have any SVG/Color. Flatpickr, MultipleSelect styling, e.g. slickgrid-theme-material.bare.css), there's also a lite version which is roughly the same as the bare version except that it adds the SVG/Colors to it (e.g. slickgrid-theme-material.lite.css) while the regular version have it all (e.g.slickgrid-theme-material.css). more info is provided in the Wiki,

• Wiki - SVG Colors CSS Classes

The AutoComplete Editor also got a few improvements and 2 new extra CSS styling classes (2 rows, 4 corners), for more info take a look at the Wiki

• Wiki - AutoComplete Editor | animated gif

Also note that the latest version of Flatpickr has couple of small issues and that had a side effect in the Editors.Date of this lib, so to quickly fix this, I made a change to the package.json to use the previous working version "flatpickr": "4.6.3". There might be a way to use latest version but that would require some code change in the lib and I don't have cycle to look at that and since the previous version works then I'll stick with that for the foreseeable future.

Final Word

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

Features

• autocomplete: add much more functionalities to the AutoComplete (#559) (326ec5f)
• core: add loading spinner to AutoComplete Editor/Filter (#556) (9a44225)
• core: update npm packages & move ngx-translate to peer dependencies (#567) (023a7e0)
• styling: add extra SASS utilities and icon colors (#562) (529a15c)
• styling: find way to add colors to SVGs used by the lib (#557) (b551caa)
• tests: add more Cypress E2E tests for Language change (082ed22)
• tests: add more Cypress E2E tests for Pagination Lang change (dc1a96c)

Bug Fixes

• core: latest Flatpickr breaks Date Filters/Editors (#558) (d6e0bef)
• editor: SingleSelect Editor should show pick false value (#560) (0222d09)
• editors: AutoComplete Editor might have undefined object label (#555) (a8b9248)
• editors: fix couple of small editor bugs found (#563) (0894f16)
• styling: remove unwanted source map from css output files (#564) (e9fd212)
• styling: extra styling shouldn't override default bootstrap style (#570) (5cdc4d9)
• editors: all Editors should call commitChanges even when invalid, fixes #571 (#574) (fd052d1)
• styling: refactor Material/Salesforce styling theme (#573) (e2b138d)

Expose Extensions (addons)

This new release brings a new small feature that could simplify how to get the addons (controls/plugins) instances, for example the Row Detail is an extra SlickGrid addon (plugin). It only provides a new and easier way but all previous ways of getting the addon instances still work, so there's no breaking change.

If we look at the Row Detail for example, you could previously do it in 2 ways but now we have a 3rd way of getting them.

1. use onExtensionRegistered from the rowDetailView grid options
2. use the (onAngularGridCreated) and then use getSlickgridAddonInstance()
3. The new way is still through (onAngularGridCreated) but this one now exposes all the addon instances (columnPicker, gridMenu, rowDetail, ...) via the extensions property

The Option 1 or Option 3 are probably the best way of getting the instance. The new Option 3 has the advantage of containing all addon instances at once, so it might be useful if you want to use more than 1 addon instance. More info on the new Wiki - Addons/Extensions (controls/plugins)

Editors

Another smaller but nice enhancement is on the Editors.longText, which is now showing how many characters (bottom left) were typed in the TextArea versus how many chars are accepted (by default it will show as a limit of 500). While adding this feature, I found out that there weren't any Validators that existed to check the length of the text on any of the text editors (autoComplete, text, longText) and so I added these missing options for validation (minLength, maxLength and you can also provide the extra option operatorConditionalType: 'exclusive' or inclusive which is the default, note that this option also exist for the number editors using the minValue, maxValue)

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

I will re-iterate again, as I mentioned it in the previous version, that I don't expect any more big features before the next major breaking change release.
You can read more about this in the previous release here

note that version 2.19.x was the supposed to be the last before the next major release but it turns out that this new features deserved a minor bump to 2.20.x.

Final Word

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

Features

• core: expose all addon instances (#545) (3578d9e)
• editors: add min/max length options to text editors (#542) (cc17d36)

Bug Fixes

• editors: Editors should work with undefined item properties (#540) (5c33a48)
• footer: remove unnecessary row class to avoid negative margins (#541) (34ed648)
• interfaces: grid option enableColumnReorder can also be a function (#543) (82b064d)
• styling: tweak styling so that we won't need to use css !important (#544) (13abe5b)
• core: add missing inlineFilters DataView optional flag (#551) (a5ae4da)
• extensions: Row Detail gets blanked out for no reason, fixes #546 (#552) (0087dd2)
• extensions: adding Context Menu custom commands was not working (#548) (45bf561)
• extensions: Row Detail not always refreshing w/customId, fixes #546 (#550) (324f490)

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](https://...

Tree Data View & new Styling Themes with SVG icons

Quick intro

This version is packed with a new major feature (Tree Data View) and also comes with many styling enhancements & bug fixes. There's also a new Dual Input Editor.

Tree Data View

This is the biggest feature in this release, it is a fairly complex feature to implement (because it requires lot of recursion handling) and because of that it comes with some limitation (see below). There are 2 demos which represents 2 ways of building a grid with Tree Data.

• Tree Data from Parent/Child refs - demo | component
• Tree Data from Hierarchical dataset - demo | component

Tree Data Limitations

Tree Data is, like I said earlier, fairly complex and because of that, it has certain limitations. See below for what works and what doesn't. If anyone can help in pushing the missing piece further that would be great.

Works

• Single Column Sort

Doesn't Work (they're also not supported, so please don't open any new issue unless you want to help)

• Multi-Column Sort
• Aggregator

Styling

There is now a new Sort Icon hint (with an opacity of 0.5) when hovering a Column that has Sort enabled, this will help the user to identify that the column is sortable.

New Themes

This release also brings 2 new Styling Theme, first is a Material Design Theme and also a Salesforce Theme... does that mean SlickGrid is used in Salesforce... indeed! (more on that later).

• Material Theme - demo
• Salesforce Theme - demo

For more demo, you can also take a look at my other repo (Slickgrid-Universal) demos. Also, note that Bootstrap is completely optional (and has been for some time), the other demo that I mentioned was created using only the Bulma CSS framework, you will also notice that only the Material & Salesforce Themes were used across these multiple examples.

Each of these Styling Themes are compiled in CSS and created from a SASS file, so you can use either or. Both Themes are shown in each Tree Data demo

• Note: you might need to refresh the page to see the theme correctly since the styling is global and if you change page, the style will follow on the next page (unless you refresh).

SVG Icons

The 2 new Themes were created with only SVG icons, most of the icons were pulled from the Material Design Icons set. If you wish to create your own set of SVG Icons, you can refer to the new Wiki - SVG Icons

• Wiki - SVG Icons.

Note: Just to point out that both the Fonts and SVG icons are supported, the default Bootstrap theme will keep Font-Awesome 4 so that it still works for everyone. You could however use SASS to override the Font and use SVG, again see the Wiki - SVG Icons for more details.

Final Word

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

---

Features

• editor: add new Dual Input Editor & extract all Editor Validators (#446) (06f5dc9)
• extension: add column position option for checkbox row selector (fc72ba0)
• extension: add column position option for Row Detail icon (#419) (36bdcd1)
• extension: add latest slickgrid with RowMove improvements (#428) (4f4b231), closes #256
• grouping: add missing Grouping interface properties, closes #430 (#432) (fe7a65a)
• query: add queryFieldNameGetterFn callback know which field to use (#434) (0d5a150)
• sort: add valueCouldBeUndefined column flag to help sorting (#429) (dcd7a41)
• style: add Sort icon hint on hover when column is sortable (#435) (a746c2d)
• styling: add CSS/SASS Material Design & Salesforce styling themes (#454) (0030763)
• translate: add namespace prefix + separator grid option (#462) (c23370e)
• treeData: add new Tree Data View feature, closes #178 (#455) (3250bde)
• gridMenu: update SlickGrid & add new Grid Menu options, fixes #464 (#473) (10f0b7d)

Bug Fixes

• editor: disregard Flatpickr error on Date Editor and fix output format (#445) (96e2973)
• export: add grouped header title (from pre-header) into exports (#436) (a315f85)
• export: remove unsupported file type, closes #452 (#458) (c00b6ab)
• filter: string filter should also work when using Contains (#427) (2c0765b)
• filter: when entering filter operator it shouldn't do any filtering (#431) (9d53315)
• formatter: exportWithFormatter should work with undefined item prop (#457) (3cfcab1)
• gridMenu: column picker list should include grouped header titles (#460) (e4a34a0)
• gridMenu: command "Togge Filter" disappeared, fixes #438 (#448) (b10c5be)
• gridService: crud methods should support custom dataset id (#453) (2c91f35)
• pagination: passing custom pagination sizes should work, fixes #456 (#459) (0367625)
• resizer: remove scrollbar measure compensate patch (#424) (bca1f0b)
• rowDetail: use latest SlickGrid to fix issue with id, fixes #440 ([#449](https://github.com/ghi...

Row Selection now in Grid State & Presets

Row Selections in Grid State & Presets

Row Selections are now included in the Grid State & Presets, I didn't want to include them in the past mainly because I always thought that it wasn't keeping the selection properly after filtering/sorting/... but then I learned about syncGridSelection and how it works. This flag allows to actually keep in memory the row selection, even when row is not visible... with this, it's now part of the Grid State & Presets and it even works with Local Grid Pagination (that required a lot of work though). The syncGridSelection is still a flag that that can be disabled in the Grid Options if you wish to not preserve the hidden selections. You can see Example 10 - Row Selections and Example 16 - Grid State

Note when using BackendServiceApi

However please note that even if syncGridSelection is enabled by default, it is disabled when using a BackendServiceApi it is disabled with an extra flag syncGridSelectionWithBackendService, you could enable it if you want but you might have unintended behaviors because Backend Services changes the DataView every single time there's a page change.

Again if you like the lib, please upvote if you haven't yet. ⭐️

Cheers ☕️

Features

• menus: add "onAfterMenuShow" event to all possible menu plugins (#389) (141d01a)
• selection: add flag to disable syncGridSelection w/BackendService (#390) (f29c6f0)
• selection: preserve row selection & add it to Grid State & Presets (#388) (a50d489), closes #295
• excel: add some extra styling & width options for Excel export (#403) (d87ce2c)
• tests: update to latest Cypress version (dc3afa9)
• sort: add default sort field as grid option (00b0751)

Fixes

• rowDetail: add datasetIdPropertyName option in Row Detail, (#391) (197ea9f), fixes #387
• backend: updateOptions can be use with partial options - TS type (80bdaa5)
• footer: custom footer should work anytime pagination is disabled (7d9798a)
• locales: fix some Locales not showing up when not using Translate (#392) (4d5e65b)
• pagination: on filter change pagination should reset to 1st page (#397) (af64dd6)
• selection: filter data should work with row selection, closes #295 (#393) (f36a4f7)
• selection: row selection always be kept, closes #295 again (#399) (5e8f1df)
• editor: LongText Editor save button that was not working properly (90beeac)
• mousewheel: add jquery mousewheel lib to fix scroll in frozen grid (d2bc0e7)
• columns: add/remove columns dynamically, fixes #406 (324cb1a)
• example: should re-render after clearing groups, fixes #407 (7752abd)
• columns: remove columns dynamically with Editors, fixes #406 (903473d)
• formatters: decimalSeparator & thousandSeparator work tgt, fix #411 (67318d5)