Merge pull request #484 from silevis/fix/cell-exceeds-right-pane

V5 fix: cell does not fit in sticky right pane after column removal
silevis · Jan 24, 2025 · a138074 · a138074
2 parents 2c06899 + cc464a9
commit a138074
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 10 deletions.
diff --git a/reactgrid/lib/components/PanesRenderer.tsx b/reactgrid/lib/components/PanesRenderer.tsx
@@ -1,5 +1,5 @@
 import { FC, useEffect, useMemo, useRef, useState } from "react";
-import { StickyOffsets } from "../types/InternalModel";
+import { CellMap, StickyOffsets } from "../types/InternalModel";
 import { reactGridStores, useReactGridStore } from "../utils/reactGridStore";
 import { useTheme } from "../hooks/useTheme";
 import { Pane } from "./Pane";
@@ -14,19 +14,22 @@ import { getCellArea } from "../utils/getCellArea";
 import { isSpanMember } from "../utils/isSpanMember";
 import { getValueFromPixelString } from "../utils/getValueFromPixelString";
 import { PaneShadow } from "./PaneShadow";
+import { Column, Row } from "../types/PublicModel";
 
 interface PanesRendererProps {
-  rowAmount: number;
-  columnAmount: number;
+  rows: Row[];
+  columns: Column[];
+  cells: CellMap;
   stickyTopRows: number;
   stickyBottomRows: number;
   stickyLeftColumns: number;
   stickyRightColumns: number;
 }
 
 const PanesRenderer: FC<PanesRendererProps> = ({
-  rowAmount,
-  columnAmount,
+  rows,
+  columns,
+  cells,
   stickyTopRows,
   stickyBottomRows,
   stickyLeftColumns,
@@ -36,17 +39,17 @@ const PanesRenderer: FC<PanesRendererProps> = ({
   const store = reactGridStores()[id].getState();
 
   const theme = useTheme();
-  const cells = useReactGridStore(id, (store) => store.cells);
-  const rows = useReactGridStore(id, (store) => store.rows);
   const focusedLocation = useReactGridStore(id, (store) => store.focusedLocation);
-  const columns = useReactGridStore(id, (store) => store.columns);
 
   const setPaneRanges = useReactGridStore(id, (store) => store.setPaneRanges);
   const setRowMeasurements = useReactGridStore(id, (store) => store.setRowMeasurements);
   const setColMeasurements = useReactGridStore(id, (store) => store.setColMeasurements);
 
   const onCellFocused = useReactGridStore(id, (store) => store.onCellFocused);
 
+  const rowAmount = rows.length;
+  const columnAmount = columns.length;
+
   const ranges = useMemo(
     () => ({
       TopLeft: {

diff --git a/reactgrid/lib/components/ReactGrid.tsx b/reactgrid/lib/components/ReactGrid.tsx
@@ -80,8 +80,9 @@ export const ReactGrid: FC<ReactGridProps> = ({
       <ErrorBoundary>
         <GridWrapper reactGridId={reactGridId.current} style={{ position: "relative", ...rgProps.styles?.gridWrapper }}>
           <PanesRenderer
-            rowAmount={cellMatrix.rows.length}
-            columnAmount={cellMatrix.columns.length}
+            rows={cellMatrix.rows}
+            columns={cellMatrix.columns}
+            cells={cellMatrix.cells}
             stickyTopRows={stickyTopRows ?? 0}
             stickyBottomRows={stickyBottomRows ?? 0}
             stickyLeftColumns={stickyLeftColumns ?? 0}