Table Column Pin/Unpin Toggle — User-Controlled Sticky Columns

A table with a single hardcoded frozen first column is common — but real data tables often need the *user* to decide which column matters most to keep visible, and to be able to pin more than one. This snippet implements genuine per-column pinning: click the pin icon on any header, and that column sticks to the left edge while the rest of the table scrolls underneath it — and multiple pinned columns stack correctly side by side, in pin order.

Why sticky columns can't all just use `left: 0`

CSS position: sticky needs an explicit left offset, and that offset is different for every pinned column depending on how many *other* pinned columns come before it and how wide each of those already is. Pin the first column and it sticks at left: 0. Pin a second column after it, and that second column must sit at left: <width of the first pinned column>px — not left: 0 (which would overlap it) and not some column-index-based guess (since pinning order and column order aren't guaranteed to match, and column widths vary with content).

`recalculateStickyOffsets()` — the core of the whole pattern

This function walks every column left to right, and for each one that's currently pinned, it assigns left equal to a running total (runningLeft) of every already-processed pinned column's actual rendered width, then adds this column's own width to that running total before moving to the next. Because it always recalculates from scratch — rather than trying to incrementally patch offsets — pinning or unpinning any column in any order always produces a correct, non-overlapping stack of sticky columns, without needing to track fragile per-column deltas.

Every cell in a column, not just the header, needs the same treatment

Pinning a column means every <td> in that column (not just its <th>) needs position: sticky, the same left offset, and a background color to stay visually opaque as content scrolls underneath. The function queries tbody td[data-col="…"] for each column index alongside its header cell, so the entire column — header and every row's cell — pin and unpin together as one atomic unit, never leaving a header pinned while its body cells scroll away underneath (or vice versa).

Recalculating on resize, not just on pin/unpin

Column widths can change when the viewport resizes (text wrapping differently, or a responsive layout adjusting), which would silently invalidate previously-correct left offsets. Re-running recalculateStickyOffsets() on the window's resize event keeps every pinned column's offset accurate even if its own or an earlier pinned column's rendered width has changed since it was last pinned.