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