Expanded Column Pinning Options in FlexGrid

We recently added an allowPinning property to the FlexGrid that allows users to pin (freeze) columns by clicking an icon on the column headers:

If a user clicked the pin icon next to the "Active" column, it is moved to the left and frozen in place:

This works, but some users wanted a slightly different behavior: they wanted to click the pin to freeze all columns up to the one that was clicked, without changing the column order.

We accommodated this request by making the allowPinning property an enumeration:

• None: No pinning allowed.
• SingleColumn: Toggle the pin state of one column at a time, possibly moving the column.
• ColumnRange: Toggle the pin state of all columns up to the one that was clicked, keeping the original column order.
• Both: Allow single and multi-column pinning (use the shift key to enable range mode).

For example, if you set allowPinning to ColumnRange, click the pin on the Active column would pin the first three columns:

Clicking the pin on the Active column a second time would unpin all columns.

FlexGrid Pinning Demos:

• FlexGrid Pinning JavaScript Demo
• FlexGrid Pinning Angular Demo
• FlexGrid Pinning React Demo
• FlexGrid Pinning Vue Demo

Read the full Wijmo 2020 v1 release.

If you have something interesting that you want to bring to our attention, we would love to hear it! Feel free to leave a comment below.