port-changes - frozen columns

package.json

@@ -1,17 +1,15 @@
 {
-  "name": "react-data-grid",
-  "version": "7.0.0-beta.47",
+  "name": "@port-labs/port-react-data-grid",
+  "version": "1.0.2",
+  "description": "Forked version of @adazzle/react-data-grid with custom changes by Port Labs",
   "license": "MIT",
-  "description": "Feature-rich and customizable data grid React component",
   "keywords": [
     "react",
     "data grid"
   ],
   "repository": {
-    "type": "git",
-    "url": "git+https://github.com/adazzle/react-data-grid.git"
+    "type": "git"
   },
-  "bugs": "https://github.com/adazzle/react-data-grid/issues",
   "type": "module",
   "exports": {
     "./lib/styles.css": "./lib/styles.css",

src/DataGrid.tsx

@@ -324,7 +324,9 @@ function DataGrid<R, SR, K extends Key>(
     colOverscanEndIdx,
     templateColumns,
     layoutCssVars,
-    totalFrozenColumnWidth
+    totalFrozenColumnWidth,
+    rightFrozenColumnCount,
+    totalRightFrozenColumnWidth
   } = useCalculatedColumns({
     rawColumns,
     defaultColumnOptions,
@@ -424,7 +426,8 @@ function DataGrid<R, SR, K extends Key>(
     rowOverscanEndIdx,
     rows,
     topSummaryRows,
-    bottomSummaryRows
+    bottomSummaryRows,
+    rightFrozenColumnCount
   });
 
   const { gridTemplateColumns, handleColumnResize } = useColumnWidths(
@@ -476,7 +479,10 @@ function DataGrid<R, SR, K extends Key>(
     const cell = getCellToScroll(gridRef.current!);
     if (cell === null) return;
 
-    scrollIntoView(cell);
+    const isFrozen = cell.classList.contains('rdg-cell-frozen');
+    if(!isFrozen) {
+      scrollIntoView(cell);
+    }
     // Focus cell content when available instead of the cell itself
     const elementToFocus = cell.querySelector<Element & HTMLOrSVGElement>('[tabindex="0"]') ?? cell;
     elementToFocus.focus({ preventScroll: true });
@@ -1078,7 +1084,6 @@ function DataGrid<R, SR, K extends Key>(
 
   const isGroupRowFocused =
     selectedPosition.idx === -1 && selectedPosition.rowIdx !== minRowIdx - 1;
-
   return (
     // biome-ignore lint/a11y/useValidAriaProps: aria-description is a valid prop
     <div
@@ -1105,6 +1110,10 @@ function DataGrid<R, SR, K extends Key>(
             selectedPosition.idx > lastFrozenColumnIndex || scrollToPosition?.idx !== undefined
               ? `${totalFrozenColumnWidth}px`
               : undefined,
+          scrollPaddingInlineEnd:
+            rightFrozenColumnCount < maxRowIdx || scrollToPosition?.idx !== undefined
+              ? `${totalRightFrozenColumnWidth}px`
+              : undefined,
           scrollPaddingBlock:
             isRowIdxWithinViewportBounds(selectedPosition.rowIdx) ||
             scrollToPosition?.rowIdx !== undefined

src/HeaderCell.tsx

@@ -35,7 +35,12 @@ export const resizeHandleClassname = css`
     inset-block-start: 0;
     inset-inline-end: 0;
     inset-block-end: 0;
-    inline-size: 10px;
+    inline-size: 4px;
+
+    &:hover {
+      background: var(--rdg-selection-color);
+      padding: 4px 0;
+    }
   }
 `;
 

src/hooks/useCalculatedColumns.ts

@@ -52,13 +52,21 @@ export function useCalculatedColumns<R, SR>({
   const defaultResizable = defaultColumnOptions?.resizable ?? false;
   const defaultDraggable = defaultColumnOptions?.draggable ?? false;
 
-  const { columns, colSpanColumns, lastFrozenColumnIndex, headerRowsCount } = useMemo((): {
+  const {
+    columns,
+    colSpanColumns,
+    lastFrozenColumnIndex,
+    rightFrozenColumnCount,
+    headerRowsCount
+  } = useMemo((): {
     readonly columns: readonly CalculatedColumn<R, SR>[];
     readonly colSpanColumns: readonly CalculatedColumn<R, SR>[];
     readonly lastFrozenColumnIndex: number;
+    readonly rightFrozenColumnCount: number;
     readonly headerRowsCount: number;
   } => {
     let lastFrozenColumnIndex = -1;
+    let rightFrozenColumnCount = 0;
     let headerRowsCount = 1;
     const columns: MutableCalculatedColumn<R, SR>[] = [];
 
@@ -85,13 +93,15 @@ export function useCalculatedColumns<R, SR>({
         }
 
         const frozen = rawColumn.frozen ?? false;
+        const rightFrozen = rawColumn.rightFrozen ?? false;
 
         const column: MutableCalculatedColumn<R, SR> = {
           ...rawColumn,
           parent,
           idx: 0,
           level: 0,
           frozen,
+          rightFrozen,
           width: rawColumn.width ?? defaultWidth,
           minWidth: rawColumn.minWidth ?? defaultMinWidth,
           maxWidth: rawColumn.maxWidth ?? defaultMaxWidth,
@@ -107,29 +117,45 @@ export function useCalculatedColumns<R, SR>({
           lastFrozenColumnIndex++;
         }
 
+        if (rightFrozen) {
+          rightFrozenColumnCount++;
+        }
+
         if (level > headerRowsCount) {
           headerRowsCount = level;
         }
       }
     }
 
-    columns.sort(({ key: aKey, frozen: frozenA }, { key: bKey, frozen: frozenB }) => {
-      // Sort select column first:
-      if (aKey === SELECT_COLUMN_KEY) return -1;
-      if (bKey === SELECT_COLUMN_KEY) return 1;
+    columns.sort(
+      (
+        { key: aKey, frozen: frozenA, rightFrozen: rightFrozenA },
+        { key: bKey, frozen: frozenB, rightFrozen: rightFrozenB }
+      ) => {
+        // Sort select column first:
+        if (aKey === SELECT_COLUMN_KEY) return -1;
+        if (bKey === SELECT_COLUMN_KEY) return 1;
+
+        // Sort frozen columns second:
+        if (frozenA) {
+          if (frozenB) return 0;
+          return -1;
+        }
+        if (frozenB) return 1;
 
-      // Sort frozen columns second:
-      if (frozenA) {
-        if (frozenB) return 0;
-        return -1;
-      }
-      if (frozenB) return 1;
+        // Sort right frozen columns second:
+        if (rightFrozenA) {
+          if (rightFrozenB) return 0;
+          return 1;
+        }
+        if (rightFrozenB) return -1;
 
-      // TODO: sort columns to keep them grouped if they have a parent
+        // TODO: sort columns to keep them grouped if they have a parent
 
-      // Sort other columns last:
-      return 0;
-    });
+        // Sort other columns last:
+        return 0;
+      }
+    );
 
     const colSpanColumns: CalculatedColumn<R, SR>[] = [];
     columns.forEach((column, idx) => {
@@ -145,6 +171,7 @@ export function useCalculatedColumns<R, SR>({
       columns,
       colSpanColumns,
       lastFrozenColumnIndex,
+      rightFrozenColumnCount,
       headerRowsCount
     };
   }, [
@@ -158,15 +185,23 @@ export function useCalculatedColumns<R, SR>({
     defaultDraggable
   ]);
 
-  const { templateColumns, layoutCssVars, totalFrozenColumnWidth, columnMetrics } = useMemo((): {
+  const {
+    templateColumns,
+    layoutCssVars,
+    totalFrozenColumnWidth,
+    totalRightFrozenColumnWidth,
+    columnMetrics
+  } = useMemo((): {
     templateColumns: readonly string[];
     layoutCssVars: Readonly<Record<string, string>>;
     totalFrozenColumnWidth: number;
+    totalRightFrozenColumnWidth: number;
     columnMetrics: ReadonlyMap<CalculatedColumn<R, SR>, ColumnMetric>;
   } => {
     const columnMetrics = new Map<CalculatedColumn<R, SR>, ColumnMetric>();
     let left = 0;
     let totalFrozenColumnWidth = 0;
+    let totalRightFrozenColumnWidth = 0;
     const templateColumns: string[] = [];
 
     for (const column of columns) {
@@ -191,24 +226,42 @@ export function useCalculatedColumns<R, SR>({
 
     const layoutCssVars: Record<string, string> = {};
 
+    if (rightFrozenColumnCount !== 0) {
+      let rightEnd = 0;
+      for (let i = columns.length - 1; i >= columns.length - rightFrozenColumnCount; i--) {
+        const column = columns[i];
+        const columnMetric = columnMetrics.get(column)!;
+        totalRightFrozenColumnWidth += columnMetric.width;
+        layoutCssVars[`--rdg-frozen-right-${column.idx}`] = `${rightEnd}px`;
+        rightEnd += columnMetric.width;
+      }
+    }
+
     for (let i = 0; i <= lastFrozenColumnIndex; i++) {
       const column = columns[i];
       layoutCssVars[`--rdg-frozen-left-${column.idx}`] = `${columnMetrics.get(column)!.left}px`;
     }
 
-    return { templateColumns, layoutCssVars, totalFrozenColumnWidth, columnMetrics };
-  }, [getColumnWidth, columns, lastFrozenColumnIndex]);
+    return {
+      templateColumns,
+      layoutCssVars,
+      totalFrozenColumnWidth,
+      totalRightFrozenColumnWidth,
+      columnMetrics
+    };
+  }, [getColumnWidth, columns, lastFrozenColumnIndex, rightFrozenColumnCount]);
 
   const [colOverscanStartIdx, colOverscanEndIdx] = useMemo((): [number, number] => {
     if (!enableVirtualization) {
       return [0, columns.length - 1];
     }
     // get the viewport's left side and right side positions for non-frozen columns
     const viewportLeft = scrollLeft + totalFrozenColumnWidth;
-    const viewportRight = scrollLeft + viewportWidth;
+    const viewportRight = scrollLeft + viewportWidth - totalRightFrozenColumnWidth;
     // get first and last non-frozen column indexes
     const lastColIdx = columns.length - 1;
     const firstUnfrozenColumnIdx = min(lastFrozenColumnIndex + 1, lastColIdx);
+    const lastUnfrozonColumnIdx = min(columns.length - rightFrozenColumnCount - 1, lastColIdx);
 
     // skip rendering non-frozen columns if the frozen columns cover the entire viewport
     if (viewportLeft >= viewportRight) {
@@ -217,7 +270,7 @@ export function useCalculatedColumns<R, SR>({
 
     // get the first visible non-frozen column index
     let colVisibleStartIdx = firstUnfrozenColumnIdx;
-    while (colVisibleStartIdx < lastColIdx) {
+    while (colVisibleStartIdx < lastUnfrozonColumnIdx) {
       const { left, width } = columnMetrics.get(columns[colVisibleStartIdx])!;
       // if the right side of the columnn is beyond the left side of the available viewport,
       // then it is the first column that's at least partially visible
@@ -229,7 +282,7 @@ export function useCalculatedColumns<R, SR>({
 
     // get the last visible non-frozen column index
     let colVisibleEndIdx = colVisibleStartIdx;
-    while (colVisibleEndIdx < lastColIdx) {
+    while (colVisibleEndIdx < lastUnfrozonColumnIdx) {
       const { left, width } = columnMetrics.get(columns[colVisibleEndIdx])!;
       // if the right side of the column is beyond or equal to the right side of the available viewport,
       // then it the last column that's at least partially visible, as the previous column's right side is not beyond the viewport.
@@ -240,7 +293,7 @@ export function useCalculatedColumns<R, SR>({
     }
 
     const colOverscanStartIdx = max(firstUnfrozenColumnIdx, colVisibleStartIdx - 1);
-    const colOverscanEndIdx = min(lastColIdx, colVisibleEndIdx + 1);
+    const colOverscanEndIdx = min(lastUnfrozonColumnIdx, colVisibleEndIdx + 1);
 
     return [colOverscanStartIdx, colOverscanEndIdx];
   }, [
@@ -249,8 +302,10 @@ export function useCalculatedColumns<R, SR>({
     lastFrozenColumnIndex,
     scrollLeft,
     totalFrozenColumnWidth,
+    totalRightFrozenColumnWidth,
     viewportWidth,
-    enableVirtualization
+    enableVirtualization,
+    rightFrozenColumnCount
   ]);
 
   return {
@@ -262,7 +317,9 @@ export function useCalculatedColumns<R, SR>({
     layoutCssVars,
     headerRowsCount,
     lastFrozenColumnIndex,
-    totalFrozenColumnWidth
+    totalFrozenColumnWidth,
+    rightFrozenColumnCount,
+    totalRightFrozenColumnWidth
   };
 }