fix frozen columns disappearing when scrolled right

src/components/Table/TableBody.tsx

@@ -17,11 +17,7 @@ import {
 import { getFieldProp } from "@src/components/fields";
 import type { TableRow } from "@src/types/table";
 import useVirtualization from "./useVirtualization";
-import {
-  TABLE_PADDING,
-  DEFAULT_ROW_HEIGHT,
-  OUT_OF_ORDER_MARGIN,
-} from "./Table";
+import { DEFAULT_ROW_HEIGHT, OUT_OF_ORDER_MARGIN } from "./Table";
 
 export interface ITableBodyProps {
   /**
@@ -72,6 +68,8 @@ export const TableBody = memo(function TableBody({
     paddingRight,
   } = useVirtualization(containerRef, leafColumns);
 
+  const rowHeight = tableSchema.rowHeight || DEFAULT_ROW_HEIGHT;
+
   return (
     <div className="tbody" role="rowgroup">
       {paddingTop > 0 && (
@@ -88,15 +86,13 @@ export const TableBody = memo(function TableBody({
             role="row"
             aria-rowindex={row.index + 2}
             style={{
-              height: "auto",
+              height: rowHeight,
               marginBottom: outOfOrder ? OUT_OF_ORDER_MARGIN : 0,
+              paddingLeft,
+              paddingRight,
             }}
             data-out-of-order={outOfOrder || undefined}
           >
-            {paddingLeft > 0 && (
-              <div role="presentation" style={{ width: `${paddingLeft}px` }} />
-            )}
-
             {outOfOrder && <OutOfOrderIndicator />}
 
             {virtualCols.map((virtualCell) => {
@@ -120,25 +116,18 @@ export const TableBody = memo(function TableBody({
                   row={row}
                   cell={cell}
                   index={cellIndex}
-                  left={
-                    cell.column.getIsPinned()
-                      ? virtualCell.start - TABLE_PADDING
-                      : undefined
-                  }
                   isSelectedCell={isSelectedCell}
                   focusInsideCell={isSelectedCell && selectedCell?.focusInside}
                   isReadOnlyCell={isReadOnlyCell}
                   canEditCells={canEditCells}
                   isLastFrozen={lastFrozen === cell.column.id}
                   width={cell.column.getSize()}
-                  rowHeight={tableSchema.rowHeight || DEFAULT_ROW_HEIGHT}
+                  rowHeight={rowHeight}
+                  left={virtualCell.start}
+                  isPinned={cell.column.getIsPinned() === "left"}
                 />
               );
             })}
-
-            {paddingRight > 0 && (
-              <div role="presentation" style={{ width: `${paddingRight}px` }} />
-            )}
           </StyledRow>
         );
       })}

src/components/Table/TableCell/TableCell.tsx

@@ -17,6 +17,7 @@ import {
   selectedCellAtom,
   contextMenuTargetAtom,
 } from "@src/atoms/tableScope";
+import { TABLE_PADDING } from "@src/components/Table";
 import type { TableRow } from "@src/types/table";
 import type { IRenderedTableCellProps } from "./withRenderTableCell";
 
@@ -52,7 +53,8 @@ export interface ITableCellProps {
    * If provided, cell is pinned/frozen, and this value is used for
    * `position: sticky`.
    */
-  left?: number;
+  left: number;
+  isPinned: boolean;
 }
 
 /**
@@ -79,6 +81,7 @@ export const TableCell = memo(function TableCell({
   isLastFrozen,
   width,
   left,
+  isPinned,
 }: ITableCellProps) {
   const setSelectedCell = useSetAtom(selectedCellAtom, tableScope);
   const setContextMenuTarget = useSetAtom(contextMenuTargetAtom, tableScope);
@@ -152,7 +155,8 @@ export const TableCell = memo(function TableCell({
       style={{
         width,
         height: rowHeight,
-        left,
+        position: isPinned ? "sticky" : "absolute",
+        left: left - (isPinned ? TABLE_PADDING : 0),
         backgroundColor:
           cell.column.id === "_rowy_column_actions" ? "transparent" : undefined,
         borderBottomWidth:

src/components/Table/useVirtualization.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useCallback } from "react";
 import { useAtom } from "jotai";
-import { useVirtual } from "react-virtual";
+import { useVirtual, defaultRangeExtractor } from "react-virtual";
+import type { Range } from "react-virtual";
 
 import {
   tableScope,
@@ -69,6 +70,21 @@ export function useVirtualization(
         ),
       [leafColumns]
     ),
+    rangeExtractor: useCallback(
+      (range: Range) => {
+        const defaultRange = defaultRangeExtractor(range);
+        const frozenColumns = leafColumns
+          .filter((c) => c.getIsPinned())
+          .map((c) => c.getPinnedIndex());
+
+        const combinedRange = Array.from(
+          new Set([...defaultRange, ...frozenColumns])
+        ).sort((a, b) => a - b);
+
+        return combinedRange;
+      },
+      [leafColumns]
+    ),
   });
 
   // Scroll to selected cell