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.53%. Comparing base (766a94e) to head (e9b24ff).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #4034      +/-   ##
==========================================
+ Coverage   97.48%   97.53%   +0.05%     
==========================================
  Files          38       38              
  Lines        1552     1584      +32     
  Branches      498      511      +13     
==========================================
+ Hits         1513     1545      +32     
  Misses         39       39

Files with missing lines	Coverage Δ
src/DataGrid.tsx	`98.86% <100.00%> (+0.01%)`	⬆️
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/index.ts	`92.30% <100.00%> (+1.39%)`	⬆️
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:30:55Z


 export const cellFrozenClassname = `rdg-cell-frozen ${cellFrozen}`;

+export const cellFrozenEnd = css`


We can reuse the cellFrozen class

amanmahajan7 · 2026-04-24T18:33:11Z

 `;

+// Add shadow before the first end-frozen cell (mirror of the start shadow)
+export const frozenColumnShadowEndClassname = css`


Let's extract the common styles in frozenColumnShadowClassname and we can add frozenColumnShadowStart/EndClassname

amanmahajan7 · 2026-04-24T18:33:38Z

 import { css } from 'ecij';

-import { cellFrozen } from './cell';
+import { cellFrozen, cellFrozenEnd } from './cell';


We should rename it to be consistent

Suggested change

import { cellFrozen, cellFrozenEnd } from './cell';

import { cellFrozenStart, cellFrozenEnd } from './cell';

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-13T15:07:43Z

+  const {
+    columns,
+    colSpanColumns,
+    lastFrozenColumnIndex,


Suggested change

lastFrozenColumnIndex,

lastStartFrozenColumnIndex,

I think we can rename variables

amanmahajan7 · 2026-05-15T17:17:13Z

-      }
-      if (frozenB) return 1;
-
-      // TODO: sort columns to keep them grouped if they have a parent


Can keep this TODO comment

amanmahajan7 · 2026-05-15T17:18:15Z

-  }, [getColumnWidth, columns, lastFrozenColumnIndex]);
+    if (firstEndFrozenColumnIndex !== -1) {
+      const lastColumn = columns[columns.length - 1];
+      const lastMetric = columnMetrics.get(lastColumn)!;


Suggested change

const lastMetric = columnMetrics.get(lastColumn)!;

const lastColumnMetric = columnMetrics.get(lastColumn)!;

wdyt?

amanmahajan7 · 2026-05-15T17:18:33Z

+      const lastColumn = columns[columns.length - 1];
+      const lastMetric = columnMetrics.get(lastColumn)!;
+      const gridEnd = lastMetric.left + lastMetric.width;
+      const firstEndMetric = columnMetrics.get(columns[firstEndFrozenColumnIndex])!;


Suggested change

const firstEndMetric = columnMetrics.get(columns[firstEndFrozenColumnIndex])!;

const firstEndFrozenColumnMetric = columnMetrics.get(columns[firstEndFrozenColumnIndex])!;

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.

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

Open

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 from 637e2f9 to 8c52472 Compare May 17, 2026 09:57

PaloSP added 3 commits May 17, 2026 12:03

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

8c47abd

Address review feedback: ColumnFrozen type + CSS dedup

e02559d

Address review feedback: rename Frozen → StartFrozen, restore TODO

e9b24ff

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


		export const cellFrozenClassname = `rdg-cell-frozen ${cellFrozen}`;

		export const cellFrozenEnd = css`

	import { cellFrozen, cellFrozenEnd } from './cell';
	import { cellFrozenStart, cellFrozenEnd } from './cell';

	const lastMetric = columnMetrics.get(lastColumn)!;
	const lastColumnMetric = columnMetrics.get(lastColumn)!;

	const firstEndMetric = columnMetrics.get(columns[firstEndFrozenColumnIndex])!;
	const firstEndFrozenColumnMetric = columnMetrics.get(columns[firstEndFrozenColumnIndex])!;

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

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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

PaloSP commented May 17, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

CLAassistant commented Apr 24, 2026 •

edited

Loading

codecov-commenter commented Apr 24, 2026 •

edited

Loading