Freeze right columns #1059

MMihran · 2025-06-22T13:33:17Z

This MR adds support for freezing columns on the right side.
It used draft MR #973 as a base, with major fixes and improvements:

Corrected column positioning calculations
Fixed hover states
Fixed scroll shadows
Added handling for column groupings

This addresses the right-side freeze column feature requested in multiple issues: #469, #522, #919, and #957.
The API remains backward compatible, following the proposal here by @jassmith:

interface DataEditorProps {
    // ...
    freezeColumns: number | [left: number, right: number];
}

citizensas · 2025-07-01T07:05:05Z

packages/core/src/internal/data-grid/data-grid.tsx

@@ -70,7 +70,7 @@ export interface DataGridProps {

    readonly accessibilityHeight: number;

-    readonly freezeColumns: number;
+    readonly freezeColumns: number | [left: number, right: number];


For a stricter type definition, I suggest using the readonly flag here.

Suggested change

readonly freezeColumns: number | [left: number, right: number];

readonly freezeColumns: number | readonly [left: number, right: number];

Added, thanks for the suggestion!

MMihran · 2025-07-03T14:40:59Z

Pushed a few updates and rebased with main.

Added a comment suggested by Copilot db618f6
Marked the freezeColumns tuple as readonly 2196947
While testing, we identified and an issue related to the scrollTo function, which is fixed f38bcec

cc: @citizensas

BrianHung

Overall, LGTM. Would update API.md and look at the possible off by one, but merge-able! Thanks 😎

BrianHung · 2025-07-12T19:43:27Z

packages/core/src/data-editor/data-editor.tsx

+                            frozenLeftWidth += columns[i].width;
+                        }
+                        let frozenRightWidth = 0;
+                        for (let i = columns.length - 1; i >= columns.length - 1 - freezeRightColumns; i--) {


Should this be i >= columns.length - freezeRightColumns? Possible off-by-one error.

Yep, changed, thanks for the catch!

BrianHung · 2025-07-12T19:52:18Z

packages/core/src/internal/data-grid/data-grid.tsx

+    const freezeLeftColumns = typeof freezeColumns === "number" ? freezeColumns : freezeColumns[0];
+    const freezeRightColumns = typeof freezeColumns === "number" ? 0 : freezeColumns[1];


Might be worth extracting into helper util if we use it so many times.

Done, thank you

BrianHung · 2025-07-12T19:54:56Z

packages/source/src/use-collapsing-groups.ts

    const gridSelection = gridSelectionIn ?? gridSelectionInner;

    const spans = React.useMemo(() => {
        const result: [number, number][] = [];
        let current: [number, number] = [-1, -1];
        let lastGroup: string | undefined;
-        for (let i = freezeColumns; i < columnsIn.length; i++) {
+        for (let i = freezeColumnsLeft as number; i < columnsIn.length - freezeColumnsRight; i++) {


Would cast as number above ^

Changed, thank you

…sRight

Copilot

Pull Request Overview

This PR adds support for freezing columns on the right side of the data grid. It extends the freezeColumns API to accept either a number (for backward compatibility) or a tuple [left: number, right: number] to support both left and right column freezing.

Introduces right-side column freezing functionality to complement existing left-side freezing
Updates rendering logic to handle positioning, clipping, and styling for right-frozen columns
Adds comprehensive test coverage for the new freeze behavior

Reviewed Changes

Copilot reviewed 21 out of 21 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
`packages/core/src/common/utils.tsx`	Adds utility function to normalize freeze column parameter
`packages/core/src/internal/data-grid/render/`	Updates rendering functions to handle right-frozen columns
`packages/core/src/internal/data-grid/data-grid.tsx`	Modifies main data grid component to support new freezing logic
`packages/core/src/data-editor/data-editor.tsx`	Updates data editor to handle right-frozen columns in various operations
Test files	Adds comprehensive test coverage for right column freezing

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-08-14T11:09:09Z

packages/core/src/internal/data-grid/render/data-grid-render.walk.ts

    cb: WalkColsCallback
 ): void {
    let x = 0;
    let clipX = 0; // this tracks the total width of sticky cols
    const drawY = totalHeaderHeight + translateY;
-    for (const c of effectiveCols) {
+    const clipXRight = freezeTrailingColumns === 0 ? 0 : effectiveCols.slice(-freezeTrailingColumns).reduce((acc, col) => acc + col.width, 0);


The slice(-freezeTrailingColumns).reduce() operation is called on every walkColumns invocation. Consider calculating this value once and passing it as a parameter to avoid repeated array operations.

Copilot · 2025-08-14T11:09:10Z

packages/core/src/internal/data-grid/render/data-grid-render.walk.ts

    cb: WalkGroupsCallback
 ): void {
    let x = 0;
    let clipX = 0;
-    for (let index = 0; index < effectiveCols.length; index++) {
+
+    const effectiveColsRight = freezeTrailingColumns === 0 ? [] : effectiveCols.slice(-freezeTrailingColumns);


Similar to the previous issue, the slice operation for right columns is repeated. This could be optimized by calculating once and reusing.

Copilot · 2025-08-14T11:09:10Z

packages/core/src/internal/data-grid/render/data-grid-render.lines.ts

@@ -332,6 +347,25 @@ export function drawGridLines(
        }
    }

+    width = Math.min(width, effectiveWidth);
+    let rightX = width + 0.5;


[nitpick] Mutating the width parameter could lead to confusion. Consider using a local variable with a descriptive name like 'clippedWidth' instead of overwriting the parameter.

Suggested change

let rightX = width + 0.5;

const clippedWidth = Math.min(width, effectiveWidth);

let rightX = clippedWidth + 0.5;

Copilot · 2025-08-14T11:09:10Z

packages/core/src/internal/data-grid/render/data-grid-render.walk.ts

+            groupHeaderHeight
+        );
+
+        width += w;


[nitpick] The width parameter is being mutated within the walkGroups function, which could cause confusion since width is typically expected to be read-only. Consider using a local variable to track position changes.

Suggested change

width += w;

currentWidth += w;

MMihran force-pushed the freeze-right-columns branch 2 times, most recently from 17d0bf2 to f378e2e Compare June 22, 2025 14:08

lukasmasuch requested a review from Copilot June 24, 2025 23:15

This comment was marked as outdated.

Sign in to view

citizensas reviewed Jul 1, 2025

View reviewed changes

MMihran force-pushed the freeze-right-columns branch from f378e2e to f38bcec Compare July 3, 2025 14:31

lukasmasuch requested a review from Copilot July 10, 2025 18:44

This comment was marked as outdated.

Sign in to view

BrianHung approved these changes Jul 12, 2025

View reviewed changes

rahulyadav5524 and others added 11 commits August 8, 2025 12:11

Update release.js.yml

0f833b4

Added feature to right side freeze columnj

1090074

revert workflow file

002d531

fixed selection issue and highlight fixes

7167e46

freeze right columns: calculations, hovers, groupings and shadows

c7a826c

added an inline comment explaining freezeColumnsLeft and freezeColumn…

5ad6d89

…sRight

added readonly flag to freezeColumns tuple prop

5d28364

fix scrollTo issue not finding a column

1026249

fix image loader doesn't take into account freezeColumns new api

fd360fb

fix vertical lines calculation issue

387ad51

add utility function to extract left and right freeze, minor fixes

67a8c55

MMihran force-pushed the freeze-right-columns branch from 0529640 to 67a8c55 Compare August 8, 2025 08:19

lukasmasuch requested a review from Copilot August 14, 2025 11:07

Copilot AI reviewed Aug 14, 2025

View reviewed changes

	readonly freezeColumns: number \| [left: number, right: number];
	readonly freezeColumns: number \| readonly [left: number, right: number];

		const freezeLeftColumns = typeof freezeColumns === "number" ? freezeColumns : freezeColumns[0];
		const freezeRightColumns = typeof freezeColumns === "number" ? 0 : freezeColumns[1];

	let rightX = width + 0.5;
	const clippedWidth = Math.min(width, effectiveWidth);
	let rightX = clippedWidth + 0.5;

Freeze right columns #1059

Are you sure you want to change the base?

Freeze right columns #1059

Uh oh!

Conversation

MMihran commented Jun 22, 2025

Uh oh!

This comment was marked as outdated.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MMihran commented Jul 3, 2025

Uh oh!

This comment was marked as outdated.

Uh oh!

BrianHung 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!

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Aug 14, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 14, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 14, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 14, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!