@infinite-table/infinite-react 9.0.3 → 9.1.0

package/index.dev.mjs

@@ -2136,7 +2136,7 @@ function InfiniteTableFooter(props) {
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderCell.tsx
 import * as React49 from "react";
-import { useCallback as useCallback22, useContext as useContext10, useEffect as useEffect16, useRef as useRef21 } from "react";
+import { useCallback as useCallback22, useContext as useContext10, useEffect as useEffect17, useRef as useRef21 } from "react";
 import { createPortal } from "react-dom";
 
 // src/utils/keyMirror.ts
@@ -6290,7 +6290,47 @@ import * as React26 from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnCell.tsx
 import * as React25 from "react";
-import { useCallback as useCallback14, useContext as useContext6, useMemo as useMemo5, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import {
+  useCallback as useCallback14,
+  useContext as useContext6,
+  useEffect as useEffect9,
+  useMemo as useMemo5,
+  useReducer as useReducer2,
+  useSyncExternalStore as useSyncExternalStore2
+} from "react";
+
+// src/components/InfiniteTable/components/InfiniteTableRow/repaintCellsKey.ts
+var REPAINT_CELLS_KEY_NO_ROW = Symbol("REPAINT_CELLS_KEY_NO_ROW");
+function isRepaintCellsKeyFn(repaintCellsKey) {
+  return typeof repaintCellsKey === "function";
+}
+function computeRepaintCellsKey(fn, params) {
+  const { column, rowIndex, rowInfoStore, getDataSourceState } = params;
+  const rowInfo = rowInfoStore.getRowInfoAtIndex(rowIndex);
+  if (!rowInfo) {
+    return REPAINT_CELLS_KEY_NO_ROW;
+  }
+  const states = rowInfoStore.getDataSourceStates();
+  return fn({
+    rowInfo,
+    column,
+    dataSourceState: states.dataSourceState ?? getDataSourceState(),
+    previousDataSourceState: states.previousDataSourceState
+  });
+}
+function subscribeToRepaintCellsKey(fn, params, onKeyChange) {
+  let lastKey = computeRepaintCellsKey(fn, params);
+  return params.rowInfoStore.subscribeToDataArrayChange(() => {
+    const nextKey = computeRepaintCellsKey(fn, params);
+    if (nextKey === REPAINT_CELLS_KEY_NO_ROW) {
+      return;
+    }
+    if (!Object.is(nextKey, lastKey)) {
+      lastKey = nextKey;
+      onKeyChange();
+    }
+  });
+}
 
 // src/components/InfiniteTable/components/cell.css.ts
 var ColumnCellCls = "_1eexc2a7 _1eexc2a6";
@@ -7303,6 +7343,21 @@ var defaultRenderSelectionCheckBox = (params) => {
     }
   );
 };
+function useRepaintCellsKey(params) {
+  const { repaintCellsKey, column, rowIndex, rowInfoStore, getDataSourceState } = params;
+  const [, forceRepaint] = useReducer2((x) => x + 1, 0);
+  const repaintCellsKeyFn = isRepaintCellsKeyFn(repaintCellsKey) ? repaintCellsKey : void 0;
+  useEffect9(() => {
+    if (!repaintCellsKeyFn) {
+      return;
+    }
+    return subscribeToRepaintCellsKey(
+      repaintCellsKeyFn,
+      { column, rowIndex, rowInfoStore, getDataSourceState },
+      forceRepaint
+    );
+  }, [repaintCellsKeyFn, column, rowIndex, rowInfoStore, getDataSourceState]);
+}
 function InfiniteTableColumnCellFn(props) {
   const {
     dataSourceStatePartialForCell,
@@ -7316,6 +7371,7 @@ function InfiniteTableColumnCellFn(props) {
     computedColumnOrder,
     cellStyle,
     cellClassName,
+    repaintCellsKey,
     rowDetailState,
     width,
     column,
@@ -7352,6 +7408,13 @@ function InfiniteTableColumnCellFn(props) {
       [rowInfoStore, rowIndex]
     )
   );
+  useRepaintCellsKey({
+    repaintCellsKey,
+    column,
+    rowIndex,
+    rowInfoStore,
+    getDataSourceState
+  });
   const isEmptyRowInfo = !rowInfoFromStore;
   const isEmptyColumn = !column;
   const htmlElementRef = React25.useRef(null);
@@ -7876,7 +7939,7 @@ function MenuIcon(props) {
 
 // src/components/InfiniteTable/components/icons/SortIcon/index.tsx
 import * as React28 from "react";
-import { useEffect as useEffect9, useState as useState9 } from "react";
+import { useEffect as useEffect10, useState as useState9 } from "react";
 
 // src/components/InfiniteTable/components/icons/SortIcon/SortIcon.css.ts
 var SortIconCls = "_1b8djff0 _16lm1iw1p _16lm1iw2f _16lm1iw1 _16lm1iw32";
@@ -7914,7 +7977,7 @@ function SortIcon(props) {
     ...props.lineStyle,
     opacity
   };
-  useEffect9(() => {
+  useEffect10(() => {
     const newOpacity = direction != 0 ? 1 : 0;
     if (!rendered && newOpacity) {
       setRendered(true);
@@ -8328,7 +8391,7 @@ function useColumnResizeHandle(column, opts) {
 
 // src/components/InfiniteTable/components/draggable/DragList.tsx
 import * as React31 from "react";
-import { useCallback as useCallback17, useEffect as useEffect10, useState as useState12 } from "react";
+import { useCallback as useCallback17, useEffect as useEffect11, useState as useState12 } from "react";
 
 // src/components/InfiniteTable/components/draggable/DragList.css.ts
 var DragListRecipe = createRuntimeFn({ defaultClassName: "_16lm1iw3a _16lm1iw1", variantClassNames: { dragging: { true: "_16lm1iwn _16lm1iw1x" } }, defaultVariants: {}, compoundVariants: [] });
@@ -8771,7 +8834,7 @@ function useInteractionTarget(domRef, props) {
     []
   );
   const getInteractionTarget = useLatest(interactionTarget);
-  useEffect10(() => {
+  useEffect11(() => {
     return DragManager.on("register", (interactionTarget2) => {
       const { dragListId, acceptDropsFrom, orientation, shouldAcceptDrop } = getProps();
       const interactionTargetData = interactionTarget2.getData();
@@ -8858,7 +8921,7 @@ var DragList = (props) => {
     domRef,
     props
   );
-  useEffect10(() => {
+  useEffect11(() => {
     const dragList = document.querySelector(
       `[${DRAG_LIST_ATTRIBUTE}="${props.dragListId}"]`
     );
@@ -8870,7 +8933,7 @@ var DragList = (props) => {
       );
     }
   }, [props.dragListId]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (interactionTarget) {
       const dragListId = props.dragListId;
       const removeOnDragStart = interactionTarget.on(
@@ -9368,7 +9431,7 @@ import * as React47 from "react";
 
 // src/components/HeadlessTable/index.tsx
 import * as React41 from "react";
-import { useCallback as useCallback18, useEffect as useEffect14, useRef as useRef18, useState as useState14 } from "react";
+import { useCallback as useCallback18, useEffect as useEffect15, useRef as useRef18, useState as useState14 } from "react";
 
 // src/components/VirtualList/SpacePlaceholder.tsx
 import * as React33 from "react";
@@ -9403,9 +9466,9 @@ import * as React34 from "react";
 import { useRef as useRef14 } from "react";
 
 // src/components/hooks/useOnScroll.ts
-import { useEffect as useEffect11 } from "react";
+import { useEffect as useEffect12 } from "react";
 var useOnScroll = (domRef, onScroll) => {
-  useEffect11(() => {
+  useEffect12(() => {
     const domNode = domRef?.current;
     const scrollFn = (event) => {
       const node = event.target;
@@ -13158,7 +13221,7 @@ var RawTable = React38.memo(RawTableFn);
 
 // src/components/InfiniteTable/components/ActiveRowIndicator.tsx
 import * as React39 from "react";
-import { useEffect as useEffect12, useLayoutEffect as useLayoutEffect9, useRef as useRef16 } from "react";
+import { useEffect as useEffect13, useLayoutEffect as useLayoutEffect9, useRef as useRef16 } from "react";
 
 // src/components/InfiniteTable/components/ActiveCellIndicator.css.ts
 var ActiveCellIndicatorRecipe = createRuntimeFn({ defaultClassName: "nxbq1c1 _16lm1iwz _16lm1iw2", variantClassNames: { visible: { true: "nxbq1c3", false: "nxbq1c4" } }, defaultVariants: {}, compoundVariants: [] });
@@ -13207,7 +13270,7 @@ var ActiveRowIndicatorFn = (props) => {
     };
     setInfiniteVarsOnNode(vars, node);
   }, [props.activeRowIndex, brain]);
-  useEffect12(() => {
+  useEffect13(() => {
     const updateVars = (scrollPosition) => {
       setInfiniteVarsOnNode(
         {
@@ -13246,7 +13309,7 @@ var ActiveRowIndicator = React39.memo(
 
 // src/components/InfiniteTable/components/ActiveCellIndicator.tsx
 import * as React40 from "react";
-import { useEffect as useEffect13, useLayoutEffect as useLayoutEffect10, useRef as useRef17 } from "react";
+import { useEffect as useEffect14, useLayoutEffect as useLayoutEffect10, useRef as useRef17 } from "react";
 var { rootClassName: rootClassName7 } = internalProps;
 var baseCls2 = `${rootClassName7}-ActiveCellIndicator`;
 var columnZIndexAtIndex4 = stripVar(InternalVars.columnZIndexAtIndex);
@@ -13277,7 +13340,7 @@ var ActiveCellIndicatorFn = (props) => {
   useLayoutEffect10(() => {
     reposition(brain, props.activeCellIndex, props.rowHeight, domRef);
   }, [props.activeCellIndex, props.rowHeight, brain]);
-  useEffect13(() => {
+  useEffect14(() => {
     const removeOnRenderCountChange = brain.onRenderCountChange(() => {
       rerender();
     });
@@ -13368,12 +13431,12 @@ function HeadlessTable(props) {
     width: 0,
     height: 0
   });
-  useEffect14(() => {
+  useEffect15(() => {
     if (scrollStopDelay != null) {
       brain.setScrollStopDelay(scrollStopDelay);
     }
   }, [scrollStopDelay, brain]);
-  useEffect14(() => {
+  useEffect15(() => {
     const node = domRef.current?.parentNode;
     if (!node) {
       return;
@@ -13409,7 +13472,7 @@ function HeadlessTable(props) {
     },
     [brain, updateDOMTransform]
   );
-  useEffect14(() => {
+  useEffect15(() => {
     const removeOnRenderCount = brain.onRenderCountChange(() => {
       setTotalScrollSize(brain.getVirtualizedContentSize());
     });
@@ -13570,7 +13633,7 @@ function assignGroupOffsetsAndComputedWidths(items, groupOffset = 0) {
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.tsx
 import * as React46 from "react";
-import { useCallback as useCallback20, useEffect as useEffect15, useMemo as useMemo8, useRef as useRef20 } from "react";
+import { useCallback as useCallback20, useEffect as useEffect16, useMemo as useMemo8, useRef as useRef20 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderGroup.tsx
 import * as React44 from "react";
@@ -13903,7 +13966,7 @@ function InfiniteTableInternalHeaderFn(props) {
       domRef.current.style.transform = `translate3d(-${scrollPosition.scrollLeft}px, 0px, 0px)`;
     }
   }, []);
-  useEffect15(() => {
+  useEffect16(() => {
     const removeOnScroll = headerBrain.onScroll(updateDOMTransform);
     updateDOMTransform(
       headerBrain.getScrollPosition() || { scrollLeft: 0, scrollTop: 0 }
@@ -14541,7 +14604,7 @@ function InfiniteTableHeaderCellFn(props) {
     }
     return all;
   };
-  useEffect16(() => {
+  useEffect17(() => {
     let clearOnResize = null;
     const node = domRef.current;
     if (onResize && node) {
@@ -14717,7 +14780,7 @@ function useInfiniteHeaderCell() {
 
 // src/components/InfiniteTable/components/InfiniteTableLicenseFooter/index.tsx
 import * as React50 from "react";
-import { useEffect as useEffect17 } from "react";
+import { useEffect as useEffect18 } from "react";
 
 // src/components/utils/decamelize.ts
 function decamelize(str, options) {
@@ -14774,7 +14837,7 @@ var InfiniteTableLicenseFooter = React50.forwardRef(
         ref.current = node;
       }
     }, []);
-    useEffect17(() => {
+    useEffect18(() => {
       const forceStyle = () => {
         setTimeout(() => {
           enforceStyle(domRef.current, defaultStyle);
@@ -20158,9 +20221,22 @@ function deepEqualRowInfo(oldRowInfo, newRowInfo) {
 function createRowInfoStore() {
   let dataArray = [];
   const subscribers = /* @__PURE__ */ new Map();
+  const dataArrayChangeSubscribers = /* @__PURE__ */ new Set();
+  let dataSourceStates = {
+    dataSourceState: void 0,
+    previousDataSourceState: void 0
+  };
   const notifyDataArray = (newDataArray, params) => {
     const oldDataArray = dataArray;
     const marker = params?.marker;
+    const dataArrayChanged = newDataArray !== oldDataArray;
+    const notifyDataArrayChange = dataArrayChanged && dataArrayChangeSubscribers.size > 0;
+    if (notifyDataArrayChange) {
+      dataSourceStates = {
+        dataSourceState: params?.dataSourceState,
+        previousDataSourceState: params?.previousDataSourceState
+      };
+    }
     if (marker) {
       marker.start({
         details: [
@@ -20186,7 +20262,7 @@ function createRowInfoStore() {
       }
     }
     dataArray = newDataArray;
-    if (changedIndices.length > 0) {
+    if (changedIndices.length > 0 || notifyDataArrayChange) {
       queueMicrotask(() => {
         for (let i = 0, len = changedIndices.length; i < len; i++) {
           const index = changedIndices[i];
@@ -20197,6 +20273,11 @@ function createRowInfoStore() {
             }
           }
         }
+        if (notifyDataArrayChange) {
+          for (const callback of Array.from(dataArrayChangeSubscribers)) {
+            callback();
+          }
+        }
       });
     }
     if (marker) {
@@ -20231,14 +20312,36 @@ function createRowInfoStore() {
   const getDataArray = () => {
     return dataArray;
   };
+  const subscribeToDataArrayChange = (callback) => {
+    dataArrayChangeSubscribers.add(callback);
+    return () => {
+      dataArrayChangeSubscribers.delete(callback);
+      if (dataArrayChangeSubscribers.size === 0) {
+        dataSourceStates = {
+          dataSourceState: void 0,
+          previousDataSourceState: void 0
+        };
+      }
+    };
+  };
+  const getDataSourceStates = () => {
+    return dataSourceStates;
+  };
   const clear = () => {
     dataArray = [];
     subscribers.clear();
+    dataArrayChangeSubscribers.clear();
+    dataSourceStates = {
+      dataSourceState: void 0,
+      previousDataSourceState: void 0
+    };
   };
   return {
     notifyDataArray,
     getRowInfoAtIndex,
     subscribeToRowIndex,
+    subscribeToDataArrayChange,
+    getDataSourceStates,
     getDataArray,
     clear
   };
@@ -21922,7 +22025,9 @@ function concludeReducer(params) {
     };
   }
   state.rowInfoStore.notifyDataArray(rowInfoDataArray, {
-    marker: debugId ? getMarker(debugId).track.DataSource.label.DiffRowInfoInStore : void 0
+    marker: debugId ? getMarker(debugId).track.DataSource.label.DiffRowInfoInStore : void 0,
+    dataSourceState: state,
+    previousDataSourceState: previousState
   });
   if (rootMarker) {
     rootMarker?.track.DataSource.label.PrepareData.end({
@@ -24103,7 +24208,7 @@ function getImperativeApi(context) {
 }
 
 // src/components/InfiniteTable/hooks/useAutoSizeColumns.ts
-import { useEffect as useEffect18, useRef as useRef23, useState as useState16 } from "react";
+import { useEffect as useEffect19, useRef as useRef23, useState as useState16 } from "react";
 
 // src/components/InfiniteTable/utils/getColumnContentMaxWidths.ts
 var OFFSET = 10;
@@ -24182,7 +24287,7 @@ function useAutoSizeColumns() {
   const theKey = typeof autoSizeColumnsKey === "object" ? autoSizeColumnsKey.key : autoSizeColumnsKey;
   const getTheKey = useLatest(theKey);
   const lastExecutedIdentifierRef = useRef23(null);
-  useEffect18(() => {
+  useEffect19(() => {
     const key = getTheKey();
     if (key == null) {
       return;
@@ -24195,7 +24300,7 @@ function useAutoSizeColumns() {
     };
     return brain.onRenderRangeChange(onChange);
   }, [brain]);
-  useEffect18(() => {
+  useEffect19(() => {
     if (theKey == null) {
       return;
     }
@@ -24240,7 +24345,7 @@ function useAutoSizeColumns() {
 }
 
 // src/components/InfiniteTable/hooks/useComputed.ts
-import { useEffect as useEffect24, useMemo as useMemo16, useState as useState20 } from "react";
+import { useEffect as useEffect25, useMemo as useMemo16, useState as useState20 } from "react";
 
 // src/components/InfiniteTable/utils/MultiCellSelector.ts
 var MultiCellSelector = class {
@@ -24481,7 +24586,7 @@ function useDataSourceState(selector2) {
 // src/components/DataSource/privateHooks/useDataSource.tsx
 import React52, {
   useCallback as useCallback24,
-  useEffect as useEffect21,
+  useEffect as useEffect22,
   useLayoutEffect as useLayoutEffect12,
   useState as useState18
 } from "react";
@@ -24492,10 +24597,10 @@ function createDataSourceStore() {
 }
 
 // src/components/DataSource/privateHooks/useLoadData.ts
-import { useEffect as useEffect20, useMemo as useMemo11, useRef as useRef25, useState as useState17 } from "react";
+import { useEffect as useEffect21, useMemo as useMemo11, useRef as useRef25, useState as useState17 } from "react";
 
 // src/components/hooks/useEffectWithChanges.ts
-import { useEffect as useEffect19, useLayoutEffect as useLayoutEffect11, useRef as useRef24 } from "react";
+import { useEffect as useEffect20, useLayoutEffect as useLayoutEffect11, useRef as useRef24 } from "react";
 function useEffectWithChanges(fn, deps) {
   const prevRef = useRef24({});
   const oldValuesRef = useRef24({});
@@ -24513,7 +24618,7 @@ function useEffectWithChanges(fn, deps) {
     }
   }
   prevRef.current = deps;
-  useEffect19(() => {
+  useEffect20(() => {
     const changes2 = changesRef.current;
     let result = void 0;
     if (Object.keys(changes2).length !== 0) {
@@ -24559,7 +24664,7 @@ function useEffectWithObject(fn, deps) {
       useEffectDeps.push(deps[k]);
     }
   }
-  useEffect19(fn, useEffectDeps);
+  useEffect20(fn, useEffectDeps);
 }
 
 // src/components/InfiniteTable/errorCodes.ts
@@ -24730,7 +24835,7 @@ function useLoadData(options) {
     horizontal: false
   });
   const scrollbarsRef = useRef25(scrollbars);
-  useEffect20(() => {
+  useEffect21(() => {
     notifyScrollbarsChange.onChange((scrollbars2) => {
       if (!scrollbars2) {
         return;
@@ -24740,7 +24845,7 @@ function useLoadData(options) {
     });
     return () => notifyScrollbarsChange.destroy();
   }, [notifyScrollbarsChange]);
-  useEffect20(() => {
+  useEffect21(() => {
     if (!livePagination) {
       return;
     }
@@ -24753,7 +24858,7 @@ function useLoadData(options) {
     });
     return () => cancelAnimationFrame(frameId);
   }, [livePaginationCursor]);
-  useEffect20(() => {
+  useEffect21(() => {
     if (!livePagination || livePaginationCursor !== void 0) {
       return;
     }
@@ -24766,7 +24871,7 @@ function useLoadData(options) {
     });
     return () => cancelAnimationFrame(frameId);
   }, [dataArray.length, livePaginationCursor]);
-  useEffect20(() => {
+  useEffect21(() => {
     const state = getDataSourceState();
     const { livePaginationCursor: livePaginationCursor2, livePagination: livePagination2, dataArray: dataArray2 } = state;
     if (!scrollbars.vertical && livePagination2) {
@@ -24900,7 +25005,7 @@ function useLoadData(options) {
 }
 function useLazyLoadRange(options, dependencies) {
   const { getDataSourceState, dataSourceActions, dataSourceState } = options;
-  useEffect20(() => {
+  useEffect21(() => {
     dataSourceActions.lazyLoadCacheOfLoadedBatches = new DeepMap();
   }, [dataSourceState.data, dataSourceState.dataParams]);
   const {
@@ -24981,7 +25086,7 @@ function useLazyLoadRange(options, dependencies) {
       groupRowsState
     }
   );
-  useEffect20(() => {
+  useEffect21(() => {
     if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
       debouncedLoadRange();
     }
@@ -25072,7 +25177,7 @@ function useDataSourceInternal(props) {
     dataSourceActions,
     getDataSourceState
   });
-  useEffect21(() => {
+  useEffect22(() => {
     dataSourceState.onDataArrayChange?.(
       dataSourceState.originalDataArray,
       dataSourceState.originalDataArrayChangedInfo
@@ -25094,7 +25199,7 @@ function useDataSourceInternal(props) {
       });
     }
   }, [dataSourceState.originalDataArrayChangedInfo]);
-  useEffect21(() => {
+  useEffect22(() => {
     dataSourceState.onReady?.(dataSourceApi);
   }, []);
   return {
@@ -25332,7 +25437,7 @@ function useColumnSizeFn(columns) {
 }
 
 // src/components/InfiniteTable/hooks/useColumnsWhen.ts
-import { useEffect as useEffect22, useLayoutEffect as useLayoutEffect13, useMemo as useMemo13 } from "react";
+import { useEffect as useEffect23, useLayoutEffect as useLayoutEffect13, useMemo as useMemo13 } from "react";
 
 // src/components/VirtualBrain/ScrollListener.ts
 var initialScrollPosition = {
@@ -25846,6 +25951,7 @@ var forwardProps4 = (_setupState) => {
     keyboardShortcuts: 1,
     rowStyle: 1,
     cellStyle: 1,
+    repaintCellsKey: 1,
     rowProps: 1,
     rowClassName: 1,
     rowHoverClassName: 1,
@@ -26583,13 +26689,13 @@ function useColumnsWhen(state, actions) {
     pivotTotalColumnPosition,
     pivotGrandTotalColumnPosition
   } = state;
-  useEffect22(() => {
+  useEffect23(() => {
     dataSourceActions.generateGroupRows = groupRenderStrategy !== "inline";
   }, [groupRenderStrategy]);
-  useEffect22(() => {
+  useEffect23(() => {
     dataSourceActions.pivotTotalColumnPosition = pivotTotalColumnPosition;
   }, [pivotTotalColumnPosition]);
-  useEffect22(() => {
+  useEffect23(() => {
     if (pivotGrandTotalColumnPosition != void 0) {
       dataSourceActions.pivotGrandTotalColumnPosition = pivotGrandTotalColumnPosition;
     }
@@ -26670,7 +26776,7 @@ function useColumnsWhenInlineGroupRenderStrategy(groupByMap, state, actions) {
     });
     return Object.keys(computedColumns).length === 0 ? void 0 : computedColumns;
   }
-  useEffect22(() => {
+  useEffect23(() => {
     const update = () => {
       componentActions.columnsWhenInlineGroupRenderStrategy = isTree ? void 0 : computeColumnsWhenInlineGroupRenderStrategy(
         columns,
@@ -26705,7 +26811,7 @@ function useColumnsWhenGrouping() {
     getComponentState
   } = useManagedComponentState();
   const toggleGroupRow = useToggleGroupRow();
-  useEffect22(() => {
+  useEffect23(() => {
     const update = () => {
       const { columns: columnsWhenGrouping, groupColumnIds } = getColumnsWhenGrouping({
         columns,
@@ -26814,7 +26920,7 @@ function useHideColumns(groupByMap, state, actions) {
     hideEmptyGroupColumns ? groupRowsIndexesInDataArray : null,
     hideEmptyGroupColumns
   ]);
-  useEffect22(() => {
+  useEffect23(() => {
     const isGrouped = groupBy.length > 0;
     const currentState = getComponentState();
     const {
@@ -27129,7 +27235,7 @@ function useComputedRowHeight(param) {
 }
 
 // src/components/InfiniteTable/hooks/useScrollbars.ts
-import { useState as useState19, useEffect as useEffect23, useLayoutEffect as useLayoutEffect14 } from "react";
+import { useState as useState19, useEffect as useEffect24, useLayoutEffect as useLayoutEffect14 } from "react";
 var INITIAL_SCROLLBARS = {
   vertical: false,
   horizontal: false
@@ -27138,7 +27244,7 @@ function useScrollbars(getState) {
   const brain = getState().brain;
   const { getDataSourceState } = useDataSourceStableContext();
   const [scrollbars, setScrollbars] = useState19(INITIAL_SCROLLBARS);
-  useEffect23(() => {
+  useEffect24(() => {
     return brain.onRenderCountChange(() => {
       const { scrollTopMax, scrollLeftMax } = brain;
       const vertical = scrollTopMax > 0;
@@ -27249,7 +27355,7 @@ function useComputed(options) {
       }
     });
   });
-  useEffect24(() => {
+  useEffect25(() => {
     dataSourceActions.showSeparatePivotColumnForSingleAggregation = showSeparatePivotColumnForSingleAggregation;
   }, [showSeparatePivotColumnForSingleAggregation]);
   const { toggleGroupRow } = useColumnsWhen(state, actions);
@@ -27591,7 +27697,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "9.0.3"
+      version: "9.1.0"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -27602,18 +27708,18 @@ var useLicense = (licenseKey = "") => {
 };
 
 // src/components/InfiniteTable/hooks/useScrollToActiveCell.ts
-import { useRef as useRef26, useEffect as useEffect25 } from "react";
+import { useRef as useRef26, useEffect as useEffect26 } from "react";
 var RETRIES = 10;
 function useScrollToActiveCell(activeCellIndex, dataCount, imperativeApi) {
   const didScrollRef = useRef26(false);
   const rafId = useRef26(null);
-  useEffect25(() => {
+  useEffect26(() => {
     if (activeCellIndex != null) {
       didScrollRef.current = false;
       cancelRaf(rafId.current);
     }
   }, [activeCellIndex]);
-  useEffect25(() => {
+  useEffect26(() => {
     if (activeCellIndex != null && !didScrollRef.current) {
       let tryScroll2 = function(times = 0) {
         times++;
@@ -27641,18 +27747,18 @@ function useScrollToActiveCell(activeCellIndex, dataCount, imperativeApi) {
 }
 
 // src/components/InfiniteTable/hooks/useScrollToActiveRow.ts
-import { useRef as useRef27, useEffect as useEffect26 } from "react";
+import { useRef as useRef27, useEffect as useEffect27 } from "react";
 var RETRIES2 = 10;
 function useScrollToActiveRow(activeRowIndex, dataCount, imperativeApi) {
   const didScrollRef = useRef27(false);
   const rafId = useRef27(null);
-  useEffect26(() => {
+  useEffect27(() => {
     if (activeRowIndex != null) {
       didScrollRef.current = false;
       cancelAnimationFrame(rafId.current);
     }
   }, [activeRowIndex]);
-  useEffect26(() => {
+  useEffect27(() => {
     if (activeRowIndex != null && !didScrollRef.current) {
       let tryScroll2 = function(times = 0) {
         times++;
@@ -27683,7 +27789,7 @@ function createInfiniteTableStore() {
 }
 
 // src/components/InfiniteTable/eventHandlers/index.ts
-import { useCallback as useCallback27, useMemo as useMemo18, useEffect as useEffect27 } from "react";
+import { useCallback as useCallback27, useMemo as useMemo18, useEffect as useEffect28 } from "react";
 
 // src/components/InfiniteTable/eventHandlers/onCellClick.ts
 function onCellClick(context, event) {
@@ -28394,7 +28500,7 @@ function useEventHandlersContext() {
 }
 function handleDOMEvents() {
   const context = useEventHandlersContext();
-  useEffect27(() => {
+  useEffect28(() => {
     const removeOnKeyDown = context.getState().keyDown.onChange((event) => {
       onKeyDown(context, event);
     });
@@ -28454,13 +28560,13 @@ function useDOMEventHandlers() {
 }
 
 // src/components/InfiniteTable/hooks/useColumnMenu.ts
-import { useEffect as useEffect31 } from "react";
+import { useEffect as useEffect32 } from "react";
 
 // src/components/hooks/useOverlay/index.tsx
 import * as React57 from "react";
 import {
   useCallback as useCallback28,
-  useEffect as useEffect29,
+  useEffect as useEffect30,
   useLayoutEffect as useLayoutEffect15,
   useState as useState21
 } from "react";
@@ -28683,7 +28789,7 @@ function DefaultOverlayPortal(props) {
 }
 function OverlayContent(props) {
   const nodeRef = React57.useRef(null);
-  useEffect29(() => {
+  useEffect30(() => {
     return props.realign.onChange((handle) => {
       if (nodeRef.current && handle) {
         alignNode(nodeRef.current, handle);
@@ -29310,10 +29416,10 @@ function useMenuContext() {
 }
 
 // src/components/hooks/useMounted.ts
-import { useCallback as useCallback29, useEffect as useEffect30, useRef as useRef29 } from "react";
+import { useCallback as useCallback29, useEffect as useEffect31, useRef as useRef29 } from "react";
 function useMounted() {
   let mountedRef = useRef29(true);
-  useEffect30(() => {
+  useEffect31(() => {
     mountedRef.current = true;
     return () => {
       mountedRef.current = false;
@@ -30141,7 +30247,7 @@ function useColumnMenu() {
   } = useOverlay({
     portalContainer: portalDOMRef?.current ?? false
   });
-  useEffect31(() => {
+  useEffect32(() => {
     const state = getState();
     return state.onColumnMenuClick.onChange((info) => {
       if (!info) {
@@ -30154,7 +30260,7 @@ function useColumnMenu() {
       actions.columnMenuVisibleForColumnId = info.column.id;
     });
   }, []);
-  useEffect31(() => {
+  useEffect32(() => {
     const { columnMenuVisibleForColumnId: columnMenuVisibleForColumnId2, columnMenuTargetRef } = getState();
     if (columnMenuVisibleForColumnId2) {
       let handleMouseDown2 = function(event) {
@@ -30234,7 +30340,7 @@ function FocusDetect() {
 }
 
 // src/components/InfiniteTable/hooks/useEditingCallbackProps.ts
-import { useEffect as useEffect32 } from "react";
+import { useEffect as useEffect33 } from "react";
 function useOnEditCancelled() {
   const context = useInfiniteTableStableContext();
   const { getState, editingCell } = useInfiniteTableSelector((ctx) => {
@@ -30244,7 +30350,7 @@ function useOnEditCancelled() {
     };
   });
   const cancelled = editingCell && !editingCell.active ? editingCell.cancelled : void 0;
-  useEffect32(() => {
+  useEffect33(() => {
     if (cancelled) {
       const { rowIndex, columnId, initialValue } = getState().editingCell;
       const { onEditCancelled } = getState();
@@ -30268,7 +30374,7 @@ function useOnEditRejected() {
     };
   });
   const rejected = editingCell && !editingCell.active && editingCell.accepted instanceof Error ? editingCell.accepted : void 0;
-  useEffect32(() => {
+  useEffect33(() => {
     if (rejected) {
       const { rowIndex, columnId, value, initialValue } = getState().editingCell;
       const { onEditRejected } = getState();
@@ -30294,7 +30400,7 @@ function useFocusOnEditStop() {
   });
   const active = editingCell?.active;
   const prevActive = usePrevious(active);
-  useEffect32(() => {
+  useEffect33(() => {
     if (!active && prevActive) {
       context.api.focus();
     }
@@ -30309,7 +30415,7 @@ function useOnEditAccepted() {
     };
   });
   const accepted = editingCell && !editingCell.active && !editingCell.cancelled && editingCell.accepted === true;
-  useEffect32(() => {
+  useEffect33(() => {
     if (accepted) {
       const { editingCell: editingCell2 } = getState();
       const { value, rowIndex, columnId, initialValue } = editingCell2;
@@ -30336,7 +30442,7 @@ function useOnEditPersisted() {
     };
   });
   const persisted = editingCell ? editingCell.persisted : void 0;
-  useEffect32(() => {
+  useEffect33(() => {
     if (persisted) {
       const { editingCell: editingCell2, onEditPersistError, onEditPersistSuccess } = getState();
       if (!editingCell2) {
@@ -30369,7 +30475,7 @@ function useEditingCallbackProps() {
 }
 
 // src/components/InfiniteTable/hooks/useColumnFilterOperatorMenu.ts
-import { useEffect as useEffect33 } from "react";
+import { useEffect as useEffect34 } from "react";
 
 // src/components/InfiniteTable/utils/getFilterOperatorMenuForColumn.tsx
 import * as React68 from "react";
@@ -30512,7 +30618,7 @@ function useColumnFilterOperatorMenu() {
   } = useOverlay({
     portalContainer: portalDOMRef?.current ?? false
   });
-  useEffect33(() => {
+  useEffect34(() => {
     const state = getState();
     return state.onFilterOperatorMenuClick.onChange((info) => {
       if (!info) {
@@ -30551,7 +30657,7 @@ function useColumnFilterOperatorMenu() {
       actions.filterOperatorMenuVisibleForColumnId = column.id;
     });
   }, []);
-  useEffect33(() => {
+  useEffect34(() => {
     const { filterOperatorMenuVisibleForColumnId } = getState();
     if (filterOperatorMenuVisibleForColumnId) {
       let handleMouseDown2 = function(event) {
@@ -30578,7 +30684,7 @@ function useColumnFilterOperatorMenu() {
 }
 
 // src/components/InfiniteTable/hooks/useContextMenu.ts
-import { useEffect as useEffect34 } from "react";
+import { useEffect as useEffect35 } from "react";
 
 // src/components/InfiniteTable/utils/getCellContextMenu.tsx
 import * as React70 from "react";
@@ -30753,7 +30859,7 @@ function useCellContextMenu() {
   } = useOverlay({
     portalContainer: portalDOMRef?.current ?? false
   });
-  useEffect34(() => {
+  useEffect35(() => {
     const { actions: actions2, getState: getState2, getDataSourceState } = context;
     const state = getState2();
     return state.cellContextMenu.onChange((info) => {
@@ -30804,7 +30910,7 @@ function useCellContextMenu() {
       }
     });
   }, []);
-  useEffect34(() => {
+  useEffect35(() => {
     const { cellContextMenuVisibleFor } = getState();
     if (cellContextMenuVisibleFor) {
       let handleMouseDown2 = function(event) {
@@ -30844,7 +30950,7 @@ function useTableContextMenu() {
   } = useOverlay({
     portalContainer: portalDOMRef?.current ?? false
   });
-  useEffect34(() => {
+  useEffect35(() => {
     const { actions: actions2, getState: getState2 } = context;
     const state = getState2();
     return state.contextMenu.onChange((info) => {
@@ -30893,7 +30999,7 @@ function useTableContextMenu() {
       }
     });
   }, []);
-  useEffect34(() => {
+  useEffect35(() => {
     const { contextMenuVisibleFor } = getState();
     if (contextMenuVisibleFor) {
       let handleMouseDown2 = function(event) {
@@ -30924,7 +31030,7 @@ import { useRef as useRef31 } from "react";
 import * as React71 from "react";
 
 // src/components/InfiniteTable/hooks/useGridScroll.ts
-import { useCallback as useCallback32, useEffect as useEffect35 } from "react";
+import { useCallback as useCallback32, useEffect as useEffect36 } from "react";
 function useGridScroll(onScroll, deps) {
   const { brain } = useInfiniteTableSelector((ctx) => {
     return {
@@ -30932,7 +31038,7 @@ function useGridScroll(onScroll, deps) {
     };
   });
   const memoizedOnScroll = useCallback32(onScroll, deps);
-  useEffect35(() => {
+  useEffect36(() => {
     const removeOnScroll = brain.onScroll(memoizedOnScroll);
     return removeOnScroll;
   }, [brain, memoizedOnScroll]);
@@ -31006,7 +31112,7 @@ function useVisibleColumnSizes() {
 var DEBUG_NAME = "InfiniteTable";
 
 // src/components/InfiniteTable/hooks/useHorizontalLayout.ts
-import { useEffect as useEffect36 } from "react";
+import { useEffect as useEffect37 } from "react";
 function useHorizontalLayout() {
   const { getState, actions, dataSourceActions, getDataSourceState } = useInfiniteTableSelector((ctx) => {
     return {
@@ -31023,7 +31129,7 @@ function useHorizontalLayout() {
   if (!wrapRowsHorizontally) {
     repeatWrappedGroupRows = false;
   }
-  useEffect36(() => {
+  useEffect37(() => {
     if (!wrapRowsHorizontally) {
       if (getDataSourceState().repeatWrappedGroupRows) {
         dataSourceActions.repeatWrappedGroupRows = false;
@@ -31067,7 +31173,7 @@ function useHorizontalLayout() {
 }
 
 // src/components/InfiniteTable/hooks/useDebugMode.ts
-import { useEffect as useEffect37, useRef as useRef32 } from "react";
+import { useEffect as useEffect38, useRef as useRef32 } from "react";
 
 // src/utils/themeVarsUtils.ts
 function collectThemeVarNames() {
@@ -31269,7 +31375,7 @@ function useDebugMode() {
       }
     }
   }
-  useEffect37(() => {
+  useEffect38(() => {
     const dataSourceState = getDataSourceState();
     if (dataSourceState.debugId !== debugId) {
       dataSourceActions.debugId = debugId;
@@ -31523,7 +31629,7 @@ function useDevTools() {
   const debugId = state.debugId;
   const debugIdRef = useRef32(debugId);
   debugIdRef.current = debugId;
-  useEffect37(() => {
+  useEffect38(() => {
     const debugId2 = debugIdRef.current;
     if (!debugId2) {
       return;
@@ -31551,7 +31657,7 @@ function useDevTools() {
       withHookFn(hookFn2);
     });
   }, []);
-  useEffect37(() => {
+  useEffect38(() => {
     const debugId2 = debugIdRef.current;
     if (!debugId2) {
       return;
@@ -31569,7 +31675,7 @@ function useDevTools() {
       });
     }
   });
-  useEffect37(() => {
+  useEffect38(() => {
     if (!debugId) {
       return;
     }
@@ -31848,7 +31954,7 @@ import * as React78 from "react";
 
 // src/components/InfiniteTable/hooks/useCellRendering.tsx
 import { useMemo as useMemo20 } from "react";
-import { useCallback as useCallback34, useEffect as useEffect38, useRef as useRef33 } from "react";
+import { useCallback as useCallback34, useEffect as useEffect39, useRef as useRef33 } from "react";
 import * as React75 from "react";
 
 // src/components/InfiniteTable/hooks/useYourBrain.ts
@@ -32111,6 +32217,7 @@ function useCellRendering(param) {
     isRowDetailsEnabled,
     cellClassName,
     cellStyle,
+    repaintCellsKey,
     rowStyle,
     rowDetailCache,
     rowClassName,
@@ -32140,6 +32247,7 @@ function useCellRendering(param) {
       isRowDetailsEnabled: ctx.state.isRowDetailEnabled,
       cellClassName: ctx.state.cellClassName,
       cellStyle: ctx.state.cellStyle,
+      repaintCellsKey: ctx.state.repaintCellsKey,
       rowStyle: ctx.state.rowStyle,
       rowDetailCache: ctx.state.rowDetailCache,
       rowClassName: ctx.state.rowClassName,
@@ -32204,17 +32312,17 @@ function useCellRendering(param) {
     rowspan
   });
   const scrollTopMaxRef = useRef33(0);
-  useEffect38(() => {
+  useEffect39(() => {
     return brain.onRenderCountChange(() => {
       scrollTopMaxRef.current = brain.scrollTopMax;
     });
   }, [brain]);
-  useEffect38(() => {
+  useEffect39(() => {
     return brain.onRenderRangeChange((range) => {
       getState().onRenderRangeChange?.(range);
     });
   }, [brain]);
-  useEffect38(() => {
+  useEffect39(() => {
     return brain.onScrollStop((scrollPosition) => {
       const { scrollTop: scrollTop2, scrollLeft: scrollLeft2 } = scrollPosition;
       if (scrollTop2 === 0) {
@@ -32254,13 +32362,13 @@ function useCellRendering(param) {
       }
     });
   }, [brain, onScrollToTop, onScrollToBottom, onScrollStop]);
-  useEffect38(() => {
+  useEffect39(() => {
     if (!bodySize.height) {
       return;
     }
     actions.ready = true;
   }, [!!bodySize.height]);
-  useEffect38(() => {
+  useEffect39(() => {
     if (!ready) {
     }
     const { onReady } = getState();
@@ -32335,6 +32443,8 @@ function useCellRendering(param) {
         rowClassName,
         cellStyle,
         cellClassName,
+        // the column-level key wins over the table-level one
+        repaintCellsKey: column.repaintCellsKey !== void 0 ? column.repaintCellsKey : repaintCellsKey,
         visibleColumnIds,
         computedColumnOrder,
         // Whether this specific cell is in edit mode
@@ -32376,6 +32486,7 @@ function useCellRendering(param) {
       rowClassName,
       cellClassName,
       cellStyle,
+      repaintCellsKey,
       getDataSourceState,
       dataSourceApi,
       dataSourceActions,
@@ -32431,7 +32542,7 @@ function useCellRendering(param) {
 }
 
 // src/components/InfiniteTable/hooks/useToggleWrapRowsHorizontally.ts
-import { useEffect as useEffect39 } from "react";
+import { useEffect as useEffect40 } from "react";
 function useToggleWrapRowsHorizontally() {
   const { state, getState, actions } = useInfiniteTableSelector((ctx) => {
     return {
@@ -32442,7 +32553,7 @@ function useToggleWrapRowsHorizontally() {
   });
   const { wrapRowsHorizontally } = state;
   const oldWrapRowsHorizontally = usePrevious(wrapRowsHorizontally);
-  useEffect39(() => {
+  useEffect40(() => {
     if (oldWrapRowsHorizontally !== wrapRowsHorizontally) {
       const { brain, headerBrain, renderer, onRenderUpdater } = getState();
       brain.destroy();
@@ -33279,7 +33390,7 @@ var keyboardShortcuts = {
 };
 
 // src/components/hooks/useInterceptedMap.ts
-import { useEffect as useEffect41 } from "react";
+import { useEffect as useEffect42 } from "react";
 function interceptMap(map2, fns) {
   const { set, delete: deleteKey, clear } = map2;
   if (fns.set) {
@@ -33441,7 +33552,7 @@ _WeakFixedSizeSet.DEFAULT_SIZE = 10;
 var WeakFixedSizeSet = _WeakFixedSizeSet;
 
 // src/components/hooks/useEffectWhenSameDeps.ts
-import { useEffect as useEffect42, useRef as useRef34 } from "react";
+import { useEffect as useEffect43, useRef as useRef34 } from "react";
 var isSameDeps = (deps, prevDeps) => {
   return deps.every((dep, index) => dep === prevDeps[index]);
 };
@@ -33455,7 +33566,7 @@ var useEffectWhenSameDeps = (callback, deps) => {
   effectDepsRef.current = effectDeps;
   const callbackRef = useRef34(callback);
   callbackRef.current = callback;
-  useEffect42(() => {
+  useEffect43(() => {
     if (isInitialRef.current) {
       isInitialRef.current = false;
       return;
@@ -33465,7 +33576,7 @@ var useEffectWhenSameDeps = (callback, deps) => {
 };
 
 // src/components/hooks/useEffectWhen.ts
-import { useEffect as useEffect43, useRef as useRef35 } from "react";
+import { useEffect as useEffect44, useRef as useRef35 } from "react";
 var isSameDeps2 = (deps, prevDeps, compare) => {
   return deps.every((dep, index) => {
     if (compare) {
@@ -33495,7 +33606,7 @@ var useEffectWhen = (callback, options) => {
   if (sameRespected && differentRespected) {
     isInitialRef.current = false;
   }
-  useEffect43(() => {
+  useEffect44(() => {
     if (isInitialRef.current) {
       return;
     }
@@ -33609,11 +33720,11 @@ var FlashingColumnCell = createFlashingColumnCellComponent();
 
 // src/components/HeadlessTable/MatrixDebugger.tsx
 import * as React83 from "react";
-import { useEffect as useEffect44, useRef as useRef37 } from "react";
+import { useEffect as useEffect45, useRef as useRef37 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 function INTERNAL_MatrixDebugger(props) {
   const [getState, setGetState] = React83.useState(null);
-  useEffect44(() => {
+  useEffect45(() => {
     const { debugTarget } = props;
     const intervalId = setInterval(() => {
       if (globalThis.INFINITE && globalThis.INFINITE[debugTarget]) {
@@ -33636,7 +33747,7 @@ function MatrixDebuggerUI() {
   const { getState } = contextValue;
   const [, rerender] = useRerender();
   const cellManager = getState().renderer.cellManager;
-  useEffect44(() => {
+  useEffect45(() => {
     const delayedRerender = debounce(
       () => {
         console.log("rerender");