Sticky column header text

[HawkOnPK]

Hey there.

This is both an example on how to have column titles staying on screen for very broad columns when scrolling horizontally, as well as the question if this might be a useful feature for the library itself (and maybe how to add it as a kind of plugin), and for eventual improvement suggestions.

Following the code handles used to reach that effect:

• Column adjustment to set a left position instead of the transformation for a correct viewport

columnProperties: (args) => {
  const startIndex = Math.min(...args.indexes || [args.index]) || 0;
  const leftOffset = startIndex === 0 ? 0 : Array.from({ length: startIndex }, (v, i) => i).reduce((sum, ix) => sum + args.providers.dimension.state.sizes[ix], 0);

  return {
    style: {
      left: `${leftOffset}px`
    }
  };
}

• CSS adjustments to have a standarized default viewport of the cells where the content can be sticked inside

.rgHeaderCell.flowing-text { /* remove the original "transform", this is replaced with a "left" directive */
    transform: none !important;
}

.flowing-text > .header-content { /* sticky content trying to keep in display inside the rgHeaderCell parent */
    flex-grow: 0 !important;
    position: sticky;
    left: 0;
}

---

I wanted to provide a js fiddle as well to show it, but for reasons unknown to me, the "args" object did not have any index/indexes applied (https://jsfiddle.net/zsypvmj8/1/)

[revolist]

Hi, thanks for sharing this.

RevoGrid Pro already provides StickyCellsPlugin for sticky data cells/rows during vertical scrolling. However, your example describes a different behavior: keeping a column header’s content visible while horizontally scrolling through a very wide column.
Horizontal sticky header content is not currently covered by StickyCellsPlugin. Your workaround demonstrates the desired result, but it overrides the transform used by horizontal virtualization, so it may require additional handling for pinned columns, grouped headers, resized columns, RTL, and large virtual scroll ranges.

Regarding the callback, regular column headers receive args.index; indexes is associated with column groups. If index is missing in the fiddle, please check that it uses the same recent RevoGrid version as your application.
This could be a useful extension to the existing Pro sticky functionality—either as an option in StickyCellsPlugin or as a dedicated sticky-header-content feature—implemented at the viewport/header level so virtualization remains correct. Thanks for proposing it and providing a working prototype.