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

Copilot

Pull Request Overview

Adds full support for freezing columns on the right side in addition to the existing left‐side freeze functionality.

Expanded the freezeColumns prop from a single number to a union number | [left, right]
Updated nearly all core layout and render functions (getEffectiveColumns, walkColumns, blitting, clipping, bounds calculations, etc.) to handle both left and right sticky columns
Extended tests and documentation examples to cover the new right‐side freeze behavior

Reviewed Changes

Copilot reviewed 20 out of 20 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
packages/source/src/use-collapsing-groups.ts	Limit group span calculations to the scrollable central columns
packages/core/test/render-state-provider.test.ts	Updated `setWindow` calls to include the new `columnsLength` arg
packages/core/test/image-window-loader.test.ts	Extended loader tests for the added `columnsLength` parameter
packages/core/test/data-grid.test.tsx	Added UI test for freezing with both left and right columns
packages/core/test/data-editor.test.tsx	Added test covering visible‐region change including right freeze
packages/core/src/internal/scrolling-data-grid/scrolling-data-grid.tsx	Scrolling logic now uses left freeze count and ignores right side
packages/core/src/internal/data-grid/render/draw-grid-arg.ts	Expanded `freezeColumns` in `DrawGridArg` to accept `[left,right]`
packages/core/src/internal/data-grid/render/data-grid.render.rings.ts	Split highlight regions into left/center/right panes
packages/core/src/internal/data-grid/render/data-grid.render.walk.ts	Column walking now handles right‐side frozen columns
packages/core/src/internal/data-grid/render/data-grid-render.ts	Central render updated to support right‐side sticky columns
packages/core/src/internal/data-grid/render/data-grid-render.lines.ts	Grid line drawing now draws right‐side sticky boundaries
packages/core/src/internal/data-grid/render/data-grid-render.header.ts	Header clipping/hover now respects right‐side freeze
packages/core/src/internal/data-grid/render/data-grid-render.cells.ts	Cell draw logic updated for right‐side sticky widths
packages/core/src/internal/data-grid/render/data-grid-render.blit.ts	Blit logic adjusted to copy right sticky region as well
packages/core/src/internal/data-grid/render/data-grid-lib.ts	`useMappedColumns` now marks right‐side sticky positions
packages/core/src/internal/data-grid/image-window-loader-interface.ts	Loader interface now takes `freezeCols` as `number
packages/core/src/internal/data-grid/data-grid.tsx	`DataGridProps` and event logic updated for tuple freeze
packages/core/src/docs/examples/freeze-columns.stories.tsx	Story props split into `freezeLeftColumns`/`freezeRightColumns`
packages/core/src/data-editor/data-editor.tsx	`DataEditorImpl` computations now include right‐side freeze counts
packages/core/src/common/render-state-provider.ts	Window tracker now handles tuple freeze and track total columns

Comments suppressed due to low confidence (3)

packages/core/src/common/render-state-provider.ts:39

[nitpick] Consider renaming the class property freezeCols to freezeColumns to match the prop name and improve consistency across the codebase.

    public freezeCols: number | readonly [number, number] = 0;

packages/core/src/internal/data-grid/image-window-loader-interface.ts:11

[nitpick] Rename the freezeCols parameter in the setWindow interface to freezeColumns for consistency with the primary API.

    ): void;

packages/core/test/data-grid.test.tsx:396

Add targeted unit tests for getColumnIndexForX and getEffectiveColumns to validate both left-only and right-only freeze scenarios (e.g. [0, n], [n, 0]), including edge cases.

    test("Freeze column simple check with trailing", () => {

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

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

Copilot AI reviewed Jul 10, 2025

View reviewed changes

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Freeze right columns #1059

Freeze right columns #1059

MMihran commented Jun 22, 2025

Uh oh!

This comment was marked as outdated.

Uh oh!

citizensas Jul 1, 2025

Uh oh!

MMihran Jul 3, 2025

Uh oh!

MMihran commented Jul 3, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

BrianHung left a comment

Uh oh!

BrianHung Jul 12, 2025

Uh oh!

MMihran Aug 8, 2025

Uh oh!

BrianHung Jul 12, 2025

Uh oh!

MMihran Aug 8, 2025

Uh oh!

BrianHung Jul 12, 2025

Uh oh!

MMihran Aug 8, 2025

Uh oh!

Uh oh!

	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];

Freeze right columns #1059

Are you sure you want to change the base?

Freeze right columns #1059

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!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

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!

Uh oh!