Problem
With enableVirtualization + enableColumnPinning, the virtualizer applies an inline transform: translateY() to the body <table>. That transform creates a containing block, so the pinned body cells' position: sticky resolves against the transformed table instead of the horizontal scroll container. The thead sits outside the virtual-scroll wrapper, so header pinned cells still stick correctly — the two desync the moment the grid scrolls horizontally.
Symptom
Pinned headers stay put while their body cells scroll away with the middle columns: left-pinned name cells clip mid-text under the floating header, right-pinned columns drift out from under their headers, and unrelated content slides beneath the pinned header labels. Reads as "everything overlapping". Measured: at scrollLeft=90, non-pinned header/body aligned (x=463/463) but pinned header x=273 vs pinned body x=183 (=273−90).
Repro
Any table with enableVirtualization: true, left+right pinned columns, and enough columns to overflow horizontally → scroll right.
Workaround
Disable virtualization (viable only for small datasets).
Suggested fix
Virtualize without transforming the scrolling table — e.g. translate an inner non-scrolling wrapper, use top-offset spacer rows, or position pinned cells relative to a non-transformed ancestor — so column pinning and row virtualization can coexist (they're precisely the two features large grids need together).
Versions: yable-react 0.10.4 / yable-core 0.9.0.
Problem
With
enableVirtualization+enableColumnPinning, the virtualizer applies an inlinetransform: translateY()to the body<table>. That transform creates a containing block, so the pinned body cells'position: stickyresolves against the transformed table instead of the horizontal scroll container. Thetheadsits outside the virtual-scroll wrapper, so header pinned cells still stick correctly — the two desync the moment the grid scrolls horizontally.Symptom
Pinned headers stay put while their body cells scroll away with the middle columns: left-pinned name cells clip mid-text under the floating header, right-pinned columns drift out from under their headers, and unrelated content slides beneath the pinned header labels. Reads as "everything overlapping". Measured: at scrollLeft=90, non-pinned header/body aligned (x=463/463) but pinned header x=273 vs pinned body x=183 (=273−90).
Repro
Any table with
enableVirtualization: true, left+right pinned columns, and enough columns to overflow horizontally → scroll right.Workaround
Disable virtualization (viable only for small datasets).
Suggested fix
Virtualize without transforming the scrolling table — e.g. translate an inner non-scrolling wrapper, use top-offset spacer rows, or position pinned cells relative to a non-transformed ancestor — so column pinning and row virtualization can coexist (they're precisely the two features large grids need together).
Versions: yable-react 0.10.4 / yable-core 0.9.0.