@infinite-table/infinite-react 0.4.4 → 0.4.7

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;
@@ -6769,6 +6785,7 @@ function InfiniteTableHeaderCell(props) {
   };
   const align = column.align || "start";
   const renderChildren = () => {
+    var _a2;
     if (column.renderSortIcon) {
       renderParam.renderBag.sortIcon = /* @__PURE__ */ createElement25(RenderHeaderCellHookComponent, {
         render: column.renderSortIcon,
@@ -6782,9 +6799,10 @@ function InfiniteTableHeaderCell(props) {
         render: defaultRenderSelectionCheckBox2,
         renderParam
       });
-      if (column.renderHeaderSelectionCheckBox && column.renderHeaderSelectionCheckBox !== true) {
+      const renderHeaderSelectionCheckBox = (_a2 = column.renderHeaderSelectionCheckBox) != null ? _a2 : column.renderSelectionCheckBox;
+      if (renderHeaderSelectionCheckBox && renderHeaderSelectionCheckBox !== true) {
         renderParam.renderBag.selectionCheckBox = /* @__PURE__ */ createElement25(RenderHeaderCellHookComponent, {
-          render: column.renderHeaderSelectionCheckBox,
+          render: renderHeaderSelectionCheckBox,
           renderParam: __spreadProps(__spreadValues({}, renderParam), {
             renderBag: __spreadValues({}, renderParam.renderBag)
           })
@@ -9566,7 +9584,7 @@ function getLivePaginationCursorValue(livePaginationCursorProp, state) {
   return livePaginationCursor;
 }
 function mapPropsToState(params) {
-  var _a, _b;
+  var _a;
   const { props, state, oldState } = params;
   const controlledSort = isControlledValue(props.sortInfo);
   const controlledFilter = isControlledValue(props.filterValue);
@@ -9585,7 +9603,7 @@ function mapPropsToState(params) {
     if (props.cellSelection !== void 0 || props.defaultCellSelection !== void 0) {
       selectionMode = "multi-cell";
     } else {
-      const rowSelectionProp = (_a = props.rowSelection) != null ? _a : props.defaultRowSelection;
+      const rowSelectionProp = props.rowSelection !== void 0 ? props.rowSelection : props.defaultRowSelection;
       if (rowSelectionProp !== void 0) {
         if (rowSelectionProp && typeof rowSelectionProp === "object") {
           selectionMode = "multi-row";
@@ -9620,7 +9638,7 @@ function mapPropsToState(params) {
     operatorsByFilterType,
     controlledSort,
     controlledFilter,
-    filterMode: ((_b = props.filterMode) != null ? _b : props.filterFunction != null) ? "local" : typeof props.data === "function" ? "remote" : "local",
+    filterMode: ((_a = props.filterMode) != null ? _a : props.filterFunction != null) ? "local" : typeof props.data === "function" ? "remote" : "local",
     multiSort: Array.isArray(controlledSort ? props.sortInfo : props.defaultSortInfo),
     lazyLoadBatchSize: typeof props.lazyLoad === "object" ? props.lazyLoad.batchSize : void 0
   };
@@ -10599,6 +10617,7 @@ function useCellRendering(param) {
     computedPinnedEndColumns,
     computedVisibleColumns,
     computedColumnsMap,
+    fieldsToColumn,
     rowspan,
     toggleGroupRow,
     columnSize
@@ -10703,6 +10722,7 @@ function useCellRendering(param) {
       width,
       column,
       columnsMap: computedColumnsMap,
+      fieldsToColumn,
       rowStyle,
       rowClassName
     };
@@ -10712,6 +10732,7 @@ function useCellRendering(param) {
     getData,
     computedVisibleColumns,
     computedColumnsMap,
+    fieldsToColumn,
     groupRenderStrategy,
     toggleGroupRow,
     showZebraRows,
@@ -11323,24 +11344,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 +11720,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 +11891,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 +11918,8 @@ var getComputedVisibleColumns = ({
     computedPinnedStartWidth,
     renderSelectionCheckBox: computedVisibleColumns.reduce((bool, c) => {
       return bool || !!c.renderSelectionCheckBox;
-    }, false)
+    }, false),
+    fieldsToColumn
   };
   return result;
 };
@@ -11935,7 +11982,8 @@ var useComputedVisibleColumns = ({
     computedPinnedEndWidth,
     computedPinnedStartWidth,
     renderSelectionCheckBox,
-    computedColumnsMap
+    computedColumnsMap,
+    fieldsToColumn
   } = useMemo10(() => {
     return getComputedVisibleColumns({
       columns,
@@ -12002,7 +12050,8 @@ var useComputedVisibleColumns = ({
     computedUnpinnedColumns,
     computedVisibleColumns,
     computedVisibleColumnsMap,
-    computedColumnOrder
+    computedColumnOrder,
+    fieldsToColumn
   };
   return result;
 };
@@ -12097,7 +12146,8 @@ function useComputed() {
     computedPinnedStartWidth,
     computedPinnedEndWidth,
     renderSelectionCheckBox,
-    computedColumnsMap
+    computedColumnsMap,
+    fieldsToColumn
   } = useComputedVisibleColumns({
     columns,
     columnCssEllipsis: componentState.columnCssEllipsis,
@@ -12159,7 +12209,8 @@ function useComputed() {
     computedPinnedEndColumnsWidth,
     computedUnpinnedColumnsWidth,
     computedUnpinnedOffset,
-    computedPinnedEndOffset
+    computedPinnedEndOffset,
+    fieldsToColumn
   };
 }
 
@@ -12325,7 +12376,7 @@ var useLicense = (licenseKey = "") => {
   const valid = useMemo11(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.4.4"
+      version: "0.4.7"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -12387,7 +12438,7 @@ function useScrollToActiveRow(activeRowIndex, dataCount, imperativeApi) {
         times++;
         rafId.current = requestAnimationFrame(() => {
           didScrollRef.current = imperativeApi.scrollRowIntoView(activeRowIndex, {
-            offset: 30
+            offset: 0
           });
           if (!didScrollRef.current && times < RETRIES2) {
             tryScroll(times);
@@ -12520,6 +12571,7 @@ function initSetupState2() {
     focused: false,
     focusedWithin: false,
     columnsWhenGrouping: columnsGeneratedForGrouping,
+    columnVisibilityForGrouping: {},
     pinnedStartScrollListener: new ScrollListener(),
     pinnedEndScrollListener: new ScrollListener(),
     columnsWhenInlineGroupRenderStrategy: void 0
@@ -12659,11 +12711,10 @@ function onCellClick(context, event) {
   updateRowSelectionOnCellClick(context, event);
 }
 function updateRowSelectionOnCellClick(context, event) {
-  const { rowIndex, getDataSourceState, getComputed, dataSourceActions } = context;
+  const { rowIndex, getDataSourceState, getComputed, dataSourceActions, api } = context;
   const { multiRowSelector, renderSelectionCheckBox } = getComputed();
   const dataSourceState = getDataSourceState();
-  const { selectionMode, groupBy } = dataSourceState;
-  let { rowSelection: rowSelectionState } = dataSourceState;
+  const { selectionMode, groupBy, dataArray } = dataSourceState;
   if (groupBy.length) {
     return false;
   }
@@ -12671,6 +12722,7 @@ function updateRowSelectionOnCellClick(context, event) {
     if (renderSelectionCheckBox && !event.key) {
       return false;
     }
+    let { rowSelection: rowSelectionState } = dataSourceState;
     rowSelectionState = new RowSelectionState(rowSelectionState, rowSelectionStateConfigGetter(getDataSourceState));
     multiRowSelector.rowSelectionState = rowSelectionState;
     if (rowSelectionState && typeof rowSelectionState === "object") {
@@ -12685,6 +12737,12 @@ function updateRowSelectionOnCellClick(context, event) {
       return true;
     }
   } else if (selectionMode === "single-row") {
+    const id = dataArray[rowIndex].id;
+    if (event.metaKey || event.ctrlKey) {
+      api.selectionApi.toggleRowSelection(id);
+    } else {
+      api.selectionApi.selectRow(id);
+    }
   }
   return false;
 }
@@ -12937,7 +12995,6 @@ function handleKeyboardSelection(context) {
       const event = __spreadValues({}, context);
       const { renderSelectionCheckBox } = context.getComputed();
       if (renderSelectionCheckBox) {
-        event.shiftKey = false;
         event.metaKey = false;
         event.ctrlKey = true;
       }

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;
@@ -6701,6 +6717,7 @@ function InfiniteTableHeaderCell(props) {
   };
   const align = column.align || "start";
   const renderChildren = () => {
+    var _a2;
     if (column.renderSortIcon) {
       renderParam.renderBag.sortIcon = /* @__PURE__ */ React28.createElement(RenderHeaderCellHookComponent, {
         render: column.renderSortIcon,
@@ -6714,9 +6731,10 @@ function InfiniteTableHeaderCell(props) {
         render: defaultRenderSelectionCheckBox2,
         renderParam
       });
-      if (column.renderHeaderSelectionCheckBox && column.renderHeaderSelectionCheckBox !== true) {
+      const renderHeaderSelectionCheckBox = (_a2 = column.renderHeaderSelectionCheckBox) != null ? _a2 : column.renderSelectionCheckBox;
+      if (renderHeaderSelectionCheckBox && renderHeaderSelectionCheckBox !== true) {
         renderParam.renderBag.selectionCheckBox = /* @__PURE__ */ React28.createElement(RenderHeaderCellHookComponent, {
-          render: column.renderHeaderSelectionCheckBox,
+          render: renderHeaderSelectionCheckBox,
           renderParam: __spreadProps(__spreadValues({}, renderParam), {
             renderBag: __spreadValues({}, renderParam.renderBag)
           })
@@ -9473,7 +9491,7 @@ function getLivePaginationCursorValue(livePaginationCursorProp, state) {
   return livePaginationCursor;
 }
 function mapPropsToState(params) {
-  var _a, _b;
+  var _a;
   const { props, state, oldState } = params;
   const controlledSort = isControlledValue(props.sortInfo);
   const controlledFilter = isControlledValue(props.filterValue);
@@ -9492,7 +9510,7 @@ function mapPropsToState(params) {
     if (props.cellSelection !== void 0 || props.defaultCellSelection !== void 0) {
       selectionMode = "multi-cell";
     } else {
-      const rowSelectionProp = (_a = props.rowSelection) != null ? _a : props.defaultRowSelection;
+      const rowSelectionProp = props.rowSelection !== void 0 ? props.rowSelection : props.defaultRowSelection;
       if (rowSelectionProp !== void 0) {
         if (rowSelectionProp && typeof rowSelectionProp === "object") {
           selectionMode = "multi-row";
@@ -9527,7 +9545,7 @@ function mapPropsToState(params) {
     operatorsByFilterType,
     controlledSort,
     controlledFilter,
-    filterMode: ((_b = props.filterMode) != null ? _b : props.filterFunction != null) ? "local" : typeof props.data === "function" ? "remote" : "local",
+    filterMode: ((_a = props.filterMode) != null ? _a : props.filterFunction != null) ? "local" : typeof props.data === "function" ? "remote" : "local",
     multiSort: Array.isArray(controlledSort ? props.sortInfo : props.defaultSortInfo),
     lazyLoadBatchSize: typeof props.lazyLoad === "object" ? props.lazyLoad.batchSize : void 0
   };
@@ -10500,6 +10518,7 @@ function useCellRendering(param) {
     computedPinnedEndColumns,
     computedVisibleColumns,
     computedColumnsMap,
+    fieldsToColumn,
     rowspan,
     toggleGroupRow,
     columnSize
@@ -10604,6 +10623,7 @@ function useCellRendering(param) {
       width,
       column,
       columnsMap: computedColumnsMap,
+      fieldsToColumn,
       rowStyle,
       rowClassName
     };
@@ -10613,6 +10633,7 @@ function useCellRendering(param) {
     getData,
     computedVisibleColumns,
     computedColumnsMap,
+    fieldsToColumn,
     groupRenderStrategy,
     toggleGroupRow,
     showZebraRows,
@@ -11224,24 +11245,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 +11621,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 +11792,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 +11819,8 @@ var getComputedVisibleColumns = ({
     computedPinnedStartWidth,
     renderSelectionCheckBox: computedVisibleColumns.reduce((bool, c) => {
       return bool || !!c.renderSelectionCheckBox;
-    }, false)
+    }, false),
+    fieldsToColumn
   };
   return result;
 };
@@ -11836,7 +11883,8 @@ var useComputedVisibleColumns = ({
     computedPinnedEndWidth,
     computedPinnedStartWidth,
     renderSelectionCheckBox,
-    computedColumnsMap
+    computedColumnsMap,
+    fieldsToColumn
   } = (0, import_react41.useMemo)(() => {
     return getComputedVisibleColumns({
       columns,
@@ -11903,7 +11951,8 @@ var useComputedVisibleColumns = ({
     computedUnpinnedColumns,
     computedVisibleColumns,
     computedVisibleColumnsMap,
-    computedColumnOrder
+    computedColumnOrder,
+    fieldsToColumn
   };
   return result;
 };
@@ -11998,7 +12047,8 @@ function useComputed() {
     computedPinnedStartWidth,
     computedPinnedEndWidth,
     renderSelectionCheckBox,
-    computedColumnsMap
+    computedColumnsMap,
+    fieldsToColumn
   } = useComputedVisibleColumns({
     columns,
     columnCssEllipsis: componentState.columnCssEllipsis,
@@ -12060,7 +12110,8 @@ function useComputed() {
     computedPinnedEndColumnsWidth,
     computedUnpinnedColumnsWidth,
     computedUnpinnedOffset,
-    computedPinnedEndOffset
+    computedPinnedEndOffset,
+    fieldsToColumn
   };
 }
 
@@ -12226,7 +12277,7 @@ var useLicense = (licenseKey = "") => {
   const valid = (0, import_react44.useMemo)(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.4.4"
+      version: "0.4.7"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -12288,7 +12339,7 @@ function useScrollToActiveRow(activeRowIndex, dataCount, imperativeApi) {
         times++;
         rafId.current = requestAnimationFrame(() => {
           didScrollRef.current = imperativeApi.scrollRowIntoView(activeRowIndex, {
-            offset: 30
+            offset: 0
           });
           if (!didScrollRef.current && times < RETRIES2) {
             tryScroll(times);
@@ -12421,6 +12472,7 @@ function initSetupState2() {
     focused: false,
     focusedWithin: false,
     columnsWhenGrouping: columnsGeneratedForGrouping,
+    columnVisibilityForGrouping: {},
     pinnedStartScrollListener: new ScrollListener(),
     pinnedEndScrollListener: new ScrollListener(),
     columnsWhenInlineGroupRenderStrategy: void 0
@@ -12560,11 +12612,10 @@ function onCellClick(context, event) {
   updateRowSelectionOnCellClick(context, event);
 }
 function updateRowSelectionOnCellClick(context, event) {
-  const { rowIndex, getDataSourceState, getComputed, dataSourceActions } = context;
+  const { rowIndex, getDataSourceState, getComputed, dataSourceActions, api } = context;
   const { multiRowSelector, renderSelectionCheckBox } = getComputed();
   const dataSourceState = getDataSourceState();
-  const { selectionMode, groupBy } = dataSourceState;
-  let { rowSelection: rowSelectionState } = dataSourceState;
+  const { selectionMode, groupBy, dataArray } = dataSourceState;
   if (groupBy.length) {
     return false;
   }
@@ -12572,6 +12623,7 @@ function updateRowSelectionOnCellClick(context, event) {
     if (renderSelectionCheckBox && !event.key) {
       return false;
     }
+    let { rowSelection: rowSelectionState } = dataSourceState;
     rowSelectionState = new RowSelectionState(rowSelectionState, rowSelectionStateConfigGetter(getDataSourceState));
     multiRowSelector.rowSelectionState = rowSelectionState;
     if (rowSelectionState && typeof rowSelectionState === "object") {
@@ -12586,6 +12638,12 @@ function updateRowSelectionOnCellClick(context, event) {
       return true;
     }
   } else if (selectionMode === "single-row") {
+    const id = dataArray[rowIndex].id;
+    if (event.metaKey || event.ctrlKey) {
+      api.selectionApi.toggleRowSelection(id);
+    } else {
+      api.selectionApi.selectRow(id);
+    }
   }
   return false;
 }
@@ -12838,7 +12896,6 @@ function handleKeyboardSelection(context) {
       const event = __spreadValues({}, context);
       const { renderSelectionCheckBox } = context.getComputed();
       if (renderSelectionCheckBox) {
-        event.shiftKey = false;
         event.metaKey = false;
         event.ctrlKey = true;
       }

package/package.json

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