freeze right columns: calculations, hovers, groupings and shadows

Author: Mihran Margaryan

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

@@ -480,7 +480,7 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
                 translateX,
                 translateY,
                 rows,
-                freezeLeftColumns,
+                freezeColumns,
                 freezeTrailingRows,
                 mappedColumns,
                 rowHeight
@@ -508,7 +508,7 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
             translateX,
             translateY,
             rows,
-            freezeLeftColumns,
+            freezeColumns,
             freezeTrailingRows,
             mappedColumns,
             rowHeight,
@@ -1907,12 +1907,27 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
             ? 1
             : clamp(-translateX / 100, 0, 1);
 
+    let translateXRight = 0;
+
+    if (eventTargetRef?.current) {
+        translateXRight = eventTargetRef?.current?.scrollLeft + width - eventTargetRef?.current?.scrollWidth;
+    }
+
     const opacityXRight =
         freezeRightColumns === 0 || !fixedShadowX
             ? 0
-            : cellXOffset + width < columns.length - freezeRightColumns
+            : cellXOffset +
+                  getEffectiveColumns(
+                      mappedColumns,
+                      cellXOffset,
+                      width,
+                      freezeColumns,
+                      dragAndDropState,
+                      translateX
+                  ).filter(column => !column.sticky).length <
+              columns.length - freezeRightColumns
             ? 1
-            : clamp((translateX - (columns.length - freezeRightColumns - width) * 32) / 100, 0, 1);
+            : clamp(-translateXRight / 100, 0, 1);
 
     const absoluteOffsetY = -cellYOffset * 32 + translateY;
     const opacityY = !fixedShadowY ? 0 : clamp(-absoluteOffsetY / 100, 0, 1);

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

@@ -243,6 +243,19 @@ export function getEffectiveColumns(
             width -= c.width;
         }
     }
+
+    const stickyRight: MappedGridColumn[] = [];
+
+    for (let i = mappedCols.length - freezeRightColumns; i < mappedCols.length; i++) {
+        stickyRight.push(mappedCols[i]);
+    }
+
+    if (stickyRight.length > 0) {
+        for (const c of stickyRight) {
+            width -= c.width;
+        }
+    }
+
     let endIndex = cellXOffset;
     let curX = tx ?? 0;
 
@@ -258,9 +271,7 @@ export function getEffectiveColumns(
         }
     }
 
-    for (let i = mappedCols.length - freezeRightColumns; i < mappedCols.length; i++) {
-        sticky.push(mappedCols[i]);
-    }
+    sticky.push(...stickyRight);
 
     return sticky;
 }

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

@@ -132,12 +132,12 @@ export function drawCells(
         translateY,
         totalHeaderHeight,
         freezeTrailingColumns,
-        (c, drawX, colDrawStartY, clipX, startRow) => {
+        (c, drawX, colDrawStartY, clipX, clipXRight, startRow) => {
             const diff = Math.max(0, clipX - drawX);
 
             const colDrawX = drawX + diff;
             const colDrawY = totalHeaderHeight + 1;
-            const colWidth = c.width - diff;
+            const colWidth = c.stickyPosition === "right" ? c.width - diff : Math.min(c.width - diff, width - drawX - clipXRight);
             const colHeight = height - totalHeaderHeight - 1;
             if (drawRegions.length > 0) {
                 let found = false;
@@ -555,11 +555,11 @@ export function drawCell(
             partialPrepResult === undefined
                 ? undefined
                 : {
-                      deprep: partialPrepResult?.deprep,
-                      fillStyle: partialPrepResult?.fillStyle,
-                      font: partialPrepResult?.font,
-                      renderer: r,
-                  };
+                    deprep: partialPrepResult?.deprep,
+                    fillStyle: partialPrepResult?.fillStyle,
+                    font: partialPrepResult?.font,
+                    renderer: r,
+                };
     }
 
     if (needsAnim || animationFrameRequested) enqueue?.(allocatedItem);