@infinite-table/infinite-react 0.4.8 → 0.4.11

package/index.d.ts

@@ -663,9 +663,11 @@ declare type RowSelectionStateObject = {
 declare type RowSelectionStateConfig<T> = {
     groupBy: DataSourceState<T>['groupBy'];
     groupDeepMap: DataSourceState<T>['groupDeepMap'];
+    toPrimaryKey: DataSourceState<T>['toPrimaryKey'];
     totalCount: number;
     indexer: DataSourceState<T>['indexer'];
     lazyLoad: boolean;
+    onlyUsePrimaryKeys: boolean;
 };
 declare type GetRowSelectionStateConfig<T> = () => RowSelectionStateConfig<T>;
 declare type RowSelectionStateOverrideForTesting = {
@@ -673,6 +675,7 @@ declare type RowSelectionStateOverrideForTesting = {
     getGroupByLength: RowSelectionState<any>['getGroupByLength'];
     getGroupCount: RowSelectionState<any>['getGroupCount'];
     getGroupKeysDirectlyInsideGroup: RowSelectionState<any>['getGroupKeysDirectlyInsideGroup'];
+    getAllPrimaryKeysInsideGroup: RowSelectionState<any>['getAllPrimaryKeysInsideGroup'];
 };
 declare class RowSelectionState<T = any> {
     selectedRows: RowSelectionStateItem | null;
@@ -680,6 +683,7 @@ declare class RowSelectionState<T = any> {
     defaultSelection: boolean;
     selectedMap: DeepMap<any, true>;
     deselectedMap: DeepMap<any, true>;
+    onlyUsePrimaryKeys: boolean;
     selectionCache: DeepMap<any, boolean | null>;
     selectionCountCache: DeepMap<any, {
         selectedCount: number;
@@ -690,6 +694,7 @@ declare class RowSelectionState<T = any> {
     getGroupDeepMap(): DeepMap<any, DeepMapGroupValueType<T, any>> | undefined;
     getGroupCount(groupKeys: any[]): number;
     getGroupKeysDirectlyInsideGroup(groupKeys: any[]): any[][];
+    getAllPrimaryKeysInsideGroup(groupKeys: any[]): any[];
     getGroupByLength(): number;
     static from<T>(rowSeleStateObject: RowSelectionStateObject, getConfig: GetRowSelectionStateConfig<T>, _forTestingOnly?: RowSelectionStateOverrideForTesting): RowSelectionState<T>;
     constructor(state: RowSelectionStateObject | RowSelectionState, getConfig: GetRowSelectionStateConfig<T>, _forTestingOnly?: RowSelectionStateOverrideForTesting);
@@ -1155,6 +1160,7 @@ interface DataSourceMappedState<T> {
     livePagination: DataSourceProps<T>['livePagination'];
     isRowSelected: DataSourceProps<T>['isRowSelected'];
     lazyLoad: DataSourceProps<T>['lazyLoad'];
+    useGroupKeysForMultiRowSelection: NonUndefined<DataSourceProps<T>['useGroupKeysForMultiRowSelection']>;
     onDataParamsChange: DataSourceProps<T>['onDataParamsChange'];
     data: DataSourceProps<T>['data'];
     sortMode: DataSourceProps<T>['sortMode'];
@@ -1164,7 +1170,6 @@ interface DataSourceMappedState<T> {
     primaryKey: DataSourceProps<T>['primaryKey'];
     filterDelay: NonUndefined<DataSourceProps<T>['filterDelay']>;
     groupBy: NonUndefined<DataSourceProps<T>['groupBy']>;
-    groupRowsState: GroupRowsState<T>;
     pivotBy: DataSourceProps<T>['pivotBy'];
     loading: NonUndefined<DataSourceProps<T>['loading']>;
     sortTypes: NonUndefined<DataSourceProps<T>['sortTypes']>;
@@ -1267,6 +1272,7 @@ declare type DataSourceProps<T> = {
     fields?: (keyof T)[];
     data: DataSourceData<T>;
     selectionMode?: DataSourcePropSelectionMode;
+    useGroupKeysForMultiRowSelection?: boolean;
     rowSelection?: DataSourcePropRowSelection_MultiRow | DataSourcePropRowSelection_SingleRow;
     defaultRowSelection?: DataSourcePropRowSelection_MultiRow | DataSourcePropRowSelection_SingleRow;
     cellSelection?: DataSourcePropCellSelection;
@@ -1377,6 +1383,7 @@ declare type DataSourceDerivedState<T> = {
     toPrimaryKey: (data: T) => any;
     operatorsByFilterType: Record<string, Record<string, DataSourceFilterOperator<T>>>;
     filterMode: NonUndefined<DataSourceProps<T>['filterMode']>;
+    groupRowsState: GroupRowsState<T>;
     multiSort: boolean;
     controlledSort: boolean;
     controlledFilter: boolean;

package/index.esm.js

@@ -4360,6 +4360,10 @@ function useCellClassName(column, baseClasses, variants, extraFlags) {
   if (extraFlags.rowSelected) {
     result.push(...baseClasses.map((c) => `${c}--row-selected`));
   }
+  if (extraFlags.groupRow) {
+    result.push(...baseClasses.map((c) => `${c}--group-row`));
+    result.push(...baseClasses.map((c) => `${c}--${extraFlags.rowExpanded ? "group-row-expanded" : "group-row-collapsed"}`));
+  }
   if (column.computedPinned) {
     result.push(...baseClasses.map((c) => `${c}--pinned-${column.computedPinned}`));
   } else {
@@ -5906,7 +5910,14 @@ function InfiniteTableColumnCellFn(props) {
     onClick,
     onMouseDown,
     cssEllipsis: (_a = column.cssEllipsis) != null ? _a : true,
-    className: join(useCellClassName(column, [InfiniteTableColumnCellClassName, InfiniteTableCellClassName], ColumnCellRecipe, { dragging: false, zebra, rowActive, rowSelected }), colClassName, rowComputedClassName),
+    className: join(useCellClassName(column, [InfiniteTableColumnCellClassName, InfiniteTableCellClassName], ColumnCellRecipe, {
+      dragging: false,
+      zebra,
+      rowActive,
+      rowSelected,
+      groupRow: rowInfo.isGroupRow,
+      rowExpanded: rowInfo.isGroupRow ? !rowInfo.collapsed : false
+    }), colClassName, rowComputedClassName),
     renderChildren
   };
   return /* @__PURE__ */ createElement18(InfiniteTableCell, __spreadValues({}, cellProps));
@@ -6954,7 +6965,9 @@ function InfiniteTableHeaderCell(props) {
       dragging,
       rowSelected: false,
       zebra: false,
-      rowActive: false
+      rowActive: false,
+      groupRow: false,
+      rowExpanded: false
     }), CellCls),
     cssEllipsis: (_e = (_d = column.headerCssEllipsis) != null ? _d : column.cssEllipsis) != null ? _e : true,
     afterChildren: /* @__PURE__ */ createElement25(Fragment3, null, showColumnFilters ? column.computedFilterable ? /* @__PURE__ */ createElement25(InfiniteTableColumnHeaderFilter, {
@@ -7696,6 +7709,14 @@ function lazyGroup(groupParams, rootData) {
     if (currentGroupKeys.length == groupBy.length && groupBy.length) {
       if (current) {
         current.items = dataArray;
+        for (let i = 0, len = currentGroupKeys.length; i < len; i++) {
+          const currentKeys = currentGroupKeys.slice(0, i);
+          const deepMapGroupValue = deepMap.get(currentKeys);
+          if (deepMapGroupValue) {
+            deepMapGroupValue.items = deepMapGroupValue.items || [];
+            deepMapGroupValue.items = deepMapGroupValue.items.concat(dataArray);
+          }
+        }
         indexer.indexArray(dataArray, toPrimaryKey);
       }
       return next == null ? void 0 : next();
@@ -7716,7 +7737,7 @@ function lazyGroup(groupParams, rootData) {
         continue;
       }
       const dataObject = dataArray[i].data;
-      const dataKeys = dataArray[i].keys;
+      const dataKeys = dataArray[i].keys || [];
       if (dataKeys.length) {
         const key = dataKeys[dataKeys.length - 1];
         currentGroupKeys.push(key);
@@ -7894,7 +7915,7 @@ function flatten(groupResult) {
 }
 function getEnhancedGroupData(options, deepMapValue) {
   var _a;
-  const { groupBy, groupKeys, collapsed, parents, reducers, lazyLoad } = options;
+  const { groupBy, groupKeys, parents, reducers, lazyLoad } = options;
   const groupNesting = groupKeys.length;
   const {
     items: groupItems,
@@ -7929,7 +7950,7 @@ function getEnhancedGroupData(options, deepMapValue) {
     selectedChildredCount: 0,
     deselectedChildredCount: 0,
     id: `${groupKeys}`,
-    collapsed,
+    collapsed: false,
     dataSourceHasGrouping: true,
     selfLoaded,
     error: options.error,
@@ -7988,7 +8009,7 @@ function enhancedFlatten(param) {
     var _a, _b;
     const items = deepMapValue.items;
     const groupNesting = groupKeys.length;
-    const collapsed = (_a = groupRowsState == null ? void 0 : groupRowsState.isGroupRowCollapsed(groupKeys)) != null ? _a : false;
+    let collapsed = (_a = groupRowsState == null ? void 0 : groupRowsState.isGroupRowCollapsed(groupKeys)) != null ? _a : false;
     indexInParentGroups.push(indexInGroup);
     const enhancedGroupData = getEnhancedGroupData({
       lazyLoad,
@@ -8001,11 +8022,10 @@ function enhancedFlatten(param) {
       groupKeys,
       error: deepMapValue.error,
       totalChildrenCount: deepMapValue.totalChildrenCount,
-      childrenLoading: deepMapValue.childrenLoading,
+      childrenLoading: (deepMapValue.childrenLoading || !collapsed && !deepMapValue.childrenAvailable) && lazyLoad,
       childrenAvailable: deepMapValue.childrenAvailable,
       directChildrenCount: groupKeys.length === groupByStrings.length ? deepMapValue.items.length : deepMap.getDirectChildrenSizeFor(groupKeys),
-      directChildrenLoadedCount: 0,
-      collapsed
+      directChildrenLoadedCount: 0
     }, deepMapValue);
     if (isRowSelected) {
       enhancedGroupData.rowSelected = isRowSelected(enhancedGroupData);
@@ -8017,6 +8037,10 @@ function enhancedFlatten(param) {
     }
     const parent = parents[parents.length - 1];
     const parentCollapsed = (_b = parent == null ? void 0 : parent.collapsed) != null ? _b : false;
+    if (parentCollapsed) {
+      collapsed = true;
+    }
+    enhancedGroupData.collapsed = collapsed;
     let include = generateGroupRows || collapsed;
     if (parentCollapsed) {
       include = false;
@@ -8024,27 +8048,16 @@ function enhancedFlatten(param) {
     if (include) {
       result.push(enhancedGroupData);
     }
-    if (collapsed) {
-      enhancedGroupData.collapsedChildrenCount = enhancedGroupData.groupCount;
-      parents.forEach((parent2) => {
-        if (!parentCollapsed) {
-          parent2.deepRowInfoArray.push(enhancedGroupData);
-        }
-        parent2.collapsedChildrenCount += enhancedGroupData.groupCount;
-        parent2.collapsedGroupsCount += 1;
-      });
-    } else {
-      if (!parentCollapsed) {
-        parents.forEach((parent2) => {
-          parent2.deepRowInfoArray.push(enhancedGroupData);
-        });
-      }
-    }
+    enhancedGroupData.collapsedChildrenCount = 0;
+    parents.forEach((parent2) => {
+      parent2.deepRowInfoArray.push(enhancedGroupData);
+      parent2.collapsedGroupsCount += collapsed ? 1 : 0;
+    });
     if (parent && enhancedGroupData.selfLoaded && lazyLoad) {
       parent.directChildrenLoadedCount += 1;
     }
     parents.push(enhancedGroupData);
-    const continueWithChildren = !collapsed || lazyLoad;
+    const continueWithChildren = true;
     if (continueWithChildren) {
       if (!next) {
         if (!pivot) {
@@ -8082,9 +8095,10 @@ function enhancedFlatten(param) {
               if (last && item) {
                 parent2.directChildrenLoadedCount += 1;
               }
-              if (!parentCollapsed) {
-                parent2.deepRowInfoArray.push(rowInfo);
+              if (collapsed) {
+                parent2.collapsedChildrenCount += 1;
               }
+              parent2.deepRowInfoArray.push(rowInfo);
             });
             if (!collapsed) {
               result[startIndex + index] = rowInfo;
@@ -8753,8 +8767,10 @@ function useLazyLoadRange() {
   const {
     lazyLoadBatchSize,
     lazyLoad,
+    originalLazyGroupDataChangeDetect,
     notifyRenderRangeChange,
     dataArray,
+    groupRowsState,
     scrollStopDelayUpdatedByTable
   } = componentState;
   const latestRenderRangeRef = useRef18(null);
@@ -8783,20 +8799,27 @@ function useLazyLoadRange() {
     }, cache);
   };
   const debouncedLoadRange = useMemo7(() => debounce(loadRange, { wait: scrollStopDelayUpdatedByTable }), [scrollStopDelayUpdatedByTable]);
-  useEffect17(() => {
+  useEffectWithChanges((changes) => {
     if (lazyLoad) {
+      if (changes.originalLazyGroupDataChangeDetect || changes.groupRowsState) {
+        loadRange(notifyRenderRangeChange.get());
+      }
       return notifyRenderRangeChange.onChange((renderRange) => {
         latestRenderRangeRef.current = renderRange;
         loadRange(renderRange);
       });
     }
     return;
-  }, [lazyLoadBatchSize, lazyLoad]);
+  }, {
+    lazyLoadBatchSize,
+    lazyLoad,
+    originalLazyGroupDataChangeDetect,
+    groupRowsState
+  });
   useEffect17(() => {
     if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
       debouncedLoadRange();
     }
-    return;
   }, [dataArray]);
 }
 function lazyLoadRange(options, cache) {
@@ -8894,11 +8917,16 @@ var RowSelectionState = class {
     this.defaultSelection = false;
     this.selectedMap = new DeepMap();
     this.deselectedMap = new DeepMap();
+    this.onlyUsePrimaryKeys = false;
     this.selectionCache = new DeepMap();
     this.selectionCountCache = new DeepMap();
     this.mapSet = (name, key) => {
       if (!Array.isArray(key)) {
-        key = [...this.getGroupKeysForPrimaryKey(key), key];
+        if (this.onlyUsePrimaryKeys) {
+          key = [key];
+        } else {
+          key = [...this.getGroupKeysForPrimaryKey(key), key];
+        }
       }
       this.xcache();
       if (name === "selected") {
@@ -8915,6 +8943,7 @@ var RowSelectionState = class {
     };
     const stateObject = state instanceof Object.getPrototypeOf(this).constructor ? state.getState() : state;
     this.getConfig = getConfig;
+    this.onlyUsePrimaryKeys = getConfig().onlyUsePrimaryKeys;
     if (_forTestingOnly) {
       Object.assign(this, _forTestingOnly);
     }
@@ -8944,6 +8973,15 @@ var RowSelectionState = class {
     const { groupDeepMap } = this.getConfig();
     return (groupDeepMap == null ? void 0 : groupDeepMap.getKeysStartingWith(groupKeys, true, 1)) || [];
   }
+  getAllPrimaryKeysInsideGroup(groupKeys) {
+    const { groupDeepMap } = this.getConfig();
+    if (!groupKeys.length) {
+      const topLevelKeys = (groupDeepMap == null ? void 0 : groupDeepMap.getKeysStartingWith([], true, 1)) || [];
+      return topLevelKeys.map((groupKeys2) => this.getAllPrimaryKeysInsideGroup(groupKeys2)).flat();
+    }
+    const group2 = groupDeepMap == null ? void 0 : groupDeepMap.get(groupKeys);
+    return group2 ? group2.items.map(this.getConfig().toPrimaryKey) : [];
+  }
   getGroupByLength() {
     return this.getConfig().groupBy.length;
   }
@@ -8968,7 +9006,12 @@ var RowSelectionState = class {
   getState() {
     const normalize = (allKeys) => {
       const groupByLength = this.getGroupByLength();
-      return allKeys.map((keys) => keys.length > groupByLength ? keys.pop() : keys);
+      return allKeys.map((keys) => {
+        if (this.onlyUsePrimaryKeys) {
+          return keys[0];
+        }
+        return keys.length > groupByLength ? keys.pop() : keys;
+      });
     };
     const selectedRows = normalize(this.selectedMap.topDownKeys());
     const deselectedRows = normalize(this.deselectedMap.topDownKeys());
@@ -8999,6 +9042,9 @@ var RowSelectionState = class {
     return this.defaultSelection === false;
   }
   isRowSelected(key, groupKeys) {
+    if (this.onlyUsePrimaryKeys) {
+      return this.defaultSelection ? !this.deselectedMap.has([key]) : this.selectedMap.has([key]);
+    }
     groupKeys = groupKeys || this.getGroupKeysForPrimaryKey(key);
     const finalKey = [...groupKeys, key];
     const cachedResult = this.selectionCache.get(finalKey);
@@ -9055,7 +9101,7 @@ var RowSelectionState = class {
     if (cachedResult !== void 0) {
       return cachedResult;
     }
-    const { selectedCount, deselectedCount } = this.getSelectionCountFor(initialGroupKeys, this.getGroupRowBooleanSelectionStateFromParent(initialGroupKeys));
+    const { selectedCount, deselectedCount } = this.getSelectionCountFor(initialGroupKeys, this.onlyUsePrimaryKeys ? void 0 : this.getGroupRowBooleanSelectionStateFromParent(initialGroupKeys));
     const result = selectedCount && deselectedCount ? null : selectedCount ? true : false;
     this.selectionCache.set(initialGroupKeys, result);
     return result;
@@ -9096,28 +9142,67 @@ var RowSelectionState = class {
     return this.getGroupRowSelectionState(groupKeys) === false;
   }
   selectGroupRow(groupKeys) {
+    if (this.onlyUsePrimaryKeys) {
+      const keys = this.getAllPrimaryKeysInsideGroup(groupKeys);
+      keys.forEach((key) => {
+        if (this.defaultSelection === true) {
+          this.deselectedMap.delete([key]);
+        } else {
+          this._selectedMapSet(key);
+        }
+      });
+      this.xcache();
+      return;
+    }
     const selectedKeys = this.selectedMap.getKeysStartingWith(groupKeys, true);
     selectedKeys.forEach((groupKeys2) => {
       this.selectedMap.delete(groupKeys2);
     });
-    this._selectedMapSet(groupKeys);
+    if (groupKeys.length === 1 && this.defaultSelection === true) {
+    } else {
+      this._selectedMapSet(groupKeys);
+    }
     const deselectedKeys = this.deselectedMap.getKeysStartingWith(groupKeys);
     deselectedKeys.forEach((groupKeys2) => {
       this.deselectedMap.delete(groupKeys2);
     });
   }
   deselectGroupRow(groupKeys) {
+    if (this.onlyUsePrimaryKeys) {
+      const keys = this.getAllPrimaryKeysInsideGroup(groupKeys);
+      keys.forEach((key) => {
+        if (this.defaultSelection === false) {
+          this.selectedMap.delete([key]);
+        } else {
+          this._deselectedMapSet(key);
+        }
+      });
+      this.xcache();
+      return;
+    }
     const deselectedKeys = this.deselectedMap.getKeysStartingWith(groupKeys, true);
     deselectedKeys.forEach((groupKeys2) => {
       this.deselectedMap.delete(groupKeys2);
     });
-    this._deselectedMapSet(groupKeys);
+    if (groupKeys.length === 1 && this.defaultSelection === false) {
+    } else {
+      this._deselectedMapSet(groupKeys);
+    }
     const selectedKeys = this.selectedMap.getKeysStartingWith(groupKeys);
     selectedKeys.forEach((groupKeys2) => {
       this.selectedMap.delete(groupKeys2);
     });
   }
   setRowAsSelected(key, groupKeys) {
+    if (this.onlyUsePrimaryKeys) {
+      if (this.defaultSelection) {
+        this.deselectedMap.delete([key]);
+      } else {
+        this._selectedMapSet(key);
+      }
+      this.xcache();
+      return;
+    }
     groupKeys = groupKeys || this.getGroupKeysForPrimaryKey(key);
     const finalKey = [...groupKeys, key];
     this.deselectedMap.delete(finalKey);
@@ -9130,9 +9215,19 @@ var RowSelectionState = class {
     }
   }
   setRowAsDeselected(key, groupKeys) {
+    if (this.onlyUsePrimaryKeys) {
+      if (this.defaultSelection) {
+        this._deselectedMapSet(key);
+      } else {
+        this.selectedMap.delete([key]);
+      }
+      this.xcache();
+      return;
+    }
     groupKeys = groupKeys || this.getGroupKeysForPrimaryKey(key);
     const finalKey = [...groupKeys, key];
     this.selectedMap.delete(finalKey);
+    this.xcache();
     if (this.getGroupRowSelectionState(groupKeys) !== false) {
       this._deselectedMapSet(finalKey);
       if (this.getGroupRowSelectionState(groupKeys) === false) {
@@ -9173,7 +9268,8 @@ var RowSelectionState = class {
     if (cachedResult != null) {
       return cachedResult;
     }
-    if (groupKeys.length > this.getGroupByLength()) {
+    const groupByLength = this.getGroupByLength();
+    if (groupKeys.length > groupByLength) {
       const result2 = this.isRowSelected(groupKeys) ? { selectedCount: 1, deselectedCount: 0 } : {
         selectedCount: 0,
         deselectedCount: 1
@@ -9181,6 +9277,32 @@ var RowSelectionState = class {
       this.selectionCountCache.set(groupKeys, result2);
       return result2;
     }
+    if (groupByLength && this.onlyUsePrimaryKeys) {
+      const allKeys2 = this.getAllPrimaryKeysInsideGroup(groupKeys);
+      let selectedCount2 = 0;
+      let deselectedCount2 = 0;
+      allKeys2.forEach((key) => {
+        if (this.defaultSelection) {
+          if (this.deselectedMap.has([key])) {
+            deselectedCount2++;
+            return;
+          }
+          selectedCount2++;
+        } else {
+          if (this.selectedMap.has([key])) {
+            selectedCount2++;
+            return;
+          }
+          deselectedCount2++;
+        }
+      });
+      const result2 = {
+        selectedCount: selectedCount2,
+        deselectedCount: deselectedCount2
+      };
+      this.selectionCountCache.set(groupKeys, result2);
+      return result2;
+    }
     parentSelected = parentSelected != null ? parentSelected : this.getGroupRowBooleanSelectionStateFromParent(groupKeys);
     let allKeys = this.getGroupKeysDirectlyInsideGroup(groupKeys);
     if (groupKeys.length === this.getGroupByLength()) {
@@ -9237,6 +9359,8 @@ function rowSelectionStateConfigGetter(stateOrStateGetter) {
     const state = typeof stateOrStateGetter === "function" ? stateOrStateGetter() : stateOrStateGetter;
     return {
       lazyLoad: !!state.lazyLoad,
+      toPrimaryKey: state.toPrimaryKey,
+      onlyUsePrimaryKeys: !state.useGroupKeysForMultiRowSelection,
       groupBy: state.groupBy,
       groupDeepMap: state.groupDeepMap,
       indexer: state.indexer,
@@ -9391,18 +9515,20 @@ function getSelectionApi(param) {
       rowSelectionState.toggleGroupRowSelection(groupKeys);
       dataSourceActions.rowSelection = rowSelectionState;
     },
-    getGroupRowSelectionState(groupKeys) {
-      const { selectionMode, rowSelection, groupBy } = getDataSourceState();
+    getGroupRowSelectionState(groupKeys, rowSelection) {
+      const state = getDataSourceState();
+      const { selectionMode, groupBy } = state;
+      const rowSelectionState = rowSelection ? new RowSelectionState(rowSelection, rowSelectionStateConfigGetter(state)) : state.rowSelection;
       if (selectionMode !== "multi-row") {
         throw 'Selection mode should be "multi-row"';
       }
       if (!groupBy) {
         throw "No grouping specified";
       }
-      if (!(rowSelection instanceof RowSelectionState)) {
+      if (!(rowSelectionState instanceof RowSelectionState)) {
         throw "Invalid row selection";
       }
-      return rowSelection.getGroupRowSelectionState(groupKeys);
+      return rowSelectionState.getGroupRowSelectionState(groupKeys);
     },
     getSelectedPrimaryKeys: (rowSelection) => {
       const state = getDataSourceState();
@@ -9556,6 +9682,7 @@ var forwardProps3 = (setupState) => {
     livePagination: 1,
     filterFunction: 1,
     filterValue: 1,
+    useGroupKeysForMultiRowSelection: (useGroupKeysForMultiRowSelection) => useGroupKeysForMultiRowSelection != null ? useGroupKeysForMultiRowSelection : false,
     filterDelay: (filterDelay) => filterDelay != null ? filterDelay : 200,
     filterTypes: (filterTypes) => {
       return __spreadValues(__spreadValues({}, defaultFilterTypes), filterTypes);
@@ -9569,16 +9696,7 @@ var forwardProps3 = (setupState) => {
     collapseGroupRowsOnDataFunctionChange: (collapseGroupRowsOnDataFunctionChange) => collapseGroupRowsOnDataFunctionChange != null ? collapseGroupRowsOnDataFunctionChange : true,
     loading: (loading) => loading != null ? loading : false,
     sortInfo: (sortInfo) => normalizeSortInfo(sortInfo, setupState.propsCache.get("sortInfo")),
-    groupBy: (groupBy) => groupBy != null ? groupBy : [],
-    groupRowsState: (groupRowsState) => {
-      if (groupRowsState && !(groupRowsState instanceof GroupRowsState)) {
-        groupRowsState = new GroupRowsState(groupRowsState);
-      }
-      return groupRowsState || new GroupRowsState({
-        expandedRows: true,
-        collapsedRows: []
-      });
-    }
+    groupBy: (groupBy) => groupBy != null ? groupBy : []
   };
 };
 function getLivePaginationCursorValue(livePaginationCursorProp, state) {
@@ -9637,8 +9755,17 @@ function mapPropsToState(params) {
   }
   const primaryKeyDescriptor = state.primaryKey;
   const toPrimaryKey = typeof primaryKeyDescriptor === "function" ? (data) => primaryKeyDescriptor(data) : (data) => data[primaryKeyDescriptor];
+  let groupRowsState = props.groupRowsState || state.groupRowsState || props.defaultGroupRowsState;
+  if (groupRowsState && !(groupRowsState instanceof GroupRowsState)) {
+    groupRowsState = new GroupRowsState(groupRowsState);
+  }
+  groupRowsState = groupRowsState || new GroupRowsState(state.lazyLoad ? { expandedRows: [], collapsedRows: true } : {
+    expandedRows: true,
+    collapsedRows: []
+  });
   const result = {
     selectionMode,
+    groupRowsState,
     rowSelection: rowSelectionState,
     toPrimaryKey,
     operatorsByFilterType,
@@ -10644,7 +10771,8 @@ function useCellRendering(param) {
     rowClassName,
     onScrollToTop,
     onScrollToBottom,
-    scrollToBottomOffset
+    scrollToBottomOffset,
+    ready
   } = componentState;
   const repaintId = dataSourceState.updatedAt;
   useYourBrain({
@@ -10685,12 +10813,16 @@ function useCellRendering(param) {
     if (!bodySize.height) {
       return;
     }
-    const { onReady } = getState();
     componentActions.ready = true;
+  }, [!!bodySize.height]);
+  useEffect19(() => {
+    if (!ready) {
+    }
+    const { onReady } = getState();
     if (onReady) {
       onReady(imperativeApi);
     }
-  }, [!!bodySize.height]);
+  }, [ready]);
   const [, rerender] = useRerender();
   useEffect19(() => {
     rerender();
@@ -12382,7 +12514,7 @@ var useLicense = (licenseKey = "") => {
   const valid = useMemo11(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.4.8"
+      version: "0.4.11"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -13301,3 +13433,4 @@ export {
   useInfiniteColumnCell,
   useInfiniteHeaderCell
 };
+//!collapsed || lazyLoad;

package/index.js

@@ -4323,6 +4323,10 @@ function useCellClassName(column, baseClasses, variants, extraFlags) {
   if (extraFlags.rowSelected) {
     result.push(...baseClasses.map((c) => `${c}--row-selected`));
   }
+  if (extraFlags.groupRow) {
+    result.push(...baseClasses.map((c) => `${c}--group-row`));
+    result.push(...baseClasses.map((c) => `${c}--${extraFlags.rowExpanded ? "group-row-expanded" : "group-row-collapsed"}`));
+  }
   if (column.computedPinned) {
     result.push(...baseClasses.map((c) => `${c}--pinned-${column.computedPinned}`));
   } else {
@@ -5849,7 +5853,14 @@ function InfiniteTableColumnCellFn(props) {
     onClick,
     onMouseDown,
     cssEllipsis: (_a = column.cssEllipsis) != null ? _a : true,
-    className: join(useCellClassName(column, [InfiniteTableColumnCellClassName, InfiniteTableCellClassName], ColumnCellRecipe, { dragging: false, zebra, rowActive, rowSelected }), colClassName, rowComputedClassName),
+    className: join(useCellClassName(column, [InfiniteTableColumnCellClassName, InfiniteTableCellClassName], ColumnCellRecipe, {
+      dragging: false,
+      zebra,
+      rowActive,
+      rowSelected,
+      groupRow: rowInfo.isGroupRow,
+      rowExpanded: rowInfo.isGroupRow ? !rowInfo.collapsed : false
+    }), colClassName, rowComputedClassName),
     renderChildren
   };
   return /* @__PURE__ */ React21.createElement(InfiniteTableCell, __spreadValues({}, cellProps));
@@ -6886,7 +6897,9 @@ function InfiniteTableHeaderCell(props) {
       dragging,
       rowSelected: false,
       zebra: false,
-      rowActive: false
+      rowActive: false,
+      groupRow: false,
+      rowExpanded: false
     }), CellCls),
     cssEllipsis: (_e = (_d = column.headerCssEllipsis) != null ? _d : column.cssEllipsis) != null ? _e : true,
     afterChildren: /* @__PURE__ */ React28.createElement(React28.Fragment, null, showColumnFilters ? column.computedFilterable ? /* @__PURE__ */ React28.createElement(InfiniteTableColumnHeaderFilter, {
@@ -7606,6 +7619,14 @@ function lazyGroup(groupParams, rootData) {
     if (currentGroupKeys.length == groupBy.length && groupBy.length) {
       if (current) {
         current.items = dataArray;
+        for (let i = 0, len = currentGroupKeys.length; i < len; i++) {
+          const currentKeys = currentGroupKeys.slice(0, i);
+          const deepMapGroupValue = deepMap.get(currentKeys);
+          if (deepMapGroupValue) {
+            deepMapGroupValue.items = deepMapGroupValue.items || [];
+            deepMapGroupValue.items = deepMapGroupValue.items.concat(dataArray);
+          }
+        }
         indexer.indexArray(dataArray, toPrimaryKey);
       }
       return next == null ? void 0 : next();
@@ -7626,7 +7647,7 @@ function lazyGroup(groupParams, rootData) {
         continue;
       }
       const dataObject = dataArray[i].data;
-      const dataKeys = dataArray[i].keys;
+      const dataKeys = dataArray[i].keys || [];
       if (dataKeys.length) {
         const key = dataKeys[dataKeys.length - 1];
         currentGroupKeys.push(key);
@@ -7804,7 +7825,7 @@ function flatten(groupResult) {
 }
 function getEnhancedGroupData(options, deepMapValue) {
   var _a;
-  const { groupBy, groupKeys, collapsed, parents, reducers, lazyLoad } = options;
+  const { groupBy, groupKeys, parents, reducers, lazyLoad } = options;
   const groupNesting = groupKeys.length;
   const {
     items: groupItems,
@@ -7839,7 +7860,7 @@ function getEnhancedGroupData(options, deepMapValue) {
     selectedChildredCount: 0,
     deselectedChildredCount: 0,
     id: `${groupKeys}`,
-    collapsed,
+    collapsed: false,
     dataSourceHasGrouping: true,
     selfLoaded,
     error: options.error,
@@ -7898,7 +7919,7 @@ function enhancedFlatten(param) {
     var _a, _b;
     const items = deepMapValue.items;
     const groupNesting = groupKeys.length;
-    const collapsed = (_a = groupRowsState == null ? void 0 : groupRowsState.isGroupRowCollapsed(groupKeys)) != null ? _a : false;
+    let collapsed = (_a = groupRowsState == null ? void 0 : groupRowsState.isGroupRowCollapsed(groupKeys)) != null ? _a : false;
     indexInParentGroups.push(indexInGroup);
     const enhancedGroupData = getEnhancedGroupData({
       lazyLoad,
@@ -7911,11 +7932,10 @@ function enhancedFlatten(param) {
       groupKeys,
       error: deepMapValue.error,
       totalChildrenCount: deepMapValue.totalChildrenCount,
-      childrenLoading: deepMapValue.childrenLoading,
+      childrenLoading: (deepMapValue.childrenLoading || !collapsed && !deepMapValue.childrenAvailable) && lazyLoad,
       childrenAvailable: deepMapValue.childrenAvailable,
       directChildrenCount: groupKeys.length === groupByStrings.length ? deepMapValue.items.length : deepMap.getDirectChildrenSizeFor(groupKeys),
-      directChildrenLoadedCount: 0,
-      collapsed
+      directChildrenLoadedCount: 0
     }, deepMapValue);
     if (isRowSelected) {
       enhancedGroupData.rowSelected = isRowSelected(enhancedGroupData);
@@ -7927,6 +7947,10 @@ function enhancedFlatten(param) {
     }
     const parent = parents[parents.length - 1];
     const parentCollapsed = (_b = parent == null ? void 0 : parent.collapsed) != null ? _b : false;
+    if (parentCollapsed) {
+      collapsed = true;
+    }
+    enhancedGroupData.collapsed = collapsed;
     let include = generateGroupRows || collapsed;
     if (parentCollapsed) {
       include = false;
@@ -7934,27 +7958,16 @@ function enhancedFlatten(param) {
     if (include) {
       result.push(enhancedGroupData);
     }
-    if (collapsed) {
-      enhancedGroupData.collapsedChildrenCount = enhancedGroupData.groupCount;
-      parents.forEach((parent2) => {
-        if (!parentCollapsed) {
-          parent2.deepRowInfoArray.push(enhancedGroupData);
-        }
-        parent2.collapsedChildrenCount += enhancedGroupData.groupCount;
-        parent2.collapsedGroupsCount += 1;
-      });
-    } else {
-      if (!parentCollapsed) {
-        parents.forEach((parent2) => {
-          parent2.deepRowInfoArray.push(enhancedGroupData);
-        });
-      }
-    }
+    enhancedGroupData.collapsedChildrenCount = 0;
+    parents.forEach((parent2) => {
+      parent2.deepRowInfoArray.push(enhancedGroupData);
+      parent2.collapsedGroupsCount += collapsed ? 1 : 0;
+    });
     if (parent && enhancedGroupData.selfLoaded && lazyLoad) {
       parent.directChildrenLoadedCount += 1;
     }
     parents.push(enhancedGroupData);
-    const continueWithChildren = !collapsed || lazyLoad;
+    const continueWithChildren = true;
     if (continueWithChildren) {
       if (!next) {
         if (!pivot) {
@@ -7992,9 +8005,10 @@ function enhancedFlatten(param) {
               if (last && item) {
                 parent2.directChildrenLoadedCount += 1;
               }
-              if (!parentCollapsed) {
-                parent2.deepRowInfoArray.push(rowInfo);
+              if (collapsed) {
+                parent2.collapsedChildrenCount += 1;
               }
+              parent2.deepRowInfoArray.push(rowInfo);
             });
             if (!collapsed) {
               result[startIndex + index] = rowInfo;
@@ -8660,8 +8674,10 @@ function useLazyLoadRange() {
   const {
     lazyLoadBatchSize,
     lazyLoad,
+    originalLazyGroupDataChangeDetect,
     notifyRenderRangeChange,
     dataArray,
+    groupRowsState,
     scrollStopDelayUpdatedByTable
   } = componentState;
   const latestRenderRangeRef = (0, import_react30.useRef)(null);
@@ -8690,20 +8706,27 @@ function useLazyLoadRange() {
     }, cache);
   };
   const debouncedLoadRange = (0, import_react30.useMemo)(() => debounce(loadRange, { wait: scrollStopDelayUpdatedByTable }), [scrollStopDelayUpdatedByTable]);
-  (0, import_react30.useEffect)(() => {
+  useEffectWithChanges((changes) => {
     if (lazyLoad) {
+      if (changes.originalLazyGroupDataChangeDetect || changes.groupRowsState) {
+        loadRange(notifyRenderRangeChange.get());
+      }
       return notifyRenderRangeChange.onChange((renderRange) => {
         latestRenderRangeRef.current = renderRange;
         loadRange(renderRange);
       });
     }
     return;
-  }, [lazyLoadBatchSize, lazyLoad]);
+  }, {
+    lazyLoadBatchSize,
+    lazyLoad,
+    originalLazyGroupDataChangeDetect,
+    groupRowsState
+  });
   (0, import_react30.useEffect)(() => {
     if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
       debouncedLoadRange();
     }
-    return;
   }, [dataArray]);
 }
 function lazyLoadRange(options, cache) {
@@ -8801,11 +8824,16 @@ var RowSelectionState = class {
     this.defaultSelection = false;
     this.selectedMap = new DeepMap();
     this.deselectedMap = new DeepMap();
+    this.onlyUsePrimaryKeys = false;
     this.selectionCache = new DeepMap();
     this.selectionCountCache = new DeepMap();
     this.mapSet = (name, key) => {
       if (!Array.isArray(key)) {
-        key = [...this.getGroupKeysForPrimaryKey(key), key];
+        if (this.onlyUsePrimaryKeys) {
+          key = [key];
+        } else {
+          key = [...this.getGroupKeysForPrimaryKey(key), key];
+        }
       }
       this.xcache();
       if (name === "selected") {
@@ -8822,6 +8850,7 @@ var RowSelectionState = class {
     };
     const stateObject = state instanceof Object.getPrototypeOf(this).constructor ? state.getState() : state;
     this.getConfig = getConfig;
+    this.onlyUsePrimaryKeys = getConfig().onlyUsePrimaryKeys;
     if (_forTestingOnly) {
       Object.assign(this, _forTestingOnly);
     }
@@ -8851,6 +8880,15 @@ var RowSelectionState = class {
     const { groupDeepMap } = this.getConfig();
     return (groupDeepMap == null ? void 0 : groupDeepMap.getKeysStartingWith(groupKeys, true, 1)) || [];
   }
+  getAllPrimaryKeysInsideGroup(groupKeys) {
+    const { groupDeepMap } = this.getConfig();
+    if (!groupKeys.length) {
+      const topLevelKeys = (groupDeepMap == null ? void 0 : groupDeepMap.getKeysStartingWith([], true, 1)) || [];
+      return topLevelKeys.map((groupKeys2) => this.getAllPrimaryKeysInsideGroup(groupKeys2)).flat();
+    }
+    const group2 = groupDeepMap == null ? void 0 : groupDeepMap.get(groupKeys);
+    return group2 ? group2.items.map(this.getConfig().toPrimaryKey) : [];
+  }
   getGroupByLength() {
     return this.getConfig().groupBy.length;
   }
@@ -8875,7 +8913,12 @@ var RowSelectionState = class {
   getState() {
     const normalize = (allKeys) => {
       const groupByLength = this.getGroupByLength();
-      return allKeys.map((keys) => keys.length > groupByLength ? keys.pop() : keys);
+      return allKeys.map((keys) => {
+        if (this.onlyUsePrimaryKeys) {
+          return keys[0];
+        }
+        return keys.length > groupByLength ? keys.pop() : keys;
+      });
     };
     const selectedRows = normalize(this.selectedMap.topDownKeys());
     const deselectedRows = normalize(this.deselectedMap.topDownKeys());
@@ -8906,6 +8949,9 @@ var RowSelectionState = class {
     return this.defaultSelection === false;
   }
   isRowSelected(key, groupKeys) {
+    if (this.onlyUsePrimaryKeys) {
+      return this.defaultSelection ? !this.deselectedMap.has([key]) : this.selectedMap.has([key]);
+    }
     groupKeys = groupKeys || this.getGroupKeysForPrimaryKey(key);
     const finalKey = [...groupKeys, key];
     const cachedResult = this.selectionCache.get(finalKey);
@@ -8962,7 +9008,7 @@ var RowSelectionState = class {
     if (cachedResult !== void 0) {
       return cachedResult;
     }
-    const { selectedCount, deselectedCount } = this.getSelectionCountFor(initialGroupKeys, this.getGroupRowBooleanSelectionStateFromParent(initialGroupKeys));
+    const { selectedCount, deselectedCount } = this.getSelectionCountFor(initialGroupKeys, this.onlyUsePrimaryKeys ? void 0 : this.getGroupRowBooleanSelectionStateFromParent(initialGroupKeys));
     const result = selectedCount && deselectedCount ? null : selectedCount ? true : false;
     this.selectionCache.set(initialGroupKeys, result);
     return result;
@@ -9003,28 +9049,67 @@ var RowSelectionState = class {
     return this.getGroupRowSelectionState(groupKeys) === false;
   }
   selectGroupRow(groupKeys) {
+    if (this.onlyUsePrimaryKeys) {
+      const keys = this.getAllPrimaryKeysInsideGroup(groupKeys);
+      keys.forEach((key) => {
+        if (this.defaultSelection === true) {
+          this.deselectedMap.delete([key]);
+        } else {
+          this._selectedMapSet(key);
+        }
+      });
+      this.xcache();
+      return;
+    }
     const selectedKeys = this.selectedMap.getKeysStartingWith(groupKeys, true);
     selectedKeys.forEach((groupKeys2) => {
       this.selectedMap.delete(groupKeys2);
     });
-    this._selectedMapSet(groupKeys);
+    if (groupKeys.length === 1 && this.defaultSelection === true) {
+    } else {
+      this._selectedMapSet(groupKeys);
+    }
     const deselectedKeys = this.deselectedMap.getKeysStartingWith(groupKeys);
     deselectedKeys.forEach((groupKeys2) => {
       this.deselectedMap.delete(groupKeys2);
     });
   }
   deselectGroupRow(groupKeys) {
+    if (this.onlyUsePrimaryKeys) {
+      const keys = this.getAllPrimaryKeysInsideGroup(groupKeys);
+      keys.forEach((key) => {
+        if (this.defaultSelection === false) {
+          this.selectedMap.delete([key]);
+        } else {
+          this._deselectedMapSet(key);
+        }
+      });
+      this.xcache();
+      return;
+    }
     const deselectedKeys = this.deselectedMap.getKeysStartingWith(groupKeys, true);
     deselectedKeys.forEach((groupKeys2) => {
       this.deselectedMap.delete(groupKeys2);
     });
-    this._deselectedMapSet(groupKeys);
+    if (groupKeys.length === 1 && this.defaultSelection === false) {
+    } else {
+      this._deselectedMapSet(groupKeys);
+    }
     const selectedKeys = this.selectedMap.getKeysStartingWith(groupKeys);
     selectedKeys.forEach((groupKeys2) => {
       this.selectedMap.delete(groupKeys2);
     });
   }
   setRowAsSelected(key, groupKeys) {
+    if (this.onlyUsePrimaryKeys) {
+      if (this.defaultSelection) {
+        this.deselectedMap.delete([key]);
+      } else {
+        this._selectedMapSet(key);
+      }
+      this.xcache();
+      return;
+    }
     groupKeys = groupKeys || this.getGroupKeysForPrimaryKey(key);
     const finalKey = [...groupKeys, key];
     this.deselectedMap.delete(finalKey);
@@ -9037,9 +9122,19 @@ var RowSelectionState = class {
     }
   }
   setRowAsDeselected(key, groupKeys) {
+    if (this.onlyUsePrimaryKeys) {
+      if (this.defaultSelection) {
+        this._deselectedMapSet(key);
+      } else {
+        this.selectedMap.delete([key]);
+      }
+      this.xcache();
+      return;
+    }
     groupKeys = groupKeys || this.getGroupKeysForPrimaryKey(key);
     const finalKey = [...groupKeys, key];
     this.selectedMap.delete(finalKey);
+    this.xcache();
     if (this.getGroupRowSelectionState(groupKeys) !== false) {
       this._deselectedMapSet(finalKey);
       if (this.getGroupRowSelectionState(groupKeys) === false) {
@@ -9080,7 +9175,8 @@ var RowSelectionState = class {
     if (cachedResult != null) {
       return cachedResult;
     }
-    if (groupKeys.length > this.getGroupByLength()) {
+    const groupByLength = this.getGroupByLength();
+    if (groupKeys.length > groupByLength) {
       const result2 = this.isRowSelected(groupKeys) ? { selectedCount: 1, deselectedCount: 0 } : {
         selectedCount: 0,
         deselectedCount: 1
@@ -9088,6 +9184,32 @@ var RowSelectionState = class {
       this.selectionCountCache.set(groupKeys, result2);
       return result2;
     }
+    if (groupByLength && this.onlyUsePrimaryKeys) {
+      const allKeys2 = this.getAllPrimaryKeysInsideGroup(groupKeys);
+      let selectedCount2 = 0;
+      let deselectedCount2 = 0;
+      allKeys2.forEach((key) => {
+        if (this.defaultSelection) {
+          if (this.deselectedMap.has([key])) {
+            deselectedCount2++;
+            return;
+          }
+          selectedCount2++;
+        } else {
+          if (this.selectedMap.has([key])) {
+            selectedCount2++;
+            return;
+          }
+          deselectedCount2++;
+        }
+      });
+      const result2 = {
+        selectedCount: selectedCount2,
+        deselectedCount: deselectedCount2
+      };
+      this.selectionCountCache.set(groupKeys, result2);
+      return result2;
+    }
     parentSelected = parentSelected != null ? parentSelected : this.getGroupRowBooleanSelectionStateFromParent(groupKeys);
     let allKeys = this.getGroupKeysDirectlyInsideGroup(groupKeys);
     if (groupKeys.length === this.getGroupByLength()) {
@@ -9144,6 +9266,8 @@ function rowSelectionStateConfigGetter(stateOrStateGetter) {
     const state = typeof stateOrStateGetter === "function" ? stateOrStateGetter() : stateOrStateGetter;
     return {
       lazyLoad: !!state.lazyLoad,
+      toPrimaryKey: state.toPrimaryKey,
+      onlyUsePrimaryKeys: !state.useGroupKeysForMultiRowSelection,
       groupBy: state.groupBy,
       groupDeepMap: state.groupDeepMap,
       indexer: state.indexer,
@@ -9298,18 +9422,20 @@ function getSelectionApi(param) {
       rowSelectionState.toggleGroupRowSelection(groupKeys);
       dataSourceActions.rowSelection = rowSelectionState;
     },
-    getGroupRowSelectionState(groupKeys) {
-      const { selectionMode, rowSelection, groupBy } = getDataSourceState();
+    getGroupRowSelectionState(groupKeys, rowSelection) {
+      const state = getDataSourceState();
+      const { selectionMode, groupBy } = state;
+      const rowSelectionState = rowSelection ? new RowSelectionState(rowSelection, rowSelectionStateConfigGetter(state)) : state.rowSelection;
       if (selectionMode !== "multi-row") {
         throw 'Selection mode should be "multi-row"';
       }
       if (!groupBy) {
         throw "No grouping specified";
       }
-      if (!(rowSelection instanceof RowSelectionState)) {
+      if (!(rowSelectionState instanceof RowSelectionState)) {
         throw "Invalid row selection";
       }
-      return rowSelection.getGroupRowSelectionState(groupKeys);
+      return rowSelectionState.getGroupRowSelectionState(groupKeys);
     },
     getSelectedPrimaryKeys: (rowSelection) => {
       const state = getDataSourceState();
@@ -9463,6 +9589,7 @@ var forwardProps3 = (setupState) => {
     livePagination: 1,
     filterFunction: 1,
     filterValue: 1,
+    useGroupKeysForMultiRowSelection: (useGroupKeysForMultiRowSelection) => useGroupKeysForMultiRowSelection != null ? useGroupKeysForMultiRowSelection : false,
     filterDelay: (filterDelay) => filterDelay != null ? filterDelay : 200,
     filterTypes: (filterTypes) => {
       return __spreadValues(__spreadValues({}, defaultFilterTypes), filterTypes);
@@ -9476,16 +9603,7 @@ var forwardProps3 = (setupState) => {
     collapseGroupRowsOnDataFunctionChange: (collapseGroupRowsOnDataFunctionChange) => collapseGroupRowsOnDataFunctionChange != null ? collapseGroupRowsOnDataFunctionChange : true,
     loading: (loading) => loading != null ? loading : false,
     sortInfo: (sortInfo) => normalizeSortInfo(sortInfo, setupState.propsCache.get("sortInfo")),
-    groupBy: (groupBy) => groupBy != null ? groupBy : [],
-    groupRowsState: (groupRowsState) => {
-      if (groupRowsState && !(groupRowsState instanceof GroupRowsState)) {
-        groupRowsState = new GroupRowsState(groupRowsState);
-      }
-      return groupRowsState || new GroupRowsState({
-        expandedRows: true,
-        collapsedRows: []
-      });
-    }
+    groupBy: (groupBy) => groupBy != null ? groupBy : []
   };
 };
 function getLivePaginationCursorValue(livePaginationCursorProp, state) {
@@ -9544,8 +9662,17 @@ function mapPropsToState(params) {
   }
   const primaryKeyDescriptor = state.primaryKey;
   const toPrimaryKey = typeof primaryKeyDescriptor === "function" ? (data) => primaryKeyDescriptor(data) : (data) => data[primaryKeyDescriptor];
+  let groupRowsState = props.groupRowsState || state.groupRowsState || props.defaultGroupRowsState;
+  if (groupRowsState && !(groupRowsState instanceof GroupRowsState)) {
+    groupRowsState = new GroupRowsState(groupRowsState);
+  }
+  groupRowsState = groupRowsState || new GroupRowsState(state.lazyLoad ? { expandedRows: [], collapsedRows: true } : {
+    expandedRows: true,
+    collapsedRows: []
+  });
   const result = {
     selectionMode,
+    groupRowsState,
     rowSelection: rowSelectionState,
     toPrimaryKey,
     operatorsByFilterType,
@@ -10545,7 +10672,8 @@ function useCellRendering(param) {
     rowClassName,
     onScrollToTop,
     onScrollToBottom,
-    scrollToBottomOffset
+    scrollToBottomOffset,
+    ready
   } = componentState;
   const repaintId = dataSourceState.updatedAt;
   useYourBrain({
@@ -10586,12 +10714,16 @@ function useCellRendering(param) {
     if (!bodySize.height) {
       return;
     }
-    const { onReady } = getState();
     componentActions.ready = true;
+  }, [!!bodySize.height]);
+  (0, import_react32.useEffect)(() => {
+    if (!ready) {
+    }
+    const { onReady } = getState();
     if (onReady) {
       onReady(imperativeApi);
     }
-  }, [!!bodySize.height]);
+  }, [ready]);
   const [, rerender] = useRerender();
   (0, import_react32.useEffect)(() => {
     rerender();
@@ -12283,7 +12415,7 @@ var useLicense = (licenseKey = "") => {
   const valid = (0, import_react44.useMemo)(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.4.8"
+      version: "0.4.11"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -13176,3 +13308,4 @@ var components = {
   CheckBox: InfiniteCheckBox,
   LoadMask
 };
+//!collapsed || lazyLoad;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@infinite-table/infinite-react",
   "description": "Infinite Table for React",
-  "version": "0.4.8",
+  "version": "0.4.11",
   "main": "index.js",
   "module": "index.esm.js",
   "typings": "index.d.ts",
@@ -14,5 +14,5 @@
   },
   "license": "Commercial & Open Source",
   "//": "will be updated at build time",
-  "publishedAt": 1660912348938
+  "publishedAt": 1661872202933
 }