Added feature to right side freeze columnj

Author: rahulyadav5524

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

@@ -913,6 +913,9 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
     const maxColumnWidth = Math.max(maxColumnWidthIn, minColumnWidth);
     const maxColumnAutoWidth = Math.max(maxColumnAutoWidthIn ?? maxColumnWidth, minColumnWidth);
 
+    const freezeLeftColumns = typeof freezeColumns === "number" ? freezeColumns: freezeColumns[0];
+    const freezeRightColumns = typeof freezeColumns === "number" ? 0 : freezeColumns[1];
+
     const docStyle = React.useMemo(() => {
         if (typeof window === "undefined") return { fontSize: "16px" };
         return window.getComputedStyle(document.documentElement);
@@ -1563,9 +1566,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 = mangledCols.length - 1; i >= mangledCols.length - freezeRightColumns; i--) {
+                            frozenRightWidth += columns[i].width;
                         }
                         let trailingRowHeight = 0;
                         const freezeTrailingRowsEffective = freezeTrailingRows + (lastRowSticky ? 1 : 0);
@@ -1578,8 +1585,8 @@ 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;
 
@@ -1623,7 +1630,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" ||
@@ -1654,7 +1665,9 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
             rowMarkerWidth,
             scrollRef,
             totalHeaderHeight,
-            freezeColumns,
+            freezeLeftColumns,
+            freezeRightColumns,
+            mangledCols.length,
             columns,
             mangledRows,
             lastRowSticky,
@@ -2570,18 +2583,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,
@@ -2590,11 +2614,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,
                     });
                 }
@@ -2609,7 +2642,7 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
                 ty,
                 extras: {
                     selected,
-                    freezeRegion,
+                    freezeRegion: freezeLeftRegion,
                     freezeRegions,
                 },
             };
@@ -2623,7 +2656,9 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
             rowMarkerOffset,
             showTrailingBlankRow,
             rows,
-            freezeColumns,
+            freezeLeftColumns,
+            freezeRightColumns,
+            columns.length,
             freezeTrailingRows,
             setVisibleRegion,
             onVisibleRegionChanged,
@@ -3965,7 +4000,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,
@@ -4233,7 +4268,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,
 };