add support for toggling wrapRowsHorizontally at runtime

Author: radubrehar

examples/src/pages/tests/horizontal-layout/example.page.tsx

@@ -162,6 +162,7 @@ export default () => {
     React.useState<DataSourceApi<Developer> | null>(null);
 
   const [cols, setCols] = React.useState(columns);
+  const [wrapRowsHorizontally, setWrapRowsHorizontally] = React.useState(true);
   return (
     <>
       {Object.keys(columns).map((colId) => {
@@ -187,6 +188,13 @@ export default () => {
           </label>
         );
       })}
+      <button
+        onClick={() => {
+          setWrapRowsHorizontally((x) => !x);
+        }}
+      >
+        toggle
+      </button>
       <button
         onClick={() => {
           dataSourceApi?.updateData({
@@ -206,7 +214,7 @@ export default () => {
           shouldReloadData={{
             filterValue: false,
           }}
-          defaultFilterValue={[]}
+          // defaultFilterValue={[]}
           primaryKey="id"
         >
           <InfiniteTable<Developer>
@@ -224,12 +232,13 @@ export default () => {
             //     },
             //   },
             // }}
-            wrapRowsHorizontally={true}
+            wrapRowsHorizontally={wrapRowsHorizontally}
             columnDefaultWidth={120}
             columnDefaultEditable
             domProps={{
               style: {
                 minHeight: '70vh',
+                // width: '90vw',
               },
             }}
           />

source/src/components/HeadlessTable/RawTable.tsx

@@ -79,7 +79,7 @@ export function RawTableFn(props: RawTableProps) {
     });
 
     return remove;
-  }, [renderCell, renderDetailRow]);
+  }, [renderCell, renderDetailRow, brain, onRenderUpdater]);
 
   return <AvoidReactDiff updater={onRenderUpdater} />;
 }

source/src/components/HeadlessTable/index.tsx

@@ -204,15 +204,17 @@ export function HeadlessTable(
     const remove = setupResizeObserver(node, onResize, { debounce: 50 });
 
     return remove;
-  }, [wrapRowsHorizontally]);
+  }, [wrapRowsHorizontally, brain]);
+
+  const updateDOMTransform = useCallback((scrollPos: ScrollPosition) => {
+    domRef.current!.style.transform = `translate3d(${-scrollPos.scrollLeft}px, ${-scrollPos.scrollTop}px, 0px)`;
+  }, []);
 
   const onContainerScroll = useCallback(
     (scrollPos: ScrollPosition) => {
-      brain.setScrollPosition(scrollPos, (scrollPos) => {
-        domRef.current!.style.transform = `translate3d(${-scrollPos.scrollLeft}px, ${-scrollPos.scrollTop}px, 0px)`;
-      });
+      brain.setScrollPosition(scrollPos, updateDOMTransform);
     },
-    [brain],
+    [brain, updateDOMTransform],
   );
 
   useEffect(() => {
@@ -222,6 +224,11 @@ export function HeadlessTable(
 
     setTotalScrollSize(brain.getVirtualizedContentSize());
 
+    // useful when the brain is changed - when toggling the value of wrapRowsHorizontally
+    updateDOMTransform(
+      brain.getScrollPosition() || { scrollLeft: 0, scrollTop: 0 },
+    );
+
     return removeOnRenderCount;
   }, [brain]);
 

source/src/components/InfiniteTable/InfiniteDebugName.ts

@@ -0,0 +1 @@
+export const DEBUG_NAME = 'InfiniteTable';

source/src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.tsx

@@ -45,20 +45,25 @@ function InfiniteTableHeaderFn<T>(
 
   const { computedColumnsMap } = computed;
 
+  const domRef = useRef<HTMLDivElement | null>(null);
+
+  const updateDOMTransform = useCallback((scrollPosition: ScrollPosition) => {
+    if (domRef.current) {
+      domRef.current.style.transform = `translate3d(-${scrollPosition.scrollLeft}px, 0px, 0px)`;
+    }
+  }, []);
+
   useEffect(() => {
-    const onScroll = (scrollPosition: ScrollPosition) => {
-      if (domRef.current) {
-        domRef.current.style.transform = `translate3d(-${scrollPosition.scrollLeft}px, 0px, 0px)`;
-      }
-    };
+    const removeOnScroll = brain.onScroll(updateDOMTransform);
 
-    const removeOnScroll = brain.onScroll(onScroll);
+    // useful when the brain is changed - when toggling the value of wrapRowsHorizontally
+    updateDOMTransform(
+      brain.getScrollPosition() || { scrollLeft: 0, scrollTop: 0 },
+    );
 
     return removeOnScroll;
   }, [brain]);
 
-  const domRef = useRef<HTMLDivElement | null>(null);
-
   const headerCls = HeaderClsRecipe({
     overflow: false,
   });

source/src/components/InfiniteTable/hooks/useToggleWrapRowsHorizontally.ts

@@ -0,0 +1,31 @@
+import { useEffect } from 'react';
+import { usePrevious } from '../../hooks/usePrevious';
+import { DEBUG_NAME } from '../InfiniteDebugName';
+import { createBrains } from '../state/getInitialState';
+import { useInfiniteTable } from './useInfiniteTable';
+
+export function useToggleWrapRowsHorizontally() {
+  const { state, getState, actions } = useInfiniteTable();
+
+  const { wrapRowsHorizontally } = state;
+  const oldWrapRowsHorizontally = usePrevious(wrapRowsHorizontally);
+
+  useEffect(() => {
+    if (oldWrapRowsHorizontally !== wrapRowsHorizontally) {
+      const { brain, headerBrain, renderer, onRenderUpdater } = getState();
+
+      brain.destroy();
+      headerBrain.destroy();
+      renderer.destroy();
+      onRenderUpdater.destroy();
+
+      const newBrains = createBrains(DEBUG_NAME, !!wrapRowsHorizontally);
+
+      actions.brain = newBrains.brain;
+      actions.headerBrain = newBrains.headerBrain;
+
+      actions.renderer = newBrains.renderer;
+      actions.onRenderUpdater = newBrains.onRenderUpdater;
+    }
+  }, [oldWrapRowsHorizontally, wrapRowsHorizontally]);
+}

source/src/components/InfiniteTable/index.tsx

@@ -89,6 +89,9 @@ import { HScrollSyncContent } from './components/HScrollSyncContent';
 import { useGridScroll } from './hooks/useGridScroll';
 import { useVisibleColumnSizes } from './hooks/useVisibleColumnSizes';
 
+import { DEBUG_NAME } from './InfiniteDebugName';
+import { useToggleWrapRowsHorizontally } from './hooks/useToggleWrapRowsHorizontally';
+
 export const InfiniteTableClassName = internalProps.rootClassName;
 
 const HOVERED_CLASS_NAMES = [RowHoverCls, 'InfiniteColumnCell--hovered'];
@@ -113,7 +116,7 @@ const { ManagedComponentContextProvider: InfiniteTableRoot } =
     mappedCallbacks: getMappedCallbacks(),
     // @ts-ignore
     getParentState: () => useDataSourceState(),
-    debugName: 'InfiniteTable',
+    debugName: DEBUG_NAME,
   });
 
 function InfiniteTableHeader<T>() {
@@ -248,6 +251,8 @@ function InfiniteTableBody<T>() {
 
   const { autoFocus, tabIndex } = domProps ?? {};
 
+  useToggleWrapRowsHorizontally();
+
   return (
     <InfiniteTableBodyContainer onContextMenu={onContextMenu}>
       <HeadlessTable

source/src/components/InfiniteTable/state/getInitialState.ts

@@ -54,19 +54,7 @@ export function getCellSelector(cellPosition?: CellPositionByIndex) {
   return selector;
 }
 
-/**
- * The computed state is independent from props and cannot
- * be affected by props.
- */
-export function initSetupState<T>({
-  debugId,
-  wrapRowsHorizontally,
-}: {
-  debugId: string;
-  wrapRowsHorizontally?: boolean;
-}): InfiniteTableSetupState<T> {
-  const columnsGeneratedForGrouping: InfiniteTablePropColumns<T> = {};
-
+export function createBrains(debugId: string, wrapRowsHorizontally: boolean) {
   /**
    * This is the main virtualization brain that powers the table
    */
@@ -109,9 +97,26 @@ export function initSetupState<T>({
     headerBrain.update({ width: size.width });
   });
 
-  if (__DEV__) {
-    (globalThis as any).renderer = renderer;
-  }
+  return { brain, headerBrain, renderer, onRenderUpdater };
+}
+
+/**
+ * The computed state is independent from props and cannot
+ * be affected by props.
+ */
+export function initSetupState<T>({
+  debugId,
+  wrapRowsHorizontally,
+}: {
+  debugId: string;
+  wrapRowsHorizontally?: boolean;
+}): InfiniteTableSetupState<T> {
+  const columnsGeneratedForGrouping: InfiniteTablePropColumns<T> = {};
+
+  const { brain, headerBrain, renderer, onRenderUpdater } = createBrains(
+    debugId,
+    !!wrapRowsHorizontally,
+  );
 
   const domRef = createRef<HTMLDivElement>();
 
@@ -226,8 +231,6 @@ export const forwardProps = <T>(
     onContextMenu: 1,
     onCellContextMenu: 1,
 
-    wrapRowsHorizontally: 1,
-
     onRenderRangeChange: 1,
 
     onScrollToTop: 1,
@@ -261,6 +264,8 @@ export const forwardProps = <T>(
     onScrollbarsChange: 1,
     autoSizeColumnsKey: 1,
 
+    wrapRowsHorizontally: 1,
+
     columnDefaultFlex: 1,
 
     draggableColumnsRestrictTo: (draggableColumnsRestrictTo) =>

source/src/components/InfiniteTable/types/InfiniteTableState.ts

@@ -58,11 +58,14 @@ export type ContextMenuLocationWithEvent = Partial<CellContextMenuLocation> & {
 };
 
 export interface InfiniteTableSetupState<T> {
+  brain: MatrixBrain;
+  headerBrain: MatrixBrain;
   renderer: ReactHeadlessTableRenderer;
+  onRenderUpdater: SubscriptionCallback<Renderable>;
+
   lastRowToExpandRef: MutableRefObject<any | null>;
   lastRowToCollapseRef: MutableRefObject<any | null>;
   getDOMNodeForCell: (cellPos: CellPositionByIndex) => HTMLElement | null;
-  onRenderUpdater: SubscriptionCallback<Renderable>;
   propsCache: Map<keyof InfiniteTableProps<T>, WeakMap<any, any>>;
   columnsWhenInlineGroupRenderStrategy?: Record<string, InfiniteTableColumn<T>>;
   domRef: MutableRefObject<HTMLDivElement | null>;
@@ -104,8 +107,7 @@ export interface InfiniteTableSetupState<T> {
   keyDown: SubscriptionCallback<KeyboardEvent>;
   columnsWhenGrouping?: InfiniteTablePropColumns<T>;
   bodySize: Size;
-  brain: MatrixBrain;
-  headerBrain: MatrixBrain;
+
   focused: boolean;
   ready: boolean;
   columnReorderDragColumnId: false | string;