Add frozen: 'start' | 'end' for end-edge column pinning by PaloSP · Pull Request #4034 · Comcast/react-data-grid

PaloSP · 2026-04-24T17:54:31Z

Adds right-edge column pinning — long-standing ask (#2873, #3671).

Column.frozen widens to boolean | 'start' | 'end'. true stays an alias for 'start' (backwards compatible).
'end' pins to the inline-end edge; symmetric infra: --rdg-frozen-end-${idx} CSS var, rdg-cell-frozen-end class, end-shadow + top/bottom-summary variants, logical properties throughout.

Credit to @robert-luoqing for #3671 which informed the approach. API per @amanmahajan7 and @nstepien's 'start' | 'end' refinement.

One check: "we want to prevent the shadow logic" (#3671 2026-04-21) — I interpreted as "preserve" and mirrored the start-shadow symmetrically. If the intent was otherwise, happy to drop it.

Tests: new test/browser/column/frozenEnd.test.ts + additions to virtualization.test.ts and direction.test.ts. Demo updated in CommonFeatures.

CLAassistant · 2026-04-24T17:54:37Z

All committers have signed the CLA.

codecov-commenter · 2026-04-24T17:58:02Z

⚠️ Please install the to ensure uploads and comments are reliably processed by Codecov.

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.54%. Comparing base (150a6f8) to head (9d10cce).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #4034      +/-   ##
==========================================
+ Coverage   97.48%   97.54%   +0.06%     
==========================================
  Files          38       39       +1     
  Lines        1549     1588      +39     
  Branches      497      515      +18     
==========================================
+ Hits         1510     1549      +39     
  Misses         39       39

Files with missing lines	Coverage Δ
src/DataGrid.tsx	`98.88% <100.00%> (+0.02%)`	⬆️
src/GroupRow.tsx	`100.00% <100.00%> (ø)`
src/HeaderRow.tsx	`100.00% <ø> (ø)`
src/hooks/useCalculatedColumns.ts	`100.00% <100.00%> (ø)`
src/hooks/useViewportColumns.ts	`100.00% <100.00%> (ø)`
src/utils/activePositionUtils.ts	`98.92% <100.00%> (ø)`
src/utils/colSpanUtils.ts	`100.00% <100.00%> (ø)`
src/utils/frozenColumnUtils.ts	`100.00% <100.00%> (ø)`
src/utils/index.ts	`90.90% <ø> (ø)`
src/utils/styleUtils.ts	`100.00% <100.00%> (ø)`

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

amanmahajan7

Thank you for the PR. A few quick comments. I can do a detailed review in 2 weeks (on a vacation)

amanmahajan7 · 2026-04-24T18:30:23Z

        }

-        const frozen = rawColumn.frozen ?? false;
+        const frozen: boolean | 'start' | 'end' = rawColumn.frozen ?? false;


Let's add a type and reuse it

amanmahajan7 · 2026-04-24T18:34:55Z

        border-inline-start: var(--rdg-selection-width) solid var(--rdg-selection-color);
      }
+
+      & > .${cellFrozenEnd}:last-child::after {


same here, let's dedupe

& > .${cellFrozen}:first-child::before, & > .${cellFrozenEnd}:last-child::after { } & > .${cellFrozen}:first-child::before { } & > .${cellFrozenEnd}:last-child::after { }

PaloSP · 2026-04-24T21:10:51Z

@amanmahajan7 pushed a revision addressing all 5 comments.

On comment 4: intentional divergence from the literal suggestion. Comment 2's dedup removed the separate cellFrozenEnd export, so row.ts no longer imports from ./cell at all — its selectors use the DOM marker classes (.rdg-cell-frozen / .rdg-cell-frozen-end) directly. cellFrozen kept as the shared identifier per your phrasing in #2. Happy to rename cellFrozen → cellFrozenStart and restore an import if you prefer.

Two open questions, both breaking — your call:

Rename CSS var --rdg-frozen-left-${idx} → --rdg-frozen-start-${idx} for symmetry with new --rdg-frozen-end-${idx}?
Rename DOM marker .rdg-cell-frozen → .rdg-cell-frozen-start for symmetry with new .rdg-cell-frozen-end?

Both currently kept as-is (non-breaking). No rush — enjoy the vacation.

PaloSP · 2026-05-13T07:52:08Z

Hi @amanmahajan7 — gentle nudge, no rush. Hope the vacation was good.

Branch is up-to-date with main (CI green) and the two open questions from my revision reply are still waiting on your call:

Rename CSS var --rdg-frozen-left-${idx} → --rdg-frozen-start-${idx} for symmetry?
Rename DOM marker .rdg-cell-frozen → .rdg-cell-frozen-start for symmetry?

Both are breaking, so I held off. Happy to address whenever you have a window.

amanmahajan7

A few more cleanup comments. I will do a detailed review soon.

amanmahajan7 · 2026-05-15T17:22:11Z

      }

-      & > .${cellFrozen}:first-child::before {
+      & > .rdg-cell-frozen:first-child::before,


lets rename this variable also

Suggested change

& > .rdg-cell-frozen:first-child::before,

& > .rdg-cell-frozen-start:first-child::before,

PaloSP · 2026-05-17T10:07:57Z

@amanmahajan7 thanks — applied all 5 inline comments plus extended the rename principle consistently across the codebase.

Your 5 comments:

lastFrozenColumnIndex → lastStartFrozenColumnIndex ✓
Restored the // TODO: sort columns to keep them grouped if they have a parent comment ✓
lastMetric → lastColumnMetric ✓
firstEndMetric → firstEndFrozenColumnMetric ✓
.rdg-cell-frozen → .rdg-cell-frozen-start (DOM marker, breaking) ✓

Same principle applied to similar names (where ambiguous "Frozen" meant "start-frozen"):

cellFrozen → cellFrozenStart
cellFrozenClassname → cellFrozenStartClassname
totalFrozenColumnWidth → totalStartFrozenColumnWidth
frozenColumnShadowTopClassname → frozenColumnShadowStartTopClassname
columnMetric (inside the second useMemo) → lastStartFrozenColumnMetric
CSS var --rdg-frozen-left-${idx} → --rdg-frozen-start-${idx} (breaking — this also resolves my open Q1 implicitly, since keeping the asymmetric -left after renaming the DOM marker to -start would be glaring)

All 351 tests pass on chromium + firefox.

amanmahajan7 · 2026-05-26T22:25:13Z

I haven't had a chance to review this PR. I will review is as soon as I can. Thanks for your patience.

yorikcv · 2026-06-05T09:52:26Z

@amanmahajan7 @PaloSP

Hi guys,

Could you please consider releasing this pull request to production? I’m currently waiting for this functionality on my side and would greatly appreciate your help.

Thanks in advance!

luisfmsouza · 2026-06-26T08:34:32Z

Thanks for your work on this @PaloSP, we are looking forward to have this functionality.

@amanmahajan7 I know you are busy, so how can we help to speed this release up?

amanmahajan7 · 2026-06-26T23:00:25Z

I am planing on reviewing this PR next week. Hopefully we can merge and release a new version early next week.

amanmahajan7

Looks great overall. A few comments and I think we can add 2 more tests

calling scrollToCell on end frozen column https://github.com/grafana/react-data-grid/blob/main/test/browser/scrollToCell.test.tsx#L64
https://github.com/grafana/react-data-grid/blob/main/test/browser/virtualization.test.ts#L140. We can add a similar test for frozen: 'end'

amanmahajan7 · 2026-07-06T01:12:37Z

      scrollToCell({ idx, rowIdx }) {
        const scrollToIdx =
-          idx != null && idx > lastFrozenColumnIndex && idx < columns.length ? idx : undefined;
+          idx != null && idx > lastStartFrozenColumnIndex && idx < columns.length ? idx : undefined;


Suggested change

idx != null && idx > lastStartFrozenColumnIndex && idx < columns.length ? idx : undefined;

idx != null &&

idx > lastStartFrozenColumnIndex &&

(firstEndFrozenColumnIndex === -1 || idx < firstEndFrozenColumnIndex) &&

idx < columns.length

We can skip scrolling for end frozen columns

amanmahajan7 · 2026-07-06T01:23:07Z

+// Single shared sticky/z-index rule reused by both edge-frozen variants.
+// Selectors that need to distinguish start vs end use the marker classes
+// (`.rdg-cell-frozen-start` / `.rdg-cell-frozen-end`) directly rather than this ecij identifier.
+export const cellFrozenStart = css`


Suggested change

export const cellFrozenStart = css`

export const cellFrozen = css`

nit

or

Suggested change

export const cellFrozenStart = css`

export const cellFrozenBase = css`

amanmahajan7 · 2026-07-06T01:30:13Z

+  await expect.element(cell3).toHaveClass(cellClassname, cellFrozenEndClassname, { exact: true });
+});
+
+test('end-frozen cells expose insetInlineEnd and --rdg-frozen-end CSS var', async () => {


seems like we are testing implementation details? Can we replicate what we did for start?

amanmahajan7 · 2026-07-06T01:30:28Z

Can rename this file to startFrozen

… tests

PaloSP · 2026-07-06T05:24:38Z

@amanmahajan7 all applied, thanks for the review.

scrollToCell — applied your suggestion; end-frozen columns are skipped the same way start-frozen ones are. Added a test (scrollToCell with end-frozen columns) asserting the no-op + that unfrozen targets still scroll.
viewportRight — you're right, applied (- totalEndFrozenColumnWidth, mirroring viewportLeft) + added it to the memo deps. The new index-based virtualization test below locks this in — fewer unfrozen columns render now that the effective viewport is narrower.
cellFrozenStart → cellFrozenBase — went with Base; the block is shared by both edge variants, so Start was misleading. cellFrozen alone felt too close to cellFrozenStartClassname/cellFrozenEndClassname semantics.
Type name — went with ColumnFrozenState. FrozenColumnPosition reads odd for the false member (not-frozen isn't a position). Happy to change if you prefer something else.
frozenEnd tests — replaced both CSS-var/computed-style tests with a behavior test: end-frozen cells stay flush with the grid's inline-end edge and stack correctly, before and after horizontal scroll (getBoundingClientRect, no implementation details).
File renames — frozen.test.ts → startFrozen.test.ts, and symmetrically frozenEnd.test.ts → endFrozen.test.ts.

New tests: scrollToCell with end-frozen columns (scrollToCell.test.tsx) and virtualization is enabled with 2 end-frozen columns (virtualization.test.ts, exact-index assertions in the style of the 4-frozen-columns test, replacing the weaker presence-based one).

Also rebased on latest main. 351 tests green on chromium + firefox.

amanmahajan7

A few more comments. I will do one final review and local testing after this change

…lector, RTL docs

PaloSP · 2026-07-06T15:52:19Z

@amanmahajan7 done, all four:

Barrel import — extracted src/utils/frozenColumnUtils.ts with isStartFrozen; colSpanUtils and styleUtils now import from it directly (barrel re-exports it for external consumers).
ColumnFrozen — agreed; the alias is gone, the type is named ColumnFrozen everywhere now.
RTL docs — updated the direction section as suggested.
GroupRow selector — good catch, applied. My :nth-child version was wrong: it kept the border on the first end-frozen cell (a visible separator inside the band) and dropped it on the row's last cell. :nth-last-child gives the mirror of the start band — internal separators removed, row-edge border kept.

While at it, swept the whole diff for leftovers of the same patterns and found one: frozenShadowStyles → frozenStartShadowStyles (local var in DataGrid.tsx, same ambiguous-Frozen naming you flagged earlier).

CI green, 351 tests passing. Ready for your final review.

amanmahajan7

One last comment otherwise ready.

amanmahajan7 · 2026-07-06T23:53:11Z

+    insetInlineStart: isStartFrozen(column.frozen)
+      ? `var(--rdg-frozen-start-${column.idx})`
+      : undefined,
+    insetInlineEnd: column.frozen === 'end' ? `var(--rdg-frozen-end-${column.idx})` : undefined


Suggested change

insetInlineEnd: column.frozen === 'end' ? `var(--rdg-frozen-end-${column.idx})` : undefined

insetInlineEnd: column.frozen === 'end' ? `var(--rdg-frozen-end-${column.idx + colSpan - 1})` : undefined

I think we need this. Can you double check

…l-pin tests

PaloSP · 2026-07-08T09:03:35Z

@amanmahajan7 good catch, confirmed it's a real bug. --rdg-frozen-end-${idx} measures from a column's right edge, so a colSpanned end-frozen cell must anchor by its last spanned column → column.idx + colSpan - 1. Start side unaffected (anchors left). Applied + added a regression test (fails on old code with the spanning cell landing 60px short, passes now, chromium + firefox). Also de-flaked the sibling scroll-pin test (cached element refs → re-query). CI green.

amanmahajan7

This is great! Thank you for adding this highly requested feature.

PaloSP requested review from amanmahajan7 and nstepien as code owners April 24, 2026 17:54

PaloSP mentioned this pull request Apr 24, 2026

implement right frozen #3671

Closed

amanmahajan7 reviewed Apr 24, 2026

View reviewed changes

PaloSP force-pushed the feat/end-frozen-columns branch from 5943b18 to 5016075 Compare April 24, 2026 20:57

PaloSP force-pushed the feat/end-frozen-columns branch 4 times, most recently from c51325e to d88ce9d Compare May 6, 2026 18:14

amanmahajan7 reviewed May 15, 2026

View reviewed changes

PaloSP force-pushed the feat/end-frozen-columns branch 2 times, most recently from 8c52472 to e9b24ff Compare May 17, 2026 10:03

PaloSP force-pushed the feat/end-frozen-columns branch from e9b24ff to f1e732e Compare May 25, 2026 16:42

PaloSP force-pushed the feat/end-frozen-columns branch from ca48030 to fb064a4 Compare June 26, 2026 08:51

amanmahajan7 reviewed Jul 6, 2026

View reviewed changes

PaloSP added 4 commits July 6, 2026 07:03

Add frozen: 'start' | 'end' for end-edge column pinning

e64f1f6

Address review feedback: ColumnFrozen type + CSS dedup

cc01140

Address review feedback: rename Frozen → StartFrozen, restore TODO

206eb5f

Address review feedback: virtualization window, scrollToCell, naming,…

24478ed

… tests

PaloSP force-pushed the feat/end-frozen-columns branch from fb064a4 to 24478ed Compare July 6, 2026 05:20

PaloSP requested a review from amanmahajan7 July 6, 2026 05:36

amanmahajan7 reviewed Jul 6, 2026

View reviewed changes

Comment thread src/utils/colSpanUtils.ts Outdated

Comment thread src/index.ts Outdated

Comment thread README.md

Comment thread src/GroupRow.tsx Outdated

PaloSP added 2 commits July 6, 2026 17:37

Address review feedback: ColumnFrozen, frozenColumnUtils, GroupRow se…

90ac7fa

…lector, RTL docs

Rename frozenShadowStyles to frozenStartShadowStyles for symmetry

07b8561

PaloSP requested a review from amanmahajan7 July 6, 2026 16:02

amanmahajan7 reviewed Jul 6, 2026

View reviewed changes

Fix inset-inline-end for colSpanned end-frozen cells; stabilize scrol…

a313a43

…l-pin tests

PaloSP requested a review from amanmahajan7 July 8, 2026 09:05

Merge branch 'main' into feat/end-frozen-columns

9d10cce

amanmahajan7 approved these changes Jul 9, 2026

View reviewed changes

amanmahajan7 merged commit 3c9a765 into Comcast:main Jul 9, 2026
2 checks passed

	& > .rdg-cell-frozen:first-child::before,
	& > .rdg-cell-frozen-start:first-child::before,

	export const cellFrozenStart = css`
	export const cellFrozen = css`

	export const cellFrozenStart = css`
	export const cellFrozenBase = css`

	insetInlineEnd: column.frozen === 'end' ? `var(--rdg-frozen-end-${column.idx})` : undefined
	insetInlineEnd: column.frozen === 'end' ? `var(--rdg-frozen-end-${column.idx + colSpan - 1})` : undefined

Uh oh!

Conversation

PaloSP commented Apr 24, 2026

Uh oh!

CLAassistant commented Apr 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov-commenter commented Apr 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

amanmahajan7 left a comment

Choose a reason for hiding this comment

Uh oh!

amanmahajan7 Apr 24, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

amanmahajan7 Apr 24, 2026

Choose a reason for hiding this comment

Uh oh!

PaloSP commented Apr 24, 2026

Uh oh!

PaloSP commented May 13, 2026

Uh oh!

amanmahajan7 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

amanmahajan7 May 15, 2026

Choose a reason for hiding this comment

Uh oh!

PaloSP commented May 17, 2026

Uh oh!

amanmahajan7 commented May 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

yorikcv commented Jun 5, 2026

Uh oh!

luisfmsouza commented Jun 26, 2026

Uh oh!

amanmahajan7 commented Jun 26, 2026

Uh oh!

amanmahajan7 left a comment

Choose a reason for hiding this comment

Uh oh!

amanmahajan7 Jul 6, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

amanmahajan7 Jul 6, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

amanmahajan7 Jul 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

amanmahajan7 Jul 6, 2026

Choose a reason for hiding this comment

Uh oh!

PaloSP commented Jul 6, 2026

Uh oh!

amanmahajan7 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

PaloSP commented Jul 6, 2026

Uh oh!

amanmahajan7 left a comment

Choose a reason for hiding this comment

Uh oh!

CLAassistant commented Apr 24, 2026 •

edited

Loading

codecov-commenter commented Apr 24, 2026 •

edited

Loading

amanmahajan7 commented May 26, 2026 •

edited

Loading

amanmahajan7 Jul 6, 2026 •

edited

Loading