@infinite-table/infinite-react 0.4.4 → 0.4.5

package/index.d.ts

@@ -196,6 +196,7 @@ declare type InfiniteTableColumnRenderParamBase<DATA_TYPE, COL_TYPE = InfiniteTa
     api: InfiniteTableApi<DATA_TYPE>;
     column: COL_TYPE;
     columnsMap: Map<string, COL_TYPE>;
+    fieldsToColumn: Map<keyof DATA_TYPE, COL_TYPE>;
     groupByColumn?: InfiniteTableComputedColumn<DATA_TYPE>;
     toggleCurrentGroupRow: () => void;
     toggleGroupRow: InfiniteTableToggleGroupRowFn;
@@ -222,6 +223,9 @@ declare type InfiniteTableColumnRowspanParam<DATA_TYPE, COL_TYPE = InfiniteTable
 declare type InfiniteTableColumnRenderFunctionForGroupRows<DATA_TYPE, COL_TYPE = InfiniteTableComputedColumn<DATA_TYPE>> = (renderParams: InfiniteTableColumnRenderParam<DATA_TYPE, COL_TYPE> & {
     isGroupRow: true;
 }) => Renderable | null;
+declare type InfiniteTableColumnRenderFunctionForNormalRows<DATA_TYPE, COL_TYPE = InfiniteTableComputedColumn<DATA_TYPE>> = (renderParams: InfiniteTableColumnRenderParam<DATA_TYPE, COL_TYPE> & {
+    isGroupRow: false;
+}) => Renderable | null;
 declare type InfiniteTableColumnRenderFunction<DATA_TYPE, COL_TYPE = InfiniteTableComputedColumn<DATA_TYPE>> = (renderParams: InfiniteTableColumnRenderParam<DATA_TYPE, COL_TYPE>) => Renderable | null;
 declare type InfiniteTableColumnHeaderRenderFunction<T> = (headerParams: InfiniteTableColumnHeaderParam<T>) => Renderable;
 declare type InfiniteTableColumnAlign = 'start' | 'center' | 'end';
@@ -285,8 +289,8 @@ declare type InfiniteTableColumn<DATA_TYPE> = {
     field?: keyof DATA_TYPE;
     render?: InfiniteTableColumnRenderFunction<DATA_TYPE>;
     renderValue?: InfiniteTableColumnRenderFunction<DATA_TYPE>;
-    renderGroupValue?: InfiniteTableColumnRenderFunction<DATA_TYPE>;
-    renderLeafValue?: InfiniteTableColumnRenderFunction<DATA_TYPE>;
+    renderGroupValue?: InfiniteTableColumnRenderFunctionForGroupRows<DATA_TYPE>;
+    renderLeafValue?: InfiniteTableColumnRenderFunctionForNormalRows<DATA_TYPE>;
     valueGetter?: InfiniteTableColumnValueGetter<DATA_TYPE>;
     valueFormatter?: InfiniteTableColumnValueFormatter<DATA_TYPE>;
     defaultWidth?: number;
@@ -797,6 +801,7 @@ interface InfiniteTableComputedValues<T> {
     computedUnpinnedOffset: number;
     computedPinnedEndOffset: number;
     computedRemainingSpace: number;
+    fieldsToColumn: Map<keyof T, InfiniteTableComputedColumn<T>>;
     toggleGroupRow: (groupKeys: any[]) => void;
     columnSize: (colIndex: number) => number;
 }
@@ -943,6 +948,7 @@ interface InfiniteTableSetupState<T> {
     focused: boolean;
     ready: boolean;
     columnReorderDragColumnId: false | string;
+    columnVisibilityForGrouping: Record<string, false>;
     focusedWithin: boolean;
     scrollPosition: ScrollPosition;
     pinnedStartScrollListener: ScrollListener;
@@ -1418,7 +1424,7 @@ declare type AggregationReducerResult<AggregationResultType extends any = any> =
  *
  */
 declare type InfiniteTableRowInfo<T> = InfiniteTable_HasGrouping_RowInfoNormal<T> | InfiniteTable_HasGrouping_RowInfoGroup<T> | InfiniteTable_NoGrouping_RowInfoNormal<T>;
-declare type InfiniteTableRowInfoDataDiscriminator<T> = {
+declare type InfiniteTableRowInfoDataDiscriminator_RowInfoNormal<T> = {
     data: T;
     isGroupRow: false;
     rowActive: boolean;
@@ -1426,7 +1432,8 @@ declare type InfiniteTableRowInfoDataDiscriminator<T> = {
     field?: keyof T;
     value: any;
     rowSelected: boolean | null;
-} | {
+};
+declare type InfiniteTableRowInfoDataDiscriminator_RowInfoGroup<T> = {
     rowActive: boolean;
     data: Partial<T> | null;
     rowInfo: InfiniteTable_HasGrouping_RowInfoGroup<T>;
@@ -1435,6 +1442,7 @@ declare type InfiniteTableRowInfoDataDiscriminator<T> = {
     value: any;
     rowSelected: boolean | null;
 };
+declare type InfiniteTableRowInfoDataDiscriminator<T> = InfiniteTableRowInfoDataDiscriminator_RowInfoNormal<T> | InfiniteTableRowInfoDataDiscriminator_RowInfoGroup<T>;
 /**
  * This is the base row info for all scenarios - things every
  * rowInfo is guaranteed to have (be it group or normal row, or dataSource with or without grouping)
@@ -2019,4 +2027,4 @@ declare const components: {
     LoadMask: (props: LoadMaskProps) => JSX.Element;
 };
 
-export { ColumnTypeWithInherit, DataSource, DataSourceAction, DataSourceActionType, DataSourceAggregationReducer, DataSourceComponentActions, DataSourceContextValue, DataSourceData, DataSourceDataParams, DataSourceDataParamsChanges, DataSourceDerivedState, DataSourceFilterFunctionParam, DataSourceFilterOperator, DataSourceFilterOperatorFunction, DataSourceFilterOperatorFunctionParam, DataSourceFilterType, DataSourceFilterValueItem, DataSourceFilterValueItemValueGetter, DataSourceGroupBy, DataSourceGroupRowsList, DataSourceLivePaginationCursorFn, DataSourceLivePaginationCursorParams, DataSourceLivePaginationCursorValue, DataSourceMappedState, DataSourceMappings, DataSourcePivotBy, DataSourcePropAggregationReducers, DataSourcePropCellSelection, DataSourcePropFilterFunction, DataSourcePropFilterTypes, DataSourcePropFilterValue, DataSourcePropGroupBy, DataSourcePropGroupRowsStateObject, DataSourcePropIsRowSelected, DataSourcePropLivePaginationCursor, DataSourcePropMultiRowSelectionChangeParamType, DataSourcePropOnCellSelectionChange, DataSourcePropOnRowSelectionChange, DataSourcePropOnRowSelectionChange_MultiRow, DataSourcePropOnRowSelectionChange_SingleRow, DataSourcePropPivotBy, DataSourcePropRowSelection, DataSourcePropRowSelection_MultiRow, DataSourcePropRowSelection_SingleRow, DataSourcePropSelectionMode, DataSourcePropSortInfo, DataSourcePropSortTypes, DataSourceProps, DataSourceReducer, DataSourceRemoteData, DataSourceSetupState, DataSourceSingleSortInfo, DataSourceSortInfo, DataSourceState, GroupRowsState, InfiniteTable, InfiniteTableAction, InfiniteTableActionType, InfiniteTableApi, InfiniteTableClassName, InfiniteTableColumn, InfiniteTableColumnAggregator, InfiniteTableColumnComparer, InfiniteTableColumnGroup, InfiniteTableColumnRenderParam, InfiniteTableColumnRenderValueParam, InfiniteTableColumnRowspanParam, InfiniteTableColumnSizingOptions, InfiniteTableColumnsMap, InfiniteTableComponent, InfiniteTableComputedColumn, InfiniteTableComputedValues, InfiniteTableContextValue, InfiniteTableFilterEditorProps, InfiniteTableGroupColumnBase, InfiniteTableGroupColumnFunction, InfiniteTableGroupColumnGetterOptions, InfiniteTablePivotColumn, InfiniteTablePropAutoSizeColumnsKey, InfiniteTablePropColumnGroups, InfiniteTablePropColumnOrder, InfiniteTablePropColumnPinning, InfiniteTablePropColumnSizing, InfiniteTablePropColumnTypes, InfiniteTablePropColumnVisibility, InfiniteTablePropColumns, InfiniteTablePropComponents, InfiniteTablePropFilterEditors, InfiniteTablePropGroupColumn, InfiniteTablePropGroupRenderStrategy, InfiniteTablePropHeaderOptions, InfiniteTablePropKeyboardNavigation, InfiniteTablePropRowClassName, InfiniteTablePropRowStyle, InfiniteTableProps, InfiniteTableRowClassNameFn, InfiniteTableRowInfo, InfiniteTableRowStyleFn, InfiniteTableState, LazyGroupDataDeepMap, LazyGroupDataItem, LazyRowInfoGroup, NumberFilterEditor, RowSelectionState, Scrollbars, StringFilterEditor, components, debounce, defaultFilterEditors, defaultFilterTypes, defaultFilterTypes as filterTypes, flatten, getComponentStateRoot, group, interceptMap, multisort, useComponentState, useDataSource, useEffectWithChanges, useInfiniteColumnCell, useInfiniteHeaderCell };
+export { ColumnTypeWithInherit, DataSource, DataSourceAction, DataSourceActionType, DataSourceAggregationReducer, DataSourceComponentActions, DataSourceContextValue, DataSourceData, DataSourceDataParams, DataSourceDataParamsChanges, DataSourceDerivedState, DataSourceFilterFunctionParam, DataSourceFilterOperator, DataSourceFilterOperatorFunction, DataSourceFilterOperatorFunctionParam, DataSourceFilterType, DataSourceFilterValueItem, DataSourceFilterValueItemValueGetter, DataSourceGroupBy, DataSourceGroupRowsList, DataSourceLivePaginationCursorFn, DataSourceLivePaginationCursorParams, DataSourceLivePaginationCursorValue, DataSourceMappedState, DataSourceMappings, DataSourcePivotBy, DataSourcePropAggregationReducers, DataSourcePropCellSelection, DataSourcePropFilterFunction, DataSourcePropFilterTypes, DataSourcePropFilterValue, DataSourcePropGroupBy, DataSourcePropGroupRowsStateObject, DataSourcePropIsRowSelected, DataSourcePropLivePaginationCursor, DataSourcePropMultiRowSelectionChangeParamType, DataSourcePropOnCellSelectionChange, DataSourcePropOnRowSelectionChange, DataSourcePropOnRowSelectionChange_MultiRow, DataSourcePropOnRowSelectionChange_SingleRow, DataSourcePropPivotBy, DataSourcePropRowSelection, DataSourcePropRowSelection_MultiRow, DataSourcePropRowSelection_SingleRow, DataSourcePropSelectionMode, DataSourcePropSortInfo, DataSourcePropSortTypes, DataSourceProps, DataSourceReducer, DataSourceRemoteData, DataSourceSetupState, DataSourceSingleSortInfo, DataSourceSortInfo, DataSourceState, GroupRowsState, InfiniteTable, InfiniteTableAction, InfiniteTableActionType, InfiniteTableApi, InfiniteTableClassName, InfiniteTableColumn, InfiniteTableColumnAggregator, InfiniteTableColumnComparer, InfiniteTableColumnGroup, InfiniteTableColumnRenderFunctionForGroupRows, InfiniteTableColumnRenderFunctionForNormalRows, InfiniteTableColumnRenderParam, InfiniteTableColumnRenderValueParam, InfiniteTableColumnRowspanParam, InfiniteTableColumnSizingOptions, InfiniteTableColumnsMap, InfiniteTableComponent, InfiniteTableComputedColumn, InfiniteTableComputedValues, InfiniteTableContextValue, InfiniteTableFilterEditorProps, InfiniteTableGroupColumnBase, InfiniteTableGroupColumnFunction, InfiniteTableGroupColumnGetterOptions, InfiniteTablePivotColumn, InfiniteTablePropAutoSizeColumnsKey, InfiniteTablePropColumnGroups, InfiniteTablePropColumnOrder, InfiniteTablePropColumnPinning, InfiniteTablePropColumnSizing, InfiniteTablePropColumnTypes, InfiniteTablePropColumnVisibility, InfiniteTablePropColumns, InfiniteTablePropComponents, InfiniteTablePropFilterEditors, InfiniteTablePropGroupColumn, InfiniteTablePropGroupRenderStrategy, InfiniteTablePropHeaderOptions, InfiniteTablePropKeyboardNavigation, InfiniteTablePropRowClassName, InfiniteTablePropRowStyle, InfiniteTableProps, InfiniteTableRowClassNameFn, InfiniteTableRowInfo, InfiniteTableRowStyleFn, InfiniteTableState, LazyGroupDataDeepMap, LazyGroupDataItem, LazyRowInfoGroup, NumberFilterEditor, RowSelectionState, Scrollbars, StringFilterEditor, components, debounce, defaultFilterEditors, defaultFilterTypes, defaultFilterTypes as filterTypes, flatten, getComponentStateRoot, group, interceptMap, multisort, useComponentState, useDataSource, useEffectWithChanges, useInfiniteColumnCell, useInfiniteHeaderCell };

package/index.esm.js

@@ -5063,7 +5063,6 @@ var useColumnPointerEvents = ({
       if (!equalPinning(getState().columnPinning, columnPinning)) {
         componentActions.columnPinning = columnPinning;
       }
-      console.log("old order", getComputed().computedColumnOrder);
       const currentComputedColumnOrder = getComputed().computedColumnOrder;
       if (JSON.stringify(columnOrder, currentComputedColumnOrder)) {
         computedVisibleColumns.forEach((col) => {
@@ -5469,8 +5468,15 @@ function isColumnWithField(c) {
   return typeof c.field === "string";
 }
 function getGroupByColumn(options) {
-  const { column, rowInfo, columnsMap } = options;
-  const groupByColumn = rowInfo.isGroupRow && column.groupByField ? columnsMap.get(rowInfo.isGroupRow ? rowInfo.groupBy[rowInfo.groupBy.length - 1] : "") : void 0;
+  const { column, rowInfo, fieldsToColumn } = options;
+  let groupByColumn = void 0;
+  if (column.groupByField) {
+    if (rowInfo.isGroupRow) {
+      groupByColumn = fieldsToColumn.get(rowInfo.groupBy[rowInfo.groupBy.length - 1]);
+    } else if (column.field) {
+      groupByColumn = fieldsToColumn.get(column.field);
+    }
+  }
   return groupByColumn;
 }
 function getColumnRenderingParams(options) {
@@ -5486,11 +5492,11 @@ function getColumnRenderingParams(options) {
     }, formattedValueContext),
     formattedValueContext,
     renderFunctions: {
-      renderGroupIcon: (groupByColumn == null ? void 0 : groupByColumn.renderGroupIcon) || column.renderGroupIcon,
+      renderGroupIcon: column.renderGroupIcon || (groupByColumn == null ? void 0 : groupByColumn.renderGroupIcon),
       renderSelectionCheckBox: column.renderSelectionCheckBox,
-      renderValue: (groupByColumn == null ? void 0 : groupByColumn.renderValue) || column.renderValue,
-      renderGroupValue: (groupByColumn == null ? void 0 : groupByColumn.renderGroupValue) || column.renderGroupValue,
-      renderLeafValue: (groupByColumn == null ? void 0 : groupByColumn.renderLeafValue) || column.renderLeafValue
+      renderValue: column.renderValue || (groupByColumn == null ? void 0 : groupByColumn.renderValue),
+      renderGroupValue: column.renderGroupValue || (groupByColumn == null ? void 0 : groupByColumn.renderGroupValue),
+      renderLeafValue: column.renderLeafValue || (groupByColumn == null ? void 0 : groupByColumn.renderLeafValue)
     },
     renderParams: getColumnRenderParam(__spreadProps(__spreadValues({}, options), {
       formattedValueContext
@@ -5499,17 +5505,25 @@ function getColumnRenderingParams(options) {
   };
 }
 function getColumnRenderParam(options) {
-  const { column, context, rowInfo, columnsMap, formattedValueContext } = options;
+  const {
+    column,
+    context,
+    rowInfo,
+    columnsMap,
+    fieldsToColumn,
+    formattedValueContext
+  } = options;
   const { value } = formattedValueContext;
   const { api: imperativeApi, getDataSourceState } = context;
   const { indexInAll: rowIndex } = rowInfo;
   const dataSourceState = getDataSourceState();
   const { selectionMode } = dataSourceState;
-  const groupByColumn = rowInfo.isGroupRow ? columnsMap.get(rowInfo.isGroupRow ? rowInfo.groupBy[rowInfo.groupBy.length - 1] : "") : void 0;
+  const groupByColumn = getGroupByColumn({ rowInfo, column, fieldsToColumn });
   const toggleGroupRow = imperativeApi.toggleGroupRow;
   const renderParam = __spreadProps(__spreadValues({
     column,
-    columnsMap
+    columnsMap,
+    fieldsToColumn
   }, formattedValueContext), {
     groupByColumn,
     selectionMode,
@@ -5718,6 +5732,7 @@ function InfiniteTableColumnCellFn(props) {
     rowIndex,
     rowHeight,
     columnsMap,
+    fieldsToColumn,
     domRef,
     hidden,
     showZebraRows
@@ -5748,6 +5763,7 @@ function InfiniteTableColumnCellFn(props) {
     column,
     rowInfo,
     columnsMap,
+    fieldsToColumn,
     context: renderingContext
   });
   const renderParam = renderParams;
@@ -10599,6 +10615,7 @@ function useCellRendering(param) {
     computedPinnedEndColumns,
     computedVisibleColumns,
     computedColumnsMap,
+    fieldsToColumn,
     rowspan,
     toggleGroupRow,
     columnSize
@@ -10703,6 +10720,7 @@ function useCellRendering(param) {
       width,
       column,
       columnsMap: computedColumnsMap,
+      fieldsToColumn,
       rowStyle,
       rowClassName
     };
@@ -10712,6 +10730,7 @@ function useCellRendering(param) {
     getData,
     computedVisibleColumns,
     computedColumnsMap,
+    fieldsToColumn,
     groupRenderStrategy,
     toggleGroupRow,
     showZebraRows,
@@ -11323,24 +11342,45 @@ function useHideColumns(groupByMap) {
   useEffect23(() => {
     const isGrouped = groupBy.length > 0;
     const currentState = getComponentState();
-    const { columnVisibility, hideColumnWhenGrouped: hideColumnWhenGrouped2 } = currentState;
+    const {
+      columnVisibility,
+      columnVisibilityForGrouping,
+      hideColumnWhenGrouped: hideColumnWhenGrouped2
+    } = currentState;
     const newColumnVisibility = __spreadValues({}, columnVisibility);
-    let updated = false;
+    let newColumnVisibilityForGrouping = __spreadValues({}, columnVisibilityForGrouping);
+    let updatedVisibilityWhenGrouping = false;
+    let newlyHiddenColumns = new Set();
+    let newlyDisplayedColumns = new Set();
     computedColumns.forEach((col, id) => {
-      if (col.defaultHiddenWhenGroupedBy || hideColumnWhenGrouped2) {
-        const nowHidden = columnVisibility[id] === false;
-        const shouldBeHidden = col.defaultHiddenWhenGroupedBy === "*" && isGrouped || (col.defaultHiddenWhenGroupedBy === true || hideColumnWhenGrouped2) && col.field && groupByMap.get(col.field) || 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 (col.defaultHiddenWhenGroupedBy || hideColumnWhenGrouped2 != null) {
+        const hideWhenGrouped = col.defaultHiddenWhenGroupedBy === "*" && isGrouped || (col.defaultHiddenWhenGroupedBy === true || hideColumnWhenGrouped2) && col.field && groupByMap.get(col.field) || 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 (hideWhenGrouped) {
+          if (newColumnVisibilityForGrouping[id] !== false) {
+            if (columnVisibility[id] === false) {
+              return;
+            }
+            newColumnVisibilityForGrouping[id] = false;
+            updatedVisibilityWhenGrouping = true;
+            newlyHiddenColumns.add(id);
+          }
+        } else {
+          if (newColumnVisibilityForGrouping[id] === false) {
+            delete newColumnVisibilityForGrouping[id];
+            updatedVisibilityWhenGrouping = true;
+            newlyDisplayedColumns.add(id);
           }
         }
       }
     });
-    if (updated) {
+    if (updatedVisibilityWhenGrouping) {
+      componentActions.columnVisibilityForGrouping = newColumnVisibilityForGrouping;
+      newlyDisplayedColumns.forEach((colId) => {
+        delete newColumnVisibility[colId];
+      });
+      newlyHiddenColumns.forEach((colId) => {
+        newColumnVisibility[colId] = false;
+      });
       componentActions.columnVisibility = newColumnVisibility;
     }
   }, [
@@ -11678,6 +11718,7 @@ var getComputedVisibleColumns = ({
       orderedColumns.set(key, c);
     }
   });
+  const fieldsToColumn = new Map();
   orderedColumns.forEach((c, id) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
     let theComputedVisibleIndex = columnIdsToVisibleIndex.get(id);
@@ -11848,6 +11889,9 @@ var getComputedVisibleColumns = ({
       groupColumns.push(result2);
     }
     computedColumnsMap.set(result2.id, result2);
+    if (result2.field && !result2.groupByField && !fieldsToColumn.has(result2.field)) {
+      fieldsToColumn.set(result2.field, result2);
+    }
   });
   groupColumns.forEach((col) => {
     col.computedSortable = isGroupColumnSortable(col, computedColumnsMap);
@@ -11872,7 +11916,8 @@ var getComputedVisibleColumns = ({
     computedPinnedStartWidth,
     renderSelectionCheckBox: computedVisibleColumns.reduce((bool, c) => {
       return bool || !!c.renderSelectionCheckBox;
-    }, false)
+    }, false),
+    fieldsToColumn
   };
   return result;
 };
@@ -11935,7 +11980,8 @@ var useComputedVisibleColumns = ({
     computedPinnedEndWidth,
     computedPinnedStartWidth,
     renderSelectionCheckBox,
-    computedColumnsMap
+    computedColumnsMap,
+    fieldsToColumn
   } = useMemo10(() => {
     return getComputedVisibleColumns({
       columns,
@@ -12002,7 +12048,8 @@ var useComputedVisibleColumns = ({
     computedUnpinnedColumns,
     computedVisibleColumns,
     computedVisibleColumnsMap,
-    computedColumnOrder
+    computedColumnOrder,
+    fieldsToColumn
   };
   return result;
 };
@@ -12097,7 +12144,8 @@ function useComputed() {
     computedPinnedStartWidth,
     computedPinnedEndWidth,
     renderSelectionCheckBox,
-    computedColumnsMap
+    computedColumnsMap,
+    fieldsToColumn
   } = useComputedVisibleColumns({
     columns,
     columnCssEllipsis: componentState.columnCssEllipsis,
@@ -12159,7 +12207,8 @@ function useComputed() {
     computedPinnedEndColumnsWidth,
     computedUnpinnedColumnsWidth,
     computedUnpinnedOffset,
-    computedPinnedEndOffset
+    computedPinnedEndOffset,
+    fieldsToColumn
   };
 }
 
@@ -12325,7 +12374,7 @@ var useLicense = (licenseKey = "") => {
   const valid = useMemo11(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.4.4"
+      version: "0.4.5"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -12520,6 +12569,7 @@ function initSetupState2() {
     focused: false,
     focusedWithin: false,
     columnsWhenGrouping: columnsGeneratedForGrouping,
+    columnVisibilityForGrouping: {},
     pinnedStartScrollListener: new ScrollListener(),
     pinnedEndScrollListener: new ScrollListener(),
     columnsWhenInlineGroupRenderStrategy: void 0

package/index.js

@@ -5026,7 +5026,6 @@ var useColumnPointerEvents = ({
       if (!equalPinning(getState().columnPinning, columnPinning)) {
         componentActions.columnPinning = columnPinning;
       }
-      console.log("old order", getComputed().computedColumnOrder);
       const currentComputedColumnOrder = getComputed().computedColumnOrder;
       if (JSON.stringify(columnOrder, currentComputedColumnOrder)) {
         computedVisibleColumns.forEach((col) => {
@@ -5416,8 +5415,15 @@ function isColumnWithField(c) {
   return typeof c.field === "string";
 }
 function getGroupByColumn(options) {
-  const { column, rowInfo, columnsMap } = options;
-  const groupByColumn = rowInfo.isGroupRow && column.groupByField ? columnsMap.get(rowInfo.isGroupRow ? rowInfo.groupBy[rowInfo.groupBy.length - 1] : "") : void 0;
+  const { column, rowInfo, fieldsToColumn } = options;
+  let groupByColumn = void 0;
+  if (column.groupByField) {
+    if (rowInfo.isGroupRow) {
+      groupByColumn = fieldsToColumn.get(rowInfo.groupBy[rowInfo.groupBy.length - 1]);
+    } else if (column.field) {
+      groupByColumn = fieldsToColumn.get(column.field);
+    }
+  }
   return groupByColumn;
 }
 function getColumnRenderingParams(options) {
@@ -5433,11 +5439,11 @@ function getColumnRenderingParams(options) {
     }, formattedValueContext),
     formattedValueContext,
     renderFunctions: {
-      renderGroupIcon: (groupByColumn == null ? void 0 : groupByColumn.renderGroupIcon) || column.renderGroupIcon,
+      renderGroupIcon: column.renderGroupIcon || (groupByColumn == null ? void 0 : groupByColumn.renderGroupIcon),
       renderSelectionCheckBox: column.renderSelectionCheckBox,
-      renderValue: (groupByColumn == null ? void 0 : groupByColumn.renderValue) || column.renderValue,
-      renderGroupValue: (groupByColumn == null ? void 0 : groupByColumn.renderGroupValue) || column.renderGroupValue,
-      renderLeafValue: (groupByColumn == null ? void 0 : groupByColumn.renderLeafValue) || column.renderLeafValue
+      renderValue: column.renderValue || (groupByColumn == null ? void 0 : groupByColumn.renderValue),
+      renderGroupValue: column.renderGroupValue || (groupByColumn == null ? void 0 : groupByColumn.renderGroupValue),
+      renderLeafValue: column.renderLeafValue || (groupByColumn == null ? void 0 : groupByColumn.renderLeafValue)
     },
     renderParams: getColumnRenderParam(__spreadProps(__spreadValues({}, options), {
       formattedValueContext
@@ -5446,17 +5452,25 @@ function getColumnRenderingParams(options) {
   };
 }
 function getColumnRenderParam(options) {
-  const { column, context, rowInfo, columnsMap, formattedValueContext } = options;
+  const {
+    column,
+    context,
+    rowInfo,
+    columnsMap,
+    fieldsToColumn,
+    formattedValueContext
+  } = options;
   const { value } = formattedValueContext;
   const { api: imperativeApi, getDataSourceState } = context;
   const { indexInAll: rowIndex } = rowInfo;
   const dataSourceState = getDataSourceState();
   const { selectionMode } = dataSourceState;
-  const groupByColumn = rowInfo.isGroupRow ? columnsMap.get(rowInfo.isGroupRow ? rowInfo.groupBy[rowInfo.groupBy.length - 1] : "") : void 0;
+  const groupByColumn = getGroupByColumn({ rowInfo, column, fieldsToColumn });
   const toggleGroupRow = imperativeApi.toggleGroupRow;
   const renderParam = __spreadProps(__spreadValues({
     column,
-    columnsMap
+    columnsMap,
+    fieldsToColumn
   }, formattedValueContext), {
     groupByColumn,
     selectionMode,
@@ -5661,6 +5675,7 @@ function InfiniteTableColumnCellFn(props) {
     rowIndex,
     rowHeight,
     columnsMap,
+    fieldsToColumn,
     domRef,
     hidden,
     showZebraRows
@@ -5691,6 +5706,7 @@ function InfiniteTableColumnCellFn(props) {
     column,
     rowInfo,
     columnsMap,
+    fieldsToColumn,
     context: renderingContext
   });
   const renderParam = renderParams;
@@ -10500,6 +10516,7 @@ function useCellRendering(param) {
     computedPinnedEndColumns,
     computedVisibleColumns,
     computedColumnsMap,
+    fieldsToColumn,
     rowspan,
     toggleGroupRow,
     columnSize
@@ -10604,6 +10621,7 @@ function useCellRendering(param) {
       width,
       column,
       columnsMap: computedColumnsMap,
+      fieldsToColumn,
       rowStyle,
       rowClassName
     };
@@ -10613,6 +10631,7 @@ function useCellRendering(param) {
     getData,
     computedVisibleColumns,
     computedColumnsMap,
+    fieldsToColumn,
     groupRenderStrategy,
     toggleGroupRow,
     showZebraRows,
@@ -11224,24 +11243,45 @@ function useHideColumns(groupByMap) {
   (0, import_react39.useEffect)(() => {
     const isGrouped = groupBy.length > 0;
     const currentState = getComponentState();
-    const { columnVisibility, hideColumnWhenGrouped: hideColumnWhenGrouped2 } = currentState;
+    const {
+      columnVisibility,
+      columnVisibilityForGrouping,
+      hideColumnWhenGrouped: hideColumnWhenGrouped2
+    } = currentState;
     const newColumnVisibility = __spreadValues({}, columnVisibility);
-    let updated = false;
+    let newColumnVisibilityForGrouping = __spreadValues({}, columnVisibilityForGrouping);
+    let updatedVisibilityWhenGrouping = false;
+    let newlyHiddenColumns = new Set();
+    let newlyDisplayedColumns = new Set();
     computedColumns.forEach((col, id) => {
-      if (col.defaultHiddenWhenGroupedBy || hideColumnWhenGrouped2) {
-        const nowHidden = columnVisibility[id] === false;
-        const shouldBeHidden = col.defaultHiddenWhenGroupedBy === "*" && isGrouped || (col.defaultHiddenWhenGroupedBy === true || hideColumnWhenGrouped2) && col.field && groupByMap.get(col.field) || 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 (col.defaultHiddenWhenGroupedBy || hideColumnWhenGrouped2 != null) {
+        const hideWhenGrouped = col.defaultHiddenWhenGroupedBy === "*" && isGrouped || (col.defaultHiddenWhenGroupedBy === true || hideColumnWhenGrouped2) && col.field && groupByMap.get(col.field) || 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 (hideWhenGrouped) {
+          if (newColumnVisibilityForGrouping[id] !== false) {
+            if (columnVisibility[id] === false) {
+              return;
+            }
+            newColumnVisibilityForGrouping[id] = false;
+            updatedVisibilityWhenGrouping = true;
+            newlyHiddenColumns.add(id);
+          }
+        } else {
+          if (newColumnVisibilityForGrouping[id] === false) {
+            delete newColumnVisibilityForGrouping[id];
+            updatedVisibilityWhenGrouping = true;
+            newlyDisplayedColumns.add(id);
           }
         }
       }
     });
-    if (updated) {
+    if (updatedVisibilityWhenGrouping) {
+      componentActions.columnVisibilityForGrouping = newColumnVisibilityForGrouping;
+      newlyDisplayedColumns.forEach((colId) => {
+        delete newColumnVisibility[colId];
+      });
+      newlyHiddenColumns.forEach((colId) => {
+        newColumnVisibility[colId] = false;
+      });
       componentActions.columnVisibility = newColumnVisibility;
     }
   }, [
@@ -11579,6 +11619,7 @@ var getComputedVisibleColumns = ({
       orderedColumns.set(key, c);
     }
   });
+  const fieldsToColumn = new Map();
   orderedColumns.forEach((c, id) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
     let theComputedVisibleIndex = columnIdsToVisibleIndex.get(id);
@@ -11749,6 +11790,9 @@ var getComputedVisibleColumns = ({
       groupColumns.push(result2);
     }
     computedColumnsMap.set(result2.id, result2);
+    if (result2.field && !result2.groupByField && !fieldsToColumn.has(result2.field)) {
+      fieldsToColumn.set(result2.field, result2);
+    }
   });
   groupColumns.forEach((col) => {
     col.computedSortable = isGroupColumnSortable(col, computedColumnsMap);
@@ -11773,7 +11817,8 @@ var getComputedVisibleColumns = ({
     computedPinnedStartWidth,
     renderSelectionCheckBox: computedVisibleColumns.reduce((bool, c) => {
       return bool || !!c.renderSelectionCheckBox;
-    }, false)
+    }, false),
+    fieldsToColumn
   };
   return result;
 };
@@ -11836,7 +11881,8 @@ var useComputedVisibleColumns = ({
     computedPinnedEndWidth,
     computedPinnedStartWidth,
     renderSelectionCheckBox,
-    computedColumnsMap
+    computedColumnsMap,
+    fieldsToColumn
   } = (0, import_react41.useMemo)(() => {
     return getComputedVisibleColumns({
       columns,
@@ -11903,7 +11949,8 @@ var useComputedVisibleColumns = ({
     computedUnpinnedColumns,
     computedVisibleColumns,
     computedVisibleColumnsMap,
-    computedColumnOrder
+    computedColumnOrder,
+    fieldsToColumn
   };
   return result;
 };
@@ -11998,7 +12045,8 @@ function useComputed() {
     computedPinnedStartWidth,
     computedPinnedEndWidth,
     renderSelectionCheckBox,
-    computedColumnsMap
+    computedColumnsMap,
+    fieldsToColumn
   } = useComputedVisibleColumns({
     columns,
     columnCssEllipsis: componentState.columnCssEllipsis,
@@ -12060,7 +12108,8 @@ function useComputed() {
     computedPinnedEndColumnsWidth,
     computedUnpinnedColumnsWidth,
     computedUnpinnedOffset,
-    computedPinnedEndOffset
+    computedPinnedEndOffset,
+    fieldsToColumn
   };
 }
 
@@ -12226,7 +12275,7 @@ var useLicense = (licenseKey = "") => {
   const valid = (0, import_react44.useMemo)(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.4.4"
+      version: "0.4.5"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -12421,6 +12470,7 @@ function initSetupState2() {
     focused: false,
     focusedWithin: false,
     columnsWhenGrouping: columnsGeneratedForGrouping,
+    columnVisibilityForGrouping: {},
     pinnedStartScrollListener: new ScrollListener(),
     pinnedEndScrollListener: new ScrollListener(),
     columnsWhenInlineGroupRenderStrategy: void 0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@infinite-table/infinite-react",
   "description": "Infinite Table for React",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "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": 1660766942710
+  "publishedAt": 1660890090935
 }