Pinned columns
View sourcePin columns to either edge of the viewport so they never scroll out of view. Order # and Customer are pinned left; Amount is pinned right.
Try this
Watch the pinned lanes stay put while the middle scrolls.
- Scroll horizontally — Order # and Customer stay glued to the left.
- Same scroll — Amount stays glued to the right.
- Right-click the Amount header → "Unpin" to move it back into the unpinned lane.
- Right-click any other column header → "Pin left" / "Pin right".
How pinning works
- Three lanes.The grid renders three column lanes — pinned left, scrollable middle, pinned right — that share a single virtualizer. The middle lane scrolls horizontally; the pinned lanes don't.
- Sticky vertically too. Pinned columns inherit row virtualization. Scroll vertically through 10,000 rows and only the rows in viewport mount.
- Range select across lanes. Drag a range from a pinned cell into the middle lane and back out. The rectangle is contiguous and copy-as-TSV preserves the order.
- Composes with master/detail. Detail panels open inside the row across all three lanes. Pinned cells render the chevron when on the outline column.
API
Set pinned: "left" or pinned: "right" on the column. Omit the prop to leave it in the unpinned lane. The context menu and the column-visibility panel both let the end user re-pin at runtime; persisted via layoutState.