Freeze right columns by MMihran · Pull Request #1059 · glideapps/glide-data-grid

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

    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

        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

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

    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.

I removed the slice call. Since freezeRightColumns is usually a small number and doesn’t grow large, I kept the calculation here.

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

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

    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.

I removed the slice call. Since freezeRightColumns is usually a small number and doesn’t grow large, I kept the calculation here.

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

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

    }

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

…sRight

Fix test to perform click with the pointer events.

MMihran · 2025-12-18T09:13:34Z

Hi @BrianHung @lukasmasuch, hope you're doing well.

Apologies for missing your comment about updating API.md. I've just rebased the branch and pushed the updated API docs.

Let me know if there's anything else you'd like me to adjust, happy to help move this forward when you have a moment!

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

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

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

rahulyadav5524 and others added 14 commits December 18, 2025 12:40

Update release.js.yml

321aeb1

Added feature to right side freeze columnj

970e725

revert workflow file

dbc629d

fixed selection issue and highlight fixes

73a7e6c

freeze right columns: calculations, hovers, groupings and shadows

fb2abf5

added an inline comment explaining freezeColumnsLeft and freezeColumn…

e245c1a

…sRight

added readonly flag to freezeColumns tuple prop

9033b8a

fix scrollTo issue not finding a column

9a65fc0

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

c65fe42

fix vertical lines calculation issue

e89d0f8

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

9d03654

apply minor code review impovements

2cc2935

fix: ensure freeze columns cannot exceed total column count

388eafc

Fix test to perform click with the pointer events.

update API.md with new freezeColumns api

67196ea

MMihran force-pushed the freeze-right-columns branch from 48dadb9 to 67196ea Compare December 18, 2025 08:46

	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;

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!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 14, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 14, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 14, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MMihran commented Dec 18, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants