Cell Menu and Context Menu Plugins & GraphQL changes
Happy New Year and New Decade! 🎄🔔
Let's start the year strong, this new release brings 2 new, and extremely useful, plugins (extensions).
Please make sure to upvote ⭐️ if you like the lib. Cheers 😸
Cell Menu & Context Menu
In this new version, I revamped the styling of the Column Picker and Grid Menu (and added a bunch of SASS variables) to align with the Header Menu, there's also a lot more Cypress E2E tests (nearly double). But most importantly this version brings 2 new Extensions, Cell Menu & Context Menu. I created them both at the same time (directly in the SlickGrid core library as plugins before using them in this lib), they are very similar in their look & feel and also on how to use them as well, however they do serve different purposes. The Cell Menu is more related to row actions (e.g. delete current row) while the Context Menu is all about actions for the entire grid (e.g. export to Excel).
The Cell Menu is most commonly used as an Action Menu and triggered by a cell click or touch (you could have 1 or more Cell Menu in a grid). On the other hand, a Context Menu (only 1 per grid and now enabled by default) is triggered by a mouse right+click and comes with a few built-in commands (copy cell, export & some grouping commands when grouping is available). Both of these extensions accept a list of Commands and/or Options, the Commands are of course to execute an action and the Options are more commonly used to change a value of the current row (it can only takes 1 array of Options).
To see it in action
- a new Example 26 to demo both Cell Menu & Context Menu and an animated GIF to demo the feature.
- for a Context Menu with Grouping commands, you can check out Example 14 - Grouping and do a mouse right+click
- Wikis
GraphQL
Includes a small Breaking Change
The GraphQL Service changed slightly so that it can now be used without Pagination (the query will be different). To adapt to this change, the GraphqlResult interface got renamed to GraphqlPaginatedResult while the GraphqlResult interface is now used without page information. This basically mean that you can now disable Pagination (via enablePagination: false in the grid options) and expect a query without page info and the query will be different according to this flag, for example:
- with Pagination
query{ users(first:20, offset:40){ totalCount, nodes{ id, firstName, lastName }}}
- without Pagination (via
enablePagination: false)query{ users{ id, firstName, lastName }}
Note that current GraphQL querying inputs for Filtering & Sorting remains the same with/without Pagination, you can refer to the GraphQL Wiki for more info.
Features
- cellMenu: starting adding new CellMenu Extension (5ab64a1)
- github: change issue templates and add auto close bot (90271bf)
- menu: add action & override callbacks to all Menu plugins (a7967bb)
- menu: add Context Menu feature POC (8d04406)
- menu: starting adding new ContextMenu Extension (95d3227)
- styling: change Column Picker & Grid Menu styling (b9dc977)
- styling: change Column Picker & Grid Menu styling (d91086b)
- styling: add more SASS variables to header menu (373641f)
Bug Fixes
- graphql: disable pagination should remove any page info from query (63190c8)
- sort: add sort icons to grouping examples (0bb9844)
- translations: align all Export translations and add missing locales (d3e45bc)
- security: update DOMpurify to fix potential xss vulnerability (63c1ddc)
- styling: use latest SlickGrid version and fix some styling issues (dc0a688)
- build: TS warning on a missing Type (97b25f7)