Freeze right columns

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

@@ -35,33 +35,42 @@ export abstract class WindowingTrackerBase {
         height: 0,
     };
 
-    public freezeCols: number = 0;
+    public columnsLength: number = 0;
+    public freezeCols: number | readonly [number, number] = 0;
     public freezeRows: number[] = [];
 
     protected isInWindow = (packed: number) => {
+        const freezeColumnsLeft = typeof this.freezeCols === "number" ? this.freezeCols : this.freezeCols[0];
+        const freezeColumnsRight = typeof this.freezeCols === "number" ? 0 : this.freezeCols[1];
         const col = unpackCol(packed);
         const row = unpackRow(packed);
         const w = this.visibleWindow;
-        const colInWindow = (col >= w.x && col <= w.x + w.width) || col < this.freezeCols;
+        const colInWindow =
+            (col >= w.x && col <= w.x + w.width) ||
+            col < freezeColumnsLeft ||
+            col > this.columnsLength - freezeColumnsRight - 1;
+
         const rowInWindow = (row >= w.y && row <= w.y + w.height) || this.freezeRows.includes(row);
         return colInWindow && rowInWindow;
     };
 
     protected abstract clearOutOfWindow: () => void;
 
-    public setWindow(newWindow: Rectangle, freezeCols: number, freezeRows: number[]): void {
+    public setWindow(newWindow: Rectangle, freezeCols: number, freezeRows: number[], columnsLength: number): void {
         if (
             this.visibleWindow.x === newWindow.x &&
             this.visibleWindow.y === newWindow.y &&
             this.visibleWindow.width === newWindow.width &&
             this.visibleWindow.height === newWindow.height &&
             this.freezeCols === freezeCols &&
+            this.columnsLength === columnsLength &&
             deepEqual(this.freezeRows, freezeRows)
         )
             return;
         this.visibleWindow = newWindow;
         this.freezeCols = freezeCols;
         this.freezeRows = freezeRows;
+        this.columnsLength = columnsLength;
         this.clearOutOfWindow();
     }
 }

packages/core/src/common/utils.tsx

@@ -282,3 +282,10 @@ export function useDeepMemo<T>(value: T): T {
 
     return ref.current;
 }
+
+export function normalizeFreezeColumns(freezeColumns: number | readonly [number, number]): readonly [number, number] {
+    const freezeLeftColumns = typeof freezeColumns === "number" ? freezeColumns : freezeColumns[0];
+    const freezeRightColumns = typeof freezeColumns === "number" ? 0 : freezeColumns[1];
+
+    return [freezeLeftColumns, freezeRightColumns];
+}

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

@@ -44,7 +44,7 @@ import {
     mergeAndRealizeTheme,
 } from "../common/styles.js";
 import type { DataGridRef } from "../internal/data-grid/data-grid.js";
-import { getScrollBarWidth, useEventListener, whenDefined } from "../common/utils.js";
+import { getScrollBarWidth, useEventListener, normalizeFreezeColumns, whenDefined } from "../common/utils.js";
 import {
     isGroupEqual,
     itemsAreEqual,
@@ -911,6 +911,8 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
     const maxColumnWidth = Math.max(maxColumnWidthIn, minColumnWidth);
     const maxColumnAutoWidth = Math.max(maxColumnAutoWidthIn ?? maxColumnWidth, minColumnWidth);
 
+    const [freezeLeftColumns, freezeRightColumns] = normalizeFreezeColumns(freezeColumns);
+
     const docStyle = React.useMemo(() => {
         if (typeof window === "undefined") return { fontSize: "16px" };
         return window.getComputedStyle(document.documentElement);
@@ -1318,7 +1320,7 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
                 //If the grid is empty, we will return text
                 const isFirst = col === rowMarkerOffset;
 
-                const maybeFirstColumnHint = isFirst ? trailingRowOptions?.hint ?? "" : "";
+                const maybeFirstColumnHint = isFirst ? (trailingRowOptions?.hint ?? "") : "";
                 const c = mangledColsRef.current[col];
 
                 if (c?.trailingRowOptions?.disabled === true) {
@@ -1559,9 +1561,13 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
                             height: targetRect.height + 2 * paddingY,
                         };
 
-                        let frozenWidth = 0;
-                        for (let i = 0; i < freezeColumns; i++) {
-                            frozenWidth += columns[i].width;
+                        let frozenLeftWidth = 0;
+                        for (let i = 0; i < freezeLeftColumns; i++) {
+                            frozenLeftWidth += columns[i].width;
+                        }
+                        let frozenRightWidth = 0;
+                        for (let i = columns.length - 1; i >= columns.length - freezeRightColumns; i--) {
+                            frozenRightWidth += columns[i].width;
                         }
                         let trailingRowHeight = 0;
                         const freezeTrailingRowsEffective = freezeTrailingRows + (lastRowSticky ? 1 : 0);
@@ -1574,8 +1580,9 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
                         }
 
                         // scrollBounds is already scaled
-                        let sLeft = frozenWidth * scale + scrollBounds.left + rowMarkerOffset * rowMarkerWidth * scale;
-                        let sRight = scrollBounds.right;
+                        let sLeft =
+                            frozenLeftWidth * scale + scrollBounds.left + rowMarkerOffset * rowMarkerWidth * scale;
+                        let sRight = scrollBounds.right - frozenRightWidth * scale;
                         let sTop = scrollBounds.top + totalHeaderHeight * scale;
                         let sBottom = scrollBounds.bottom - trailingRowHeight * scale;
 
@@ -1619,7 +1626,11 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
                             scrollY = bounds.y + bounds.height - sBottom;
                         }
 
-                        if (dir === "vertical" || (typeof col === "number" && col < freezeColumns)) {
+                        if (
+                            dir === "vertical" ||
+                            (typeof col === "number" &&
+                                (col < freezeLeftColumns || col >= mangledCols.length - freezeRightColumns))
+                        ) {
                             scrollX = 0;
                         } else if (
                             dir === "horizontal" ||
@@ -1650,7 +1661,9 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
             rowMarkerWidth,
             scrollRef,
             totalHeaderHeight,
-            freezeColumns,
+            freezeLeftColumns,
+            freezeRightColumns,
+            mangledCols.length,
             columns,
             mangledRows,
             lastRowSticky,
@@ -2557,18 +2570,29 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
                 selected = [selected[0] - rowMarkerOffset, selected[1]];
             }
 
-            const freezeRegion =
-                freezeColumns === 0
+            const freezeLeftRegion =
+                freezeLeftColumns === 0
                     ? undefined
                     : {
                           x: 0,
                           y: region.y,
-                          width: freezeColumns,
+                          width: freezeLeftColumns,
+                          height: region.height,
+                      };
+
+            const freezeRightRegion =
+                freezeRightColumns === 0
+                    ? undefined
+                    : {
+                          x: columns.length - freezeRightColumns,
+                          y: region.y,
+                          width: freezeRightColumns,
                           height: region.height,
                       };
 
             const freezeRegions: Rectangle[] = [];
-            if (freezeRegion !== undefined) freezeRegions.push(freezeRegion);
+            if (freezeLeftRegion !== undefined) freezeRegions.push(freezeLeftRegion);
+            if (freezeRightRegion !== undefined) freezeRegions.push(freezeRightRegion);
             if (freezeTrailingRows > 0) {
                 freezeRegions.push({
                     x: region.x - rowMarkerOffset,
@@ -2577,11 +2601,20 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
                     height: freezeTrailingRows,
                 });
 
-                if (freezeColumns > 0) {
+                if (freezeLeftColumns > 0) {
                     freezeRegions.push({
                         x: 0,
                         y: rows - freezeTrailingRows,
-                        width: freezeColumns,
+                        width: freezeLeftColumns,
+                        height: freezeTrailingRows,
+                    });
+                }
+
+                if (freezeRightColumns > 0) {
+                    freezeRegions.push({
+                        x: columns.length - freezeRightColumns,
+                        y: rows - freezeTrailingRows,
+                        width: freezeRightColumns,
                         height: freezeTrailingRows,
                     });
                 }
@@ -2596,7 +2629,7 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
                 ty,
                 extras: {
                     selected,
-                    freezeRegion,
+                    freezeRegion: freezeLeftRegion,
                     freezeRegions,
                 },
             };
@@ -2610,7 +2643,9 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
             rowMarkerOffset,
             showTrailingBlankRow,
             rows,
-            freezeColumns,
+            freezeLeftColumns,
+            freezeRightColumns,
+            columns.length,
             freezeTrailingRows,
             setVisibleRegion,
             onVisibleRegionChanged,
@@ -3543,7 +3578,7 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
                 formatted?: string | string[]
             ): EditListItem | undefined {
                 const stringifiedRawValue =
-                    typeof rawValue === "object" ? rawValue?.join("\n") ?? "" : rawValue?.toString() ?? "";
+                    typeof rawValue === "object" ? (rawValue?.join("\n") ?? "") : (rawValue?.toString() ?? "");
 
                 if (!isInnerOnlyCell(inner) && isReadWriteCell(inner) && inner.readonly !== true) {
                     const coerced = coercePasteValue?.(stringifiedRawValue, inner);
@@ -3921,7 +3956,7 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
         (col: number) => {
             return typeof verticalBorder === "boolean"
                 ? verticalBorder
-                : verticalBorder?.(col - rowMarkerOffset) ?? true;
+                : (verticalBorder?.(col - rowMarkerOffset) ?? true);
         },
         [rowMarkerOffset, verticalBorder]
     );
@@ -3944,7 +3979,7 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
         );
     }, [onGroupHeaderRenamed, renameGroup]);
 
-    const mangledFreezeColumns = Math.min(mangledCols.length, freezeColumns + (hasRowMarkers ? 1 : 0));
+    const mangledFreezeColumns = Math.min(mangledCols.length, freezeLeftColumns + (hasRowMarkers ? 1 : 0));
 
     React.useImperativeHandle(
         forwardedRef,
@@ -4212,7 +4247,7 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
                     onColumnProposeMove={onColumnProposeMoveImpl}
                     drawCell={drawCell}
                     disabledRows={disabledRows}
-                    freezeColumns={mangledFreezeColumns}
+                    freezeColumns={[mangledFreezeColumns, freezeRightColumns]}
                     lockColumns={rowMarkerOffset}
                     firstColAccessible={rowMarkerOffset === 0}
                     getCellContent={getMangledCellContent}

packages/core/src/docs/examples/freeze-columns.stories.tsx

@@ -30,14 +30,14 @@ export default {
     ],
 };
 
-export const FreezeColumns: React.VFC<any> = (p: { freezeColumns: number }) => {
+export const FreezeColumns: React.VFC<any> = (p: { freezeLeftColumns: number, freezeRightColumns: number }) => {
     const { cols, getCellContent } = useMockDataGenerator(100);
 
     return (
         <DataEditor
             {...defaultProps}
             rowMarkers="both"
-            freezeColumns={p.freezeColumns}
+            freezeColumns={[p.freezeLeftColumns, p.freezeRightColumns]}
             getCellContent={getCellContent}
             columns={cols}
             verticalBorder={false}
@@ -46,7 +46,14 @@ export const FreezeColumns: React.VFC<any> = (p: { freezeColumns: number }) => {
     );
 };
 (FreezeColumns as any).argTypes = {
-    freezeColumns: {
+    freezeLeftColumns: {
+        control: {
+            type: "range",
+            min: 0,
+            max: 10,
+        },
+    },
+    freezeRightColumns: {
         control: {
             type: "range",
             min: 0,
@@ -55,5 +62,6 @@ export const FreezeColumns: React.VFC<any> = (p: { freezeColumns: number }) => {
     },
 };
 (FreezeColumns as any).args = {
-    freezeColumns: 1,
+    freezeLeftColumns: 1,
+    freezeRightColumns: 1,
 };