Skip to content

Tree Data View & new Styling Themes with SVG icons
Compare
Choose a tag to compare
@ghiscoding ghiscoding released this 19 May 19:24
· 2174 commits to master since this release
v2.18.7
9eabf5c

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 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

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) (8f16559)
  • sort: header menu sorting should include columnId property (0c47038)
  • footer: custom footer metric texts could not be changed, fixes #470 (#472) (2681596)
  • gridMenu: command "Toggle Filter Row" header row (#466) (4858794), closes #448
  • locale: use correct locale text operator tooltip, closes #468 (#469) (d978946)
  • odata: encode URI also for IN/NIN operators, fixes #463 (#471) (92bf9e3)
  • resizer: check for undefined option instead of fallback (#474) (59975f0)
Assets 2