@infinite-table/infinite-react 0.2.2 → 0.2.6

package/index.d.ts

@@ -348,8 +348,7 @@ declare module "components/DataSource/types" {
     export interface DataSourceMappedState<T> {
         aggregationReducers?: DataSourceProps<T>['aggregationReducers'];
         livePagination: DataSourceProps<T>['livePagination'];
-        fullLazyLoad: DataSourceProps<T>['fullLazyLoad'];
-        lazyLoadBatchSize: DataSourceProps<T>['lazyLoadBatchSize'];
+        lazyLoad: DataSourceProps<T>['lazyLoad'];
         onDataParamsChange: DataSourceProps<T>['onDataParamsChange'];
         data: DataSourceProps<T>['data'];
         primaryKey: DataSourceProps<T>['primaryKey'];
@@ -418,8 +417,9 @@ declare module "components/DataSource/types" {
         primaryKey: keyof T;
         fields?: (keyof T)[];
         data: DataSourceData<T>;
-        fullLazyLoad?: boolean;
-        lazyLoadBatchSize?: number;
+        lazyLoad?: boolean | {
+            batchSize?: number;
+        };
         loading?: boolean;
         defaultLoading?: boolean;
         onLoadingChange?: (loading: boolean) => void;
@@ -457,6 +457,7 @@ declare module "components/DataSource/types" {
         multiSort: boolean;
         controlledSort: boolean;
         livePaginationCursor?: DataSourceLivePaginationCursorValue;
+        lazyLoadBatchSize?: number;
     }
     export type DataSourceComponentActions<T> = ComponentStateActions<DataSourceState<T>>;
     export interface DataSourceContextValue<T> {
@@ -533,10 +534,13 @@ declare module "components/DataSource/state/getInitialState" {
         sortInfo: 1 | ((value: import("components/DataSource").DataSourceSortInfo<T> | undefined) => import("components/DataSource").DataSourceSingleSortInfo<T>[] | null);
         groupBy: 1 | ((value: import("components/DataSource").DataSourcePropGroupBy<T> | undefined) => import("components/DataSource").DataSourcePropGroupBy<T>);
         pivotBy: 1 | ((value: import("components/DataSource").DataSourcePropPivotBy<T> | undefined) => import("components/DataSource").DataSourcePropPivotBy<T> | undefined);
-        lazyLoadBatchSize: 1 | ((value: number | undefined) => number | undefined);
         aggregationReducers: 1 | ((value: import("components/DataSource").DataSourcePropAggregationReducers<T> | undefined) => import("components/DataSource").DataSourcePropAggregationReducers<T> | undefined);
         livePagination: 1 | ((value: boolean | undefined) => boolean | undefined);
-        fullLazyLoad: 1 | ((value: boolean | undefined) => boolean | undefined);
+        lazyLoad: 1 | ((value: boolean | {
+            batchSize?: number | undefined;
+        } | undefined) => boolean | {
+            batchSize?: number | undefined;
+        } | undefined);
         onDataParamsChange: 1 | ((value: ((dataParamsChange: DataSourceDataParams<T>) => void) | undefined) => ((dataParamsChange: DataSourceDataParams<T>) => void) | undefined);
         primaryKey: 1 | ((value: keyof T) => keyof T);
         groupRowsState: 1 | ((value: GroupRowsState<any> | undefined) => GroupRowsState<any>);
@@ -550,6 +554,7 @@ declare module "components/DataSource/state/getInitialState" {
     export function onPropChange<T>(params: {
         name: keyof T;
         newValue: any;
+        oldValue: any;
     }, props: DataSourceProps<T>, actions: DataSourceComponentActions<T>): void;
     export function getInterceptActions<T>(): ComponentInterceptedActions<DataSourceState<T>>;
 }
@@ -670,7 +675,9 @@ declare module "components/InfiniteTable/types/InfiniteTableColumn" {
         draggable?: boolean;
         resizable?: boolean;
         comparer?: InfiniteTableColumnComparer<T>;
-        hiddenWhenGrouped?: boolean;
+        defaultHiddenWhenGroupedBy?: '*' | keyof T | {
+            [k in keyof Partial<T>]: true;
+        };
         align?: InfiniteTableColumnAlign;
         verticalAlign?: InfiniteTableColumnVerticalAlign;
         columnGroup?: string;
@@ -865,6 +872,7 @@ declare module "utils/groupAndPivot/index" {
     export type PivotValuesDeepMap<DataType, KeyType> = DeepMap<GroupKeyType<KeyType>, PivotGroupValueType<DataType, KeyType>>;
     export type DeepMapGroupValueType<DataType, KeyType> = {
         items: DataType[];
+        commonData?: Partial<DataType>;
         reducerResults: Record<string, AggregationReducerResult>;
         pivotDeepMap?: DeepMap<GroupKeyType<KeyType>, PivotGroupValueType<DataType, KeyType>>;
     };
@@ -1130,6 +1138,7 @@ declare module "components/InfiniteTable/types/InfiniteTableProps" {
         defaultWidth?: number;
         defaultFlex?: number;
         defaultPinned?: InfiniteTableColumnPinnedValues;
+        defaultHiddenWhenGroupedBy?: InfiniteTableColumn<T>['defaultHiddenWhenGroupedBy'];
         header?: InfiniteTableColumn<T>['header'];
         comparer?: InfiniteTableColumn<T>['comparer'];
         draggable?: InfiniteTableColumn<T>['draggable'];
@@ -1412,6 +1421,7 @@ declare module "components/InfiniteTable/types/InfiniteTableState" {
         computedColumnGroups: InfiniteTablePropColumnGroupsMap;
         rowHeightCSSVar: string;
         headerHeightCSSVar: string;
+        controlledColumnVisibility: boolean;
     }
     export type InfiniteTableActions<T> = ComponentStateActions<InfiniteTableState<T>>;
     export interface InfiniteTableState<T> extends InfiniteTableMappedState<T>, InfiniteTableDerivedState<T>, InfiniteTableSetupState<T> {
@@ -1660,7 +1670,6 @@ declare module "components/InfiniteTable/utils/getComputedVisibleColumns" {
             index: number;
         };
     };
-    export const IS_GROUP_COLUMN_ID: (columnId: string) => boolean;
     export type GetComputedVisibleColumnsResult<T> = {
         computedRemainingSpace: number;
         computedPinnedStartColumnsWidth: number;

package/index.esm.js

@@ -856,6 +856,7 @@ var mapPropsToState = (params) => {
   });
   const computedColumns = state.columnsWhenGrouping || state.columnsWhenInlineGroupRenderStrategy || state.columns;
   return {
+    controlledColumnVisibility: !!props.columnVisibility,
     groupRenderStrategy,
     groupBy,
     computedColumns,
@@ -1389,6 +1390,7 @@ var getComputedVisibleColumns = ({
     const result2 = __spreadProps(__spreadValues({
       align: colType.align,
       verticalAlign: colType.verticalAlign,
+      defaultHiddenWhenGroupedBy: colType.defaultHiddenWhenGroupedBy,
       valueGetter: colType.valueGetter,
       renderValue: colType.renderValue,
       render: colType.render
@@ -2662,6 +2664,13 @@ function lazyGroup(groupParams, rootData) {
   rootData.visitDepthFirst((lazyGroupRowInfo, keys, _index, next) => {
     const [_rootKey, ...currentGroupKeys] = keys;
     const dataArray = lazyGroupRowInfo.items;
+    if (currentGroupKeys.length == groupBy.length) {
+      const deepMapGroupValue = deepMap.get(currentGroupKeys);
+      if (deepMapGroupValue) {
+        deepMapGroupValue.items = dataArray;
+      }
+      return next == null ? void 0 : next();
+    }
     for (let i = 0, len = dataArray.length; i < len; i++) {
       if (!dataArray[i]) {
         const deepMapGroupValue2 = {
@@ -2682,6 +2691,7 @@ function lazyGroup(groupParams, rootData) {
       currentGroupKeys.push(key);
       const deepMapGroupValue = {
         items: [],
+        commonData: dataObject,
         reducerResults: dataArray[i].aggregations || {}
       };
       deepMap.set(currentGroupKeys, deepMapGroupValue);
@@ -2817,10 +2827,15 @@ function flatten(groupResult) {
 function getEnhancedGroupData(options, deepMapValue) {
   const { groupBy, groupKeys, collapsed, parents, reducers } = options;
   const groupNesting = groupKeys.length;
-  const { items: groupItems, reducerResults, pivotDeepMap } = deepMapValue;
+  const {
+    items: groupItems,
+    reducerResults,
+    pivotDeepMap,
+    commonData
+  } = deepMapValue;
   let data = null;
   if (Object.keys(reducerResults).length > 0) {
-    data = {};
+    data = commonData || {};
     for (let key in reducers)
       if (reducers.hasOwnProperty(key)) {
         const reducer = reducers[key];
@@ -2839,7 +2854,7 @@ function getEnhancedGroupData(options, deepMapValue) {
     groupCount: groupItems.length,
     groupData: groupItems,
     groupKeys,
-    id: groupKeys,
+    id: `${groupKeys}`,
     collapsed,
     parents,
     collapsedChildrenCount: 0,
@@ -2916,7 +2931,7 @@ function enhancedFlatten(param) {
           const startIndex = result.length;
           result.push(...items.map((item, index) => {
             return {
-              id: toPrimaryKey(item),
+              id: item ? toPrimaryKey(item) : `${groupKeys}-${index}`,
               data: item,
               isGroupRow: false,
               collapsed: false,
@@ -3012,7 +3027,7 @@ function buildDataSourceDataParams(componentState, overrides) {
     dataSourceParams.livePaginationCursor = componentState.livePaginationCursor;
     dataSourceParams.cursorId = componentState.cursorId;
   }
-  if (componentState.fullLazyLoad) {
+  if (componentState.lazyLoad) {
     if (componentState.lazyLoadBatchSize != null && componentState.lazyLoadBatchSize > 0) {
       dataSourceParams.lazyLoadBatchSize = componentState.lazyLoadBatchSize;
       dataSourceParams.lazyLoadStartIndex = 0;
@@ -3037,9 +3052,9 @@ function buildDataSourceDataParams(componentState, overrides) {
 }
 function loadData(data, componentState, actions, overrides) {
   const dataParams = buildDataSourceDataParams(componentState, overrides);
-  if (componentState.fullLazyLoad && dataParams.groupKeys) {
+  if (componentState.lazyLoad) {
     const lazyGroupData = componentState.originalLazyGroupData;
-    const key = [LAZY_ROOT_KEY_FOR_GROUPS, ...dataParams.groupKeys];
+    const key = [LAZY_ROOT_KEY_FOR_GROUPS, ...dataParams.groupKeys || []];
     const existingGroupRowInfo = lazyGroupData.get(key);
     if (existingGroupRowInfo && existingGroupRowInfo.cache) {
       const items = existingGroupRowInfo.items;
@@ -3060,7 +3075,7 @@ function loadData(data, componentState, actions, overrides) {
     data = data(dataParams);
   }
   const dataIsPromise = typeof data === "object" && typeof data.then === "function";
-  if (dataIsPromise && !componentState.fullLazyLoad) {
+  if (dataIsPromise && !componentState.lazyLoad) {
     actions.loading = true;
   }
   return Promise.resolve(data).then((dataParam) => {
@@ -3076,9 +3091,9 @@ function loadData(data, componentState, actions, overrides) {
       if (remoteData.mappings) {
         actions.pivotMappings = remoteData.mappings;
       }
-      if (componentState.fullLazyLoad && dataParams.groupKeys) {
+      if (componentState.lazyLoad) {
         const lazyGroupData = componentState.originalLazyGroupData;
-        const key = [LAZY_ROOT_KEY_FOR_GROUPS, ...dataParams.groupKeys];
+        const key = [LAZY_ROOT_KEY_FOR_GROUPS, ...dataParams.groupKeys || []];
         const newGroupRowInfo = {
           cache: !!remoteData.cache,
           totalCount: (_a = remoteData.totalCount) != null ? _a : dataArray.length,
@@ -3108,6 +3123,10 @@ function loadData(data, componentState, actions, overrides) {
         }
         skipAssign = true;
         actions.originalLazyGroupDataChangeDetect = getChangeDetect();
+        if (!dataParams.groupKeys || !dataParams.groupKeys.length) {
+          const topLevelItems = lazyGroupData.get([LAZY_ROOT_KEY_FOR_GROUPS]);
+          actions.originalDataArray = [...topLevelItems.items];
+        }
       }
     } else {
       dataArray = dataParam;
@@ -3115,7 +3134,7 @@ function loadData(data, componentState, actions, overrides) {
     if (!skipAssign) {
       actions.originalDataArray = dataArray;
     }
-    if (dataIsPromise && !componentState.fullLazyLoad) {
+    if (dataIsPromise && !componentState.lazyLoad) {
       actions.loading = false;
     }
   });
@@ -3266,34 +3285,34 @@ function lazyLoadRange(options, cache) {
       continue;
     }
     const rowLoaded = rowInfo.data != null;
-    const parentGroupKeys = rowInfo.groupKeys ? [...rowInfo.groupKeys] : [];
-    if (rowInfo.groupKeys) {
-      parentGroupKeys.pop();
+    const theGroupKeys = rowInfo.groupKeys ? [...rowInfo.groupKeys] : [];
+    if (rowInfo.groupKeys && rowInfo.isGroupRow) {
+      theGroupKeys.pop();
     }
-    const cacheKeys = parentGroupKeys.length ? parentGroupKeys : rootGroupKeys;
+    const cacheKeys = theGroupKeys.length ? theGroupKeys : rootGroupKeys;
     const indexInGroup = rowInfo.indexInGroup;
     if (!rowLoaded) {
-      let fnCalls = perGroupFnCalls.get(cacheKeys);
+      let cachedFnCalls = perGroupFnCalls.get(cacheKeys);
       const batchStartIndexInGroup = Math.floor(indexInGroup / lazyLoadBatchSize) * lazyLoadBatchSize;
       const offset = rowInfo.indexInGroup - batchStartIndexInGroup;
       const absoluteIndexOfBatchStart = dataArray[rowInfo.indexInAll - offset].indexInAll;
       const batchStartRowLoaded = isRowLoaded(absoluteIndexOfBatchStart);
       const batchStartRowId = dataArray[absoluteIndexOfBatchStart].id;
-      if (batchStartRowLoaded || (fnCalls == null ? void 0 : fnCalls[batchStartRowId])) {
+      if (batchStartRowLoaded || (cachedFnCalls == null ? void 0 : cachedFnCalls[batchStartRowId])) {
         continue;
       }
-      const shouldSetFnCalls = !fnCalls;
-      fnCalls = fnCalls || {};
+      const shouldSetFnCalls = !cachedFnCalls;
+      cachedFnCalls = cachedFnCalls || {};
       const currentFnCall = {
         lazyLoadStartIndex: batchStartIndexInGroup,
         lazyLoadBatchSize,
-        groupKeys: parentGroupKeys
+        groupKeys: theGroupKeys
       };
-      if (!fnCalls[batchStartRowId]) {
-        fnCalls[batchStartRowId] = currentFnCall;
+      if (!cachedFnCalls[batchStartRowId]) {
+        cachedFnCalls[batchStartRowId] = currentFnCall;
       }
       if (shouldSetFnCalls) {
-        perGroupFnCalls.set(cacheKeys, fnCalls);
+        perGroupFnCalls.set(cacheKeys, cachedFnCalls);
       }
     }
   }
@@ -3550,12 +3569,11 @@ function getCompareObjectForDataParams(dataParams) {
 var forwardProps3 = (setupState) => {
   return {
     onDataParamsChange: (fn) => fn ? discardCallsWithEqualArg(fn, 100, getCompareObjectForDataParams) : void 0,
-    fullLazyLoad: 1,
+    lazyLoad: (lazyLoad) => !!lazyLoad,
     data: 1,
     pivotBy: 1,
     primaryKey: 1,
     livePagination: 1,
-    lazyLoadBatchSize: (lazyLoadBatchSize) => lazyLoadBatchSize != null ? lazyLoadBatchSize : -1,
     aggregationReducers: 1,
     collapseGroupRowsOnDataFunctionChange: (collapseGroupRowsOnDataFunctionChange) => collapseGroupRowsOnDataFunctionChange != null ? collapseGroupRowsOnDataFunctionChange : true,
     loading: (loading) => loading != null ? loading : false,
@@ -3582,7 +3600,8 @@ function mapPropsToState2(params) {
   const controlledSort = isControlledValue(props.sortInfo);
   const result = {
     controlledSort,
-    multiSort: Array.isArray(controlledSort ? props.sortInfo : props.defaultSortInfo)
+    multiSort: Array.isArray(controlledSort ? props.sortInfo : props.defaultSortInfo),
+    lazyLoadBatchSize: typeof props.lazyLoad === "object" ? props.lazyLoad.batchSize : void 0
   };
   if (props.livePagination) {
     const dataArrayChanged = !oldState || oldState.originalDataArray !== state.originalDataArray;
@@ -3595,7 +3614,7 @@ var debugFullLazyLoad = dbg("DataSource:fullLazyLoad");
 function onPropChange(params, props, actions) {
   const { name, newValue } = params;
   if (name === "data" && typeof newValue === "function" && !props.groupRowsState) {
-    if (props.fullLazyLoad) {
+    if (props.lazyLoad) {
       debugFullLazyLoad(`"data" function prop has changed`);
     }
     if (props.collapseGroupRowsOnDataFunctionChange !== false) {
@@ -3862,17 +3881,29 @@ function concludeReducer(params) {
   var _a;
   const { state, previousState } = params;
   const sortInfo = state.sortInfo;
-  const shouldSort = !!(sortInfo == null ? void 0 : sortInfo.length) && !state.controlledSort;
-  const originalDataArrayChanged = haveDepsChanged(previousState, state, [
+  let shouldSort = !!(sortInfo == null ? void 0 : sortInfo.length) && !state.controlledSort;
+  if (state.lazyLoad || state.livePagination) {
+    shouldSort = false;
+  }
+  let originalDataArrayChanged = haveDepsChanged(previousState, state, [
     "originalDataArray"
   ]);
+  const dataSourceChange = previousState && state.data !== previousState.data;
+  let lazyLoadGroupDataChange = state.lazyLoad && previousState && (previousState.groupBy !== state.groupBy || previousState.sortInfo !== state.sortInfo);
+  if (dataSourceChange) {
+    lazyLoadGroupDataChange = true;
+  }
+  if (lazyLoadGroupDataChange) {
+    state.originalLazyGroupData = new DeepMap();
+    originalDataArrayChanged = true;
+  }
   const sortInfoChanged = haveDepsChanged(previousState, state, ["sortInfo"]);
   const sortDepsChanged = originalDataArrayChanged || sortInfoChanged;
   const shouldSortAgain = shouldSort && (sortDepsChanged || !state.lastSortDataArray);
   const groupBy = state.groupBy;
   const pivotBy = state.pivotBy;
   const shouldGroup = groupBy.length || pivotBy;
-  const groupsDepsChanged = haveDepsChanged(previousState, state, [
+  const groupsDepsChanged = originalDataArrayChanged || haveDepsChanged(previousState, state, [
     "generateGroupRows",
     "originalDataArray",
     "originalLazyGroupData",
@@ -3897,11 +3928,15 @@ function concludeReducer(params) {
   state.postSortDataArray = dataArray;
   state.groupDeepMap = void 0;
   const toPrimaryKey = (data) => {
-    return data[state.primaryKey];
+    const pk = data[state.primaryKey];
+    if (Array.isArray(pk)) {
+      debugger;
+    }
+    return pk;
   };
   if (shouldGroup) {
     if (shouldGroupAgain) {
-      const groupResult = state.fullLazyLoad ? lazyGroup({
+      const groupResult = state.lazyLoad ? lazyGroup({
         groupBy,
         pivot: pivotBy,
         mappings: state.pivotMappings,
@@ -3938,8 +3973,8 @@ function concludeReducer(params) {
     state.groupDeepMap = void 0;
     state.pivotColumns = void 0;
     const arrayDifferentAfterSortStep = previousState.postSortDataArray != state.postSortDataArray;
-    if (arrayDifferentAfterSortStep) {
-      rowInfoDataArray = dataArray.map((data, index) => toRowInfo(data, toPrimaryKey(data), index));
+    if (arrayDifferentAfterSortStep || groupsDepsChanged) {
+      rowInfoDataArray = dataArray.map((data, index) => toRowInfo(data, data ? toPrimaryKey(data) : index, index));
     }
   }
   state.postGroupDataArray = rowInfoDataArray;
@@ -4010,7 +4045,7 @@ function useToggleGroupRow() {
     const newState = new GroupRowsState(state.groupRowsState);
     newState.toggleGroupRow(groupKeys);
     dataSourceActions.groupRowsState = newState;
-    if (state.fullLazyLoad && newState.isGroupRowExpanded(groupKeys)) {
+    if (state.lazyLoad && newState.isGroupRowExpanded(groupKeys)) {
       loadData(state.data, state, dataSourceActions, {
         groupKeys
       });
@@ -4049,7 +4084,7 @@ function useColumnsWhen() {
   }, [pivotTotalColumnPosition]);
   useColumnsWhenInlineGroupRenderStrategy(groupByMap);
   const { toggleGroupRow } = useColumnsWhenGrouping();
-  useHideEmptyGroupColumns(groupByMap);
+  useHideColumns(groupByMap);
   return { toggleGroupRow };
 }
 function useColumnsWhenInlineGroupRenderStrategy(groupByMap) {
@@ -4171,27 +4206,33 @@ function useColumnsWhenGrouping() {
   ]);
   return { toggleGroupRow };
 }
-function useHideEmptyGroupColumns(groupRowsMap) {
+function useHideColumns(groupByMap) {
   const {
-    componentState: { groupBy, groupRowsState },
+    componentState: {
+      dataArray,
+      groupBy,
+      groupRowsState,
+      originalLazyGroupDataChangeDetect
+    },
     getState: getDataSourceState
   } = useDataSourceContextValue();
   const {
     getComponentState,
     componentActions,
     componentState: {
+      columnTypes,
+      computedColumns,
       columnsWhenGrouping: generatedColumns,
       hideEmptyGroupColumns,
       groupRenderStrategy
     }
   } = useComponentState();
   useEffect9(() => {
-    if (groupRenderStrategy !== "multi-column") {
+    if (groupRenderStrategy !== "multi-column" || !hideEmptyGroupColumns) {
       return;
     }
     const groupsLength = groupBy.length;
     let expandedGroupsLevel = 0;
-    const { dataArray } = getDataSourceState();
     const len = dataArray.length;
     for (let i = 0; i < len; i++) {
       const data = dataArray[i];
@@ -4201,10 +4242,10 @@ function useHideEmptyGroupColumns(groupRowsMap) {
       }
     }
     const currentState = getComponentState();
-    const { computedColumns } = currentState;
+    const { computedColumns: computedColumns2 } = currentState;
     let updated = false;
     const columnVisibility = __spreadValues({}, currentState.columnVisibility);
-    const cols = computedColumns;
+    const cols = computedColumns2;
     groupBy.forEach(({ field, column: groupColumn }, index) => {
       const colId = (groupColumn == null ? void 0 : groupColumn.id) || `group-by-${field}`;
       let col = cols.get(colId);
@@ -4226,11 +4267,39 @@ function useHideEmptyGroupColumns(groupRowsMap) {
     getDataSourceState,
     groupRenderStrategy,
     generatedColumns,
+    originalLazyGroupDataChangeDetect,
     groupBy,
-    groupRowsMap,
+    hideEmptyGroupColumns ? dataArray : null,
     hideEmptyGroupColumns ? groupRowsState : null,
     hideEmptyGroupColumns
   ]);
+  useEffect9(() => {
+    const isGrouped = groupBy.length > 0;
+    const currentState = getComponentState();
+    const { controlledColumnVisibility, columnVisibility } = currentState;
+    if (controlledColumnVisibility) {
+      return;
+    }
+    const newColumnVisibility = __spreadValues({}, columnVisibility);
+    let updated = false;
+    computedColumns.forEach((col, id) => {
+      if (col.defaultHiddenWhenGroupedBy) {
+        const nowHidden = columnVisibility[id] === false;
+        const shouldBeHidden = col.defaultHiddenWhenGroupedBy === "*" && isGrouped || typeof col.defaultHiddenWhenGroupedBy === "string" && groupByMap.get(col.defaultHiddenWhenGroupedBy) || typeof col.defaultHiddenWhenGroupedBy === "object" && Object.keys(col.defaultHiddenWhenGroupedBy).reduce((acc, field) => acc || groupByMap.has(field), false);
+        if (nowHidden !== shouldBeHidden) {
+          updated = true;
+          if (shouldBeHidden) {
+            newColumnVisibility[id] = false;
+          } else {
+            delete newColumnVisibility[id];
+          }
+        }
+      }
+    });
+    if (updated) {
+      componentActions.columnVisibility = newColumnVisibility;
+    }
+  }, [computedColumns, columnTypes, groupBy, groupByMap]);
 }
 function getColumnsWhenGrouping(params) {
   const {
@@ -7702,7 +7771,7 @@ var useLicense = (licenseKey = "") => {
   const valid = useMemo12(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.2.2"
+      version: "0.2.6"
     });
     if (!licenseKey && !valid2 && isInsideSandbox) {
       return true;

package/index.js

@@ -873,6 +873,7 @@ var mapPropsToState = (params) => {
   });
   const computedColumns = state.columnsWhenGrouping || state.columnsWhenInlineGroupRenderStrategy || state.columns;
   return {
+    controlledColumnVisibility: !!props.columnVisibility,
     groupRenderStrategy,
     groupBy,
     computedColumns,
@@ -1398,6 +1399,7 @@ var getComputedVisibleColumns = ({
     const result2 = __spreadProps(__spreadValues({
       align: colType.align,
       verticalAlign: colType.verticalAlign,
+      defaultHiddenWhenGroupedBy: colType.defaultHiddenWhenGroupedBy,
       valueGetter: colType.valueGetter,
       renderValue: colType.renderValue,
       render: colType.render
@@ -2648,6 +2650,13 @@ function lazyGroup(groupParams, rootData) {
   rootData.visitDepthFirst((lazyGroupRowInfo, keys, _index, next) => {
     const [_rootKey, ...currentGroupKeys] = keys;
     const dataArray = lazyGroupRowInfo.items;
+    if (currentGroupKeys.length == groupBy.length) {
+      const deepMapGroupValue = deepMap.get(currentGroupKeys);
+      if (deepMapGroupValue) {
+        deepMapGroupValue.items = dataArray;
+      }
+      return next == null ? void 0 : next();
+    }
     for (let i = 0, len = dataArray.length; i < len; i++) {
       if (!dataArray[i]) {
         const deepMapGroupValue2 = {
@@ -2668,6 +2677,7 @@ function lazyGroup(groupParams, rootData) {
       currentGroupKeys.push(key);
       const deepMapGroupValue = {
         items: [],
+        commonData: dataObject,
         reducerResults: dataArray[i].aggregations || {}
       };
       deepMap.set(currentGroupKeys, deepMapGroupValue);
@@ -2803,10 +2813,15 @@ function flatten(groupResult) {
 function getEnhancedGroupData(options, deepMapValue) {
   const { groupBy, groupKeys, collapsed, parents, reducers } = options;
   const groupNesting = groupKeys.length;
-  const { items: groupItems, reducerResults, pivotDeepMap } = deepMapValue;
+  const {
+    items: groupItems,
+    reducerResults,
+    pivotDeepMap,
+    commonData
+  } = deepMapValue;
   let data = null;
   if (Object.keys(reducerResults).length > 0) {
-    data = {};
+    data = commonData || {};
     for (let key in reducers)
       if (reducers.hasOwnProperty(key)) {
         const reducer = reducers[key];
@@ -2825,7 +2840,7 @@ function getEnhancedGroupData(options, deepMapValue) {
     groupCount: groupItems.length,
     groupData: groupItems,
     groupKeys,
-    id: groupKeys,
+    id: `${groupKeys}`,
     collapsed,
     parents,
     collapsedChildrenCount: 0,
@@ -2902,7 +2917,7 @@ function enhancedFlatten(param) {
           const startIndex = result.length;
           result.push(...items.map((item, index) => {
             return {
-              id: toPrimaryKey(item),
+              id: item ? toPrimaryKey(item) : `${groupKeys}-${index}`,
               data: item,
               isGroupRow: false,
               collapsed: false,
@@ -2998,7 +3013,7 @@ function buildDataSourceDataParams(componentState, overrides) {
     dataSourceParams.livePaginationCursor = componentState.livePaginationCursor;
     dataSourceParams.cursorId = componentState.cursorId;
   }
-  if (componentState.fullLazyLoad) {
+  if (componentState.lazyLoad) {
     if (componentState.lazyLoadBatchSize != null && componentState.lazyLoadBatchSize > 0) {
       dataSourceParams.lazyLoadBatchSize = componentState.lazyLoadBatchSize;
       dataSourceParams.lazyLoadStartIndex = 0;
@@ -3023,9 +3038,9 @@ function buildDataSourceDataParams(componentState, overrides) {
 }
 function loadData(data, componentState, actions, overrides) {
   const dataParams = buildDataSourceDataParams(componentState, overrides);
-  if (componentState.fullLazyLoad && dataParams.groupKeys) {
+  if (componentState.lazyLoad) {
     const lazyGroupData = componentState.originalLazyGroupData;
-    const key = [LAZY_ROOT_KEY_FOR_GROUPS, ...dataParams.groupKeys];
+    const key = [LAZY_ROOT_KEY_FOR_GROUPS, ...dataParams.groupKeys || []];
     const existingGroupRowInfo = lazyGroupData.get(key);
     if (existingGroupRowInfo && existingGroupRowInfo.cache) {
       const items = existingGroupRowInfo.items;
@@ -3046,7 +3061,7 @@ function loadData(data, componentState, actions, overrides) {
     data = data(dataParams);
   }
   const dataIsPromise = typeof data === "object" && typeof data.then === "function";
-  if (dataIsPromise && !componentState.fullLazyLoad) {
+  if (dataIsPromise && !componentState.lazyLoad) {
     actions.loading = true;
   }
   return Promise.resolve(data).then((dataParam) => {
@@ -3062,9 +3077,9 @@ function loadData(data, componentState, actions, overrides) {
       if (remoteData.mappings) {
         actions.pivotMappings = remoteData.mappings;
       }
-      if (componentState.fullLazyLoad && dataParams.groupKeys) {
+      if (componentState.lazyLoad) {
         const lazyGroupData = componentState.originalLazyGroupData;
-        const key = [LAZY_ROOT_KEY_FOR_GROUPS, ...dataParams.groupKeys];
+        const key = [LAZY_ROOT_KEY_FOR_GROUPS, ...dataParams.groupKeys || []];
         const newGroupRowInfo = {
           cache: !!remoteData.cache,
           totalCount: (_a = remoteData.totalCount) != null ? _a : dataArray.length,
@@ -3094,6 +3109,10 @@ function loadData(data, componentState, actions, overrides) {
         }
         skipAssign = true;
         actions.originalLazyGroupDataChangeDetect = getChangeDetect();
+        if (!dataParams.groupKeys || !dataParams.groupKeys.length) {
+          const topLevelItems = lazyGroupData.get([LAZY_ROOT_KEY_FOR_GROUPS]);
+          actions.originalDataArray = [...topLevelItems.items];
+        }
       }
     } else {
       dataArray = dataParam;
@@ -3101,7 +3120,7 @@ function loadData(data, componentState, actions, overrides) {
     if (!skipAssign) {
       actions.originalDataArray = dataArray;
     }
-    if (dataIsPromise && !componentState.fullLazyLoad) {
+    if (dataIsPromise && !componentState.lazyLoad) {
       actions.loading = false;
     }
   });
@@ -3252,34 +3271,34 @@ function lazyLoadRange(options, cache) {
       continue;
     }
     const rowLoaded = rowInfo.data != null;
-    const parentGroupKeys = rowInfo.groupKeys ? [...rowInfo.groupKeys] : [];
-    if (rowInfo.groupKeys) {
-      parentGroupKeys.pop();
+    const theGroupKeys = rowInfo.groupKeys ? [...rowInfo.groupKeys] : [];
+    if (rowInfo.groupKeys && rowInfo.isGroupRow) {
+      theGroupKeys.pop();
     }
-    const cacheKeys = parentGroupKeys.length ? parentGroupKeys : rootGroupKeys;
+    const cacheKeys = theGroupKeys.length ? theGroupKeys : rootGroupKeys;
     const indexInGroup = rowInfo.indexInGroup;
     if (!rowLoaded) {
-      let fnCalls = perGroupFnCalls.get(cacheKeys);
+      let cachedFnCalls = perGroupFnCalls.get(cacheKeys);
       const batchStartIndexInGroup = Math.floor(indexInGroup / lazyLoadBatchSize) * lazyLoadBatchSize;
       const offset = rowInfo.indexInGroup - batchStartIndexInGroup;
       const absoluteIndexOfBatchStart = dataArray[rowInfo.indexInAll - offset].indexInAll;
       const batchStartRowLoaded = isRowLoaded(absoluteIndexOfBatchStart);
       const batchStartRowId = dataArray[absoluteIndexOfBatchStart].id;
-      if (batchStartRowLoaded || (fnCalls == null ? void 0 : fnCalls[batchStartRowId])) {
+      if (batchStartRowLoaded || (cachedFnCalls == null ? void 0 : cachedFnCalls[batchStartRowId])) {
         continue;
       }
-      const shouldSetFnCalls = !fnCalls;
-      fnCalls = fnCalls || {};
+      const shouldSetFnCalls = !cachedFnCalls;
+      cachedFnCalls = cachedFnCalls || {};
       const currentFnCall = {
         lazyLoadStartIndex: batchStartIndexInGroup,
         lazyLoadBatchSize,
-        groupKeys: parentGroupKeys
+        groupKeys: theGroupKeys
       };
-      if (!fnCalls[batchStartRowId]) {
-        fnCalls[batchStartRowId] = currentFnCall;
+      if (!cachedFnCalls[batchStartRowId]) {
+        cachedFnCalls[batchStartRowId] = currentFnCall;
       }
       if (shouldSetFnCalls) {
-        perGroupFnCalls.set(cacheKeys, fnCalls);
+        perGroupFnCalls.set(cacheKeys, cachedFnCalls);
       }
     }
   }
@@ -3536,12 +3555,11 @@ function getCompareObjectForDataParams(dataParams) {
 var forwardProps3 = (setupState) => {
   return {
     onDataParamsChange: (fn) => fn ? discardCallsWithEqualArg(fn, 100, getCompareObjectForDataParams) : void 0,
-    fullLazyLoad: 1,
+    lazyLoad: (lazyLoad) => !!lazyLoad,
     data: 1,
     pivotBy: 1,
     primaryKey: 1,
     livePagination: 1,
-    lazyLoadBatchSize: (lazyLoadBatchSize) => lazyLoadBatchSize != null ? lazyLoadBatchSize : -1,
     aggregationReducers: 1,
     collapseGroupRowsOnDataFunctionChange: (collapseGroupRowsOnDataFunctionChange) => collapseGroupRowsOnDataFunctionChange != null ? collapseGroupRowsOnDataFunctionChange : true,
     loading: (loading) => loading != null ? loading : false,
@@ -3568,7 +3586,8 @@ function mapPropsToState2(params) {
   const controlledSort = isControlledValue(props.sortInfo);
   const result = {
     controlledSort,
-    multiSort: Array.isArray(controlledSort ? props.sortInfo : props.defaultSortInfo)
+    multiSort: Array.isArray(controlledSort ? props.sortInfo : props.defaultSortInfo),
+    lazyLoadBatchSize: typeof props.lazyLoad === "object" ? props.lazyLoad.batchSize : void 0
   };
   if (props.livePagination) {
     const dataArrayChanged = !oldState || oldState.originalDataArray !== state.originalDataArray;
@@ -3581,7 +3600,7 @@ var debugFullLazyLoad = dbg("DataSource:fullLazyLoad");
 function onPropChange(params, props, actions) {
   const { name, newValue } = params;
   if (name === "data" && typeof newValue === "function" && !props.groupRowsState) {
-    if (props.fullLazyLoad) {
+    if (props.lazyLoad) {
       debugFullLazyLoad(`"data" function prop has changed`);
     }
     if (props.collapseGroupRowsOnDataFunctionChange !== false) {
@@ -3848,17 +3867,29 @@ function concludeReducer(params) {
   var _a;
   const { state, previousState } = params;
   const sortInfo = state.sortInfo;
-  const shouldSort = !!(sortInfo == null ? void 0 : sortInfo.length) && !state.controlledSort;
-  const originalDataArrayChanged = haveDepsChanged(previousState, state, [
+  let shouldSort = !!(sortInfo == null ? void 0 : sortInfo.length) && !state.controlledSort;
+  if (state.lazyLoad || state.livePagination) {
+    shouldSort = false;
+  }
+  let originalDataArrayChanged = haveDepsChanged(previousState, state, [
     "originalDataArray"
   ]);
+  const dataSourceChange = previousState && state.data !== previousState.data;
+  let lazyLoadGroupDataChange = state.lazyLoad && previousState && (previousState.groupBy !== state.groupBy || previousState.sortInfo !== state.sortInfo);
+  if (dataSourceChange) {
+    lazyLoadGroupDataChange = true;
+  }
+  if (lazyLoadGroupDataChange) {
+    state.originalLazyGroupData = new DeepMap();
+    originalDataArrayChanged = true;
+  }
   const sortInfoChanged = haveDepsChanged(previousState, state, ["sortInfo"]);
   const sortDepsChanged = originalDataArrayChanged || sortInfoChanged;
   const shouldSortAgain = shouldSort && (sortDepsChanged || !state.lastSortDataArray);
   const groupBy = state.groupBy;
   const pivotBy = state.pivotBy;
   const shouldGroup = groupBy.length || pivotBy;
-  const groupsDepsChanged = haveDepsChanged(previousState, state, [
+  const groupsDepsChanged = originalDataArrayChanged || haveDepsChanged(previousState, state, [
     "generateGroupRows",
     "originalDataArray",
     "originalLazyGroupData",
@@ -3883,11 +3914,15 @@ function concludeReducer(params) {
   state.postSortDataArray = dataArray;
   state.groupDeepMap = void 0;
   const toPrimaryKey = (data) => {
-    return data[state.primaryKey];
+    const pk = data[state.primaryKey];
+    if (Array.isArray(pk)) {
+      debugger;
+    }
+    return pk;
   };
   if (shouldGroup) {
     if (shouldGroupAgain) {
-      const groupResult = state.fullLazyLoad ? lazyGroup({
+      const groupResult = state.lazyLoad ? lazyGroup({
         groupBy,
         pivot: pivotBy,
         mappings: state.pivotMappings,
@@ -3924,8 +3959,8 @@ function concludeReducer(params) {
     state.groupDeepMap = void 0;
     state.pivotColumns = void 0;
     const arrayDifferentAfterSortStep = previousState.postSortDataArray != state.postSortDataArray;
-    if (arrayDifferentAfterSortStep) {
-      rowInfoDataArray = dataArray.map((data, index) => toRowInfo(data, toPrimaryKey(data), index));
+    if (arrayDifferentAfterSortStep || groupsDepsChanged) {
+      rowInfoDataArray = dataArray.map((data, index) => toRowInfo(data, data ? toPrimaryKey(data) : index, index));
     }
   }
   state.postGroupDataArray = rowInfoDataArray;
@@ -3996,7 +4031,7 @@ function useToggleGroupRow() {
     const newState = new GroupRowsState(state.groupRowsState);
     newState.toggleGroupRow(groupKeys);
     dataSourceActions.groupRowsState = newState;
-    if (state.fullLazyLoad && newState.isGroupRowExpanded(groupKeys)) {
+    if (state.lazyLoad && newState.isGroupRowExpanded(groupKeys)) {
       loadData(state.data, state, dataSourceActions, {
         groupKeys
       });
@@ -4035,7 +4070,7 @@ function useColumnsWhen() {
   }, [pivotTotalColumnPosition]);
   useColumnsWhenInlineGroupRenderStrategy(groupByMap);
   const { toggleGroupRow } = useColumnsWhenGrouping();
-  useHideEmptyGroupColumns(groupByMap);
+  useHideColumns(groupByMap);
   return { toggleGroupRow };
 }
 function useColumnsWhenInlineGroupRenderStrategy(groupByMap) {
@@ -4157,27 +4192,33 @@ function useColumnsWhenGrouping() {
   ]);
   return { toggleGroupRow };
 }
-function useHideEmptyGroupColumns(groupRowsMap) {
+function useHideColumns(groupByMap) {
   const {
-    componentState: { groupBy, groupRowsState },
+    componentState: {
+      dataArray,
+      groupBy,
+      groupRowsState,
+      originalLazyGroupDataChangeDetect
+    },
     getState: getDataSourceState
   } = useDataSourceContextValue();
   const {
     getComponentState,
     componentActions,
     componentState: {
+      columnTypes,
+      computedColumns,
       columnsWhenGrouping: generatedColumns,
       hideEmptyGroupColumns,
       groupRenderStrategy
     }
   } = useComponentState();
   (0, import_react17.useEffect)(() => {
-    if (groupRenderStrategy !== "multi-column") {
+    if (groupRenderStrategy !== "multi-column" || !hideEmptyGroupColumns) {
       return;
     }
     const groupsLength = groupBy.length;
     let expandedGroupsLevel = 0;
-    const { dataArray } = getDataSourceState();
     const len = dataArray.length;
     for (let i = 0; i < len; i++) {
       const data = dataArray[i];
@@ -4187,10 +4228,10 @@ function useHideEmptyGroupColumns(groupRowsMap) {
       }
     }
     const currentState = getComponentState();
-    const { computedColumns } = currentState;
+    const { computedColumns: computedColumns2 } = currentState;
     let updated = false;
     const columnVisibility = __spreadValues({}, currentState.columnVisibility);
-    const cols = computedColumns;
+    const cols = computedColumns2;
     groupBy.forEach(({ field, column: groupColumn }, index) => {
       const colId = (groupColumn == null ? void 0 : groupColumn.id) || `group-by-${field}`;
       let col = cols.get(colId);
@@ -4212,11 +4253,39 @@ function useHideEmptyGroupColumns(groupRowsMap) {
     getDataSourceState,
     groupRenderStrategy,
     generatedColumns,
+    originalLazyGroupDataChangeDetect,
     groupBy,
-    groupRowsMap,
+    hideEmptyGroupColumns ? dataArray : null,
     hideEmptyGroupColumns ? groupRowsState : null,
     hideEmptyGroupColumns
   ]);
+  (0, import_react17.useEffect)(() => {
+    const isGrouped = groupBy.length > 0;
+    const currentState = getComponentState();
+    const { controlledColumnVisibility, columnVisibility } = currentState;
+    if (controlledColumnVisibility) {
+      return;
+    }
+    const newColumnVisibility = __spreadValues({}, columnVisibility);
+    let updated = false;
+    computedColumns.forEach((col, id) => {
+      if (col.defaultHiddenWhenGroupedBy) {
+        const nowHidden = columnVisibility[id] === false;
+        const shouldBeHidden = col.defaultHiddenWhenGroupedBy === "*" && isGrouped || typeof col.defaultHiddenWhenGroupedBy === "string" && groupByMap.get(col.defaultHiddenWhenGroupedBy) || typeof col.defaultHiddenWhenGroupedBy === "object" && Object.keys(col.defaultHiddenWhenGroupedBy).reduce((acc, field) => acc || groupByMap.has(field), false);
+        if (nowHidden !== shouldBeHidden) {
+          updated = true;
+          if (shouldBeHidden) {
+            newColumnVisibility[id] = false;
+          } else {
+            delete newColumnVisibility[id];
+          }
+        }
+      }
+    });
+    if (updated) {
+      componentActions.columnVisibility = newColumnVisibility;
+    }
+  }, [computedColumns, columnTypes, groupBy, groupByMap]);
 }
 function getColumnsWhenGrouping(params) {
   const {
@@ -7609,7 +7678,7 @@ var useLicense = (licenseKey = "") => {
   const valid = (0, import_react43.useMemo)(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.2.2"
+      version: "0.2.6"
     });
     if (!licenseKey && !valid2 && isInsideSandbox) {
       return true;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@infinite-table/infinite-react",
   "description": "Infinite Table for React",
-  "version": "0.2.2",
+  "version": "0.2.6",
   "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": 1644328808504
+  "publishedAt": 1644931690394
 }