@infinite-table/infinite-react 4.3.5 → 4.3.6

package/index.d.ts

@@ -1400,6 +1400,7 @@ interface InfiniteTableMappedState<T> {
     onCellClick: InfiniteTableProps<T>['onCellClick'];
     rowDetailCache: RowDetailCache<RowDetailCacheKey, RowDetailCacheEntry>;
     headerOptions: NonUndefined<InfiniteTableProps<T>['headerOptions']>;
+    draggableColumnsRestrictTo: NonUndefined<InfiniteTableProps<T>['draggableColumnsRestrictTo']>;
     onScrollbarsChange: InfiniteTableProps<T>['onScrollbarsChange'];
     getContextMenuItems: InfiniteTableProps<T>['getContextMenuItems'];
     getCellContextMenuItems: InfiniteTableProps<T>['getCellContextMenuItems'];
@@ -1474,6 +1475,7 @@ interface InfiniteTableMappedState<T> {
     columnHeaderHeight: number;
     licenseKey: NonUndefined<InfiniteTableProps<T>['licenseKey']>;
     columnVisibility: InfiniteTablePropColumnVisibility;
+    columnGroupVisibility: NonUndefined<InfiniteTableProps<T>['columnGroupVisibility']>;
     columnSizing: InfiniteTablePropColumnSizing;
     columnTypes: InfiniteTablePropColumnTypes<T>;
     columnGroups: InfiniteTablePropColumnGroups;
@@ -4749,6 +4751,7 @@ declare type LoadMaskProps = {
 declare type InfiniteTablePropColumnOrderNormalized = string[];
 declare type InfiniteTablePropColumnOrder = InfiniteTablePropColumnOrderNormalized | true;
 declare type InfiniteTablePropColumnVisibility = Record<string, false>;
+declare type InfiniteTablePropColumnGroupVisibility = Record<string, boolean>;
 declare type InfiniteTableColumnPinnedValues = false | 'start' | 'end';
 declare type InfiniteTablePropColumnPinning = Record<string, true | 'start' | 'end'>;
 declare type InfiniteTableRowStylingFnParams<T> = {
@@ -5091,6 +5094,7 @@ interface InfiniteTableProps<T> {
     groupRenderStrategy?: InfiniteTablePropGroupRenderStrategy;
     hideEmptyGroupColumns?: boolean;
     columnVisibility?: InfiniteTablePropColumnVisibility;
+    columnGroupVisibility?: InfiniteTablePropColumnGroupVisibility;
     defaultColumnVisibility?: InfiniteTablePropColumnVisibility;
     pinnedStartMaxWidth?: number;
     pinnedEndMaxWidth?: number;
@@ -5169,6 +5173,7 @@ interface InfiniteTableProps<T> {
     activeCellIndex?: [number, number] | null;
     defaultActiveCellIndex?: [number, number] | null;
     draggableColumns?: boolean;
+    draggableColumnsRestrictTo?: false | 'group';
     header?: boolean;
     headerOptions?: InfiniteTablePropHeaderOptions;
     focusedClassName?: string;
@@ -5402,4 +5407,4 @@ declare const components: {
     NumberFilterEditor: typeof NumberFilterEditor;
 };
 
-export { AdvancedAlignable, CellSelectionState, CellSelectionStateObject, ColumnTypeWithInherit, DataClient, DataSource, DataSourceAction, DataSourceActionType, DataSourceAggregationReducer, DataSourceApi, DataSourceCRUDParam, DataSourceComponentActions, DataSourceContextValue, DataSourceData, DataSourceDataParams, DataSourceDataParamsChanges, DataSourceDerivedState, DataSourceFilterFunctionParam, DataSourceFilterOperator, DataSourceFilterOperatorFunction, DataSourceFilterOperatorFunctionParam, DataSourceFilterType, DataSourceFilterValueItem, DataSourceFilterValueItemValueGetter, DataSourceGroupBy, DataSourceGroupRowsList, DataSourceInsertParam, DataSourceLivePaginationCursorFn, DataSourceLivePaginationCursorParams, DataSourceLivePaginationCursorValue, DataSourceMappedState, DataSourceMappings, DataSourceMasterDetailContextValue, DataSourcePivotBy, DataSourcePropAggregationReducers, DataSourcePropCellSelection, DataSourcePropCellSelection_MultiCell, DataSourcePropCellSelection_SingleCell, DataSourcePropFilterFunction, DataSourcePropFilterTypes, DataSourcePropFilterValue, DataSourcePropGroupBy, DataSourcePropGroupRowsStateObject, DataSourcePropIsRowSelected, DataSourcePropLivePaginationCursor, DataSourcePropMultiRowSelectionChangeParamType, DataSourcePropOnCellSelectionChange, DataSourcePropOnCellSelectionChange_MultiCell, DataSourcePropOnCellSelectionChange_SingleCell, DataSourcePropOnRowSelectionChange, DataSourcePropOnRowSelectionChange_MultiRow, DataSourcePropOnRowSelectionChange_SingleRow, DataSourcePropPivotBy, DataSourcePropRowInfoReducers, DataSourcePropRowSelection, DataSourcePropRowSelection_MultiRow, DataSourcePropRowSelection_SingleRow, DataSourcePropSelectionMode, DataSourcePropShouldReloadData, DataSourcePropShouldReloadDataObject, DataSourcePropSortFn, DataSourcePropSortInfo, DataSourcePropSortTypes, DataSourceProps, DataSourcePropsWithChildren, DataSourceRawReducer, DataSourceRemoteData, DataSourceRowInfoReducer, DataSourceSetupState, DataSourceSingleSortInfo, DataSourceSortInfo, DataSourceState, DebugLogger, DeepMap, ElementContainerGetter, FixedSizeSet, GroupRowsState, InfiniteColumnEditorContextType, InfiniteTable, InfiniteTableAction, InfiniteTableActionType, InfiniteTableApi, InfiniteTableClassName, InfiniteTableColumn, InfiniteTableColumnAggregator, InfiniteTableColumnApi, InfiniteTableColumnCellContextType, InfiniteTableColumnComparer, InfiniteTableColumnGroup, InfiniteTableColumnRenderFunctionForGroupRows, InfiniteTableColumnRenderFunctionForNormalRows, InfiniteTableColumnRenderValueParam, InfiniteTableColumnRowspanParam, InfiniteTableColumnSizingOptions, InfiniteTableColumnValueFormatterParams, InfiniteTableColumnValueGetterParams, InfiniteTableComponent, InfiniteTableComputedColumn, InfiniteTableComputedValues, InfiniteTableContextValue, InfiniteTableGroupColumnBase, InfiniteTableGroupColumnFunction, InfiniteTableGroupColumnGetterOptions, InfiniteTablePivotColumn, InfiniteTablePropAutoSizeColumnsKey, InfiniteTablePropColumnGroups, InfiniteTablePropColumnOrder, InfiniteTablePropColumnPinning, InfiniteTablePropColumnSizing, InfiniteTablePropColumnTypes, InfiniteTablePropColumnVisibility, InfiniteTablePropColumns, InfiniteTablePropComponents, InfiniteTablePropGetCellContextMenuItems, InfiniteTablePropGetColumnMenuItems, InfiniteTablePropGroupColumn, InfiniteTablePropGroupRenderStrategy, InfiniteTablePropHeaderOptions, InfiniteTablePropKeyboardNavigation, InfiniteTablePropKeyboardShorcut, InfiniteTablePropMultiSortBehavior, InfiniteTablePropRowClassName, InfiniteTablePropRowStyle, InfiniteTableProps, InfiniteTableRowClassNameFn, InfiniteTableRowInfo, InfiniteTableRowStyleFn, InfiniteTableState, InfiniteTable_HasGrouping_RowInfoGroup, InfiniteTable_HasGrouping_RowInfoNormal, LazyGroupDataDeepMap, LazyGroupDataItem, LazyRowInfoGroup, Menu, MenuChildrenFnParam, MenuColumn, MenuColumnRenderParam, MenuDecoration, MenuIconProps, MenuItemActionContext, MenuItemDefinition, MenuItemObject, MenuProps, MenuRenderable, MenuRuntimeItem, MenuRuntimeItemSelectable, MenuSeparator, OverlayShowParams, RowDetailCache, RowDetailState, RowDetailStateObject, RowSelectionState, ScrollStopInfo, Scrollbars, ShowOverlayFn, TableRenderRange, WeakFixedSizeSet, components, debounce, debug, defaultFilterTypes, eventMatchesKeyboardShortcut, defaultFilterTypes as filterTypes, flatten, buildManagedComponent as getComponentStateRoot, group, interceptMap, keyboardShortcuts, multisort, queryKeyToCacheKey, useManagedComponentState as useComponentState, useDataSourceInternal, useDataSourceState, useEffectWithChanges, useEffectWithObject, useGridScroll, useInfiniteColumnCell, useInfiniteColumnEditor, useInfiniteColumnFilterEditor, useInfiniteHeaderCell, useManagedDataSource, useMasterRowInfo, useOverlay, useOverlayPortal, useRowInfoReducers, useVisibleColumnSizes };
+export { AdvancedAlignable, CellSelectionState, CellSelectionStateObject, ColumnTypeWithInherit, DataClient, DataSource, DataSourceAction, DataSourceActionType, DataSourceAggregationReducer, DataSourceApi, DataSourceCRUDParam, DataSourceComponentActions, DataSourceContextValue, DataSourceData, DataSourceDataParams, DataSourceDataParamsChanges, DataSourceDerivedState, DataSourceFilterFunctionParam, DataSourceFilterOperator, DataSourceFilterOperatorFunction, DataSourceFilterOperatorFunctionParam, DataSourceFilterType, DataSourceFilterValueItem, DataSourceFilterValueItemValueGetter, DataSourceGroupBy, DataSourceGroupRowsList, DataSourceInsertParam, DataSourceLivePaginationCursorFn, DataSourceLivePaginationCursorParams, DataSourceLivePaginationCursorValue, DataSourceMappedState, DataSourceMappings, DataSourceMasterDetailContextValue, DataSourcePivotBy, DataSourcePropAggregationReducers, DataSourcePropCellSelection, DataSourcePropCellSelection_MultiCell, DataSourcePropCellSelection_SingleCell, DataSourcePropFilterFunction, DataSourcePropFilterTypes, DataSourcePropFilterValue, DataSourcePropGroupBy, DataSourcePropGroupRowsStateObject, DataSourcePropIsRowSelected, DataSourcePropLivePaginationCursor, DataSourcePropMultiRowSelectionChangeParamType, DataSourcePropOnCellSelectionChange, DataSourcePropOnCellSelectionChange_MultiCell, DataSourcePropOnCellSelectionChange_SingleCell, DataSourcePropOnRowSelectionChange, DataSourcePropOnRowSelectionChange_MultiRow, DataSourcePropOnRowSelectionChange_SingleRow, DataSourcePropPivotBy, DataSourcePropRowInfoReducers, DataSourcePropRowSelection, DataSourcePropRowSelection_MultiRow, DataSourcePropRowSelection_SingleRow, DataSourcePropSelectionMode, DataSourcePropShouldReloadData, DataSourcePropShouldReloadDataObject, DataSourcePropSortFn, DataSourcePropSortInfo, DataSourcePropSortTypes, DataSourceProps, DataSourcePropsWithChildren, DataSourceRawReducer, DataSourceRemoteData, DataSourceRowInfoReducer, DataSourceSetupState, DataSourceSingleSortInfo, DataSourceSortInfo, DataSourceState, DebugLogger, DeepMap, ElementContainerGetter, FixedSizeSet, GroupRowsState, InfiniteColumnEditorContextType, InfiniteTable, InfiniteTableAction, InfiniteTableActionType, InfiniteTableApi, InfiniteTableClassName, InfiniteTableColumn, InfiniteTableColumnAggregator, InfiniteTableColumnApi, InfiniteTableColumnCellContextType, InfiniteTableColumnComparer, InfiniteTableColumnGroup, InfiniteTableColumnRenderFunctionForGroupRows, InfiniteTableColumnRenderFunctionForNormalRows, InfiniteTableColumnRenderValueParam, InfiniteTableColumnRowspanParam, InfiniteTableColumnSizingOptions, InfiniteTableColumnValueFormatterParams, InfiniteTableColumnValueGetterParams, InfiniteTableComponent, InfiniteTableComputedColumn, InfiniteTableComputedValues, InfiniteTableContextValue, InfiniteTableGroupColumnBase, InfiniteTableGroupColumnFunction, InfiniteTableGroupColumnGetterOptions, InfiniteTablePivotColumn, InfiniteTablePropAutoSizeColumnsKey, InfiniteTablePropColumnGroupVisibility, InfiniteTablePropColumnGroups, InfiniteTablePropColumnOrder, InfiniteTablePropColumnPinning, InfiniteTablePropColumnSizing, InfiniteTablePropColumnTypes, InfiniteTablePropColumnVisibility, InfiniteTablePropColumns, InfiniteTablePropComponents, InfiniteTablePropGetCellContextMenuItems, InfiniteTablePropGetColumnMenuItems, InfiniteTablePropGroupColumn, InfiniteTablePropGroupRenderStrategy, InfiniteTablePropHeaderOptions, InfiniteTablePropKeyboardNavigation, InfiniteTablePropKeyboardShorcut, InfiniteTablePropMultiSortBehavior, InfiniteTablePropRowClassName, InfiniteTablePropRowStyle, InfiniteTableProps, InfiniteTableRowClassNameFn, InfiniteTableRowInfo, InfiniteTableRowStyleFn, InfiniteTableState, InfiniteTable_HasGrouping_RowInfoGroup, InfiniteTable_HasGrouping_RowInfoNormal, LazyGroupDataDeepMap, LazyGroupDataItem, LazyRowInfoGroup, Menu, MenuChildrenFnParam, MenuColumn, MenuColumnRenderParam, MenuDecoration, MenuIconProps, MenuItemActionContext, MenuItemDefinition, MenuItemObject, MenuProps, MenuRenderable, MenuRuntimeItem, MenuRuntimeItemSelectable, MenuSeparator, OverlayShowParams, RowDetailCache, RowDetailState, RowDetailStateObject, RowSelectionState, ScrollStopInfo, Scrollbars, ShowOverlayFn, TableRenderRange, WeakFixedSizeSet, components, debounce, debug, defaultFilterTypes, eventMatchesKeyboardShortcut, defaultFilterTypes as filterTypes, flatten, buildManagedComponent as getComponentStateRoot, group, interceptMap, keyboardShortcuts, multisort, queryKeyToCacheKey, useManagedComponentState as useComponentState, useDataSourceInternal, useDataSourceState, useEffectWithChanges, useEffectWithObject, useGridScroll, useInfiniteColumnCell, useInfiniteColumnEditor, useInfiniteColumnFilterEditor, useInfiniteHeaderCell, useManagedDataSource, useMasterRowInfo, useOverlay, useOverlayPortal, useRowInfoReducers, useVisibleColumnSizes };

package/index.dev.js

@@ -6950,6 +6950,7 @@ function reorderColumnsOnDrag(params) {
     infiniteDOMNode,
     brain,
     dragColumnHeaderTargetRect,
+    draggableColumnsRestrictTo,
     tableRect,
     setProxyPosition,
     api: imperativeApi
@@ -6978,8 +6979,9 @@ function reorderColumnsOnDrag(params) {
     const scrollLeft2 = brain.getScrollPosition().scrollLeft;
     return col.computedOffset >= scrollLeft2 + getCurrentPinnedWidth("start") && col.computedOffset + col.computedWidth < scrollLeft2 + tableRect.width - getCurrentPinnedWidth("end");
   }
-  const getBreakPoints = (columns) => {
-    const breakpoints = [];
+  const getBreakPoints = (columns, options) => {
+    const { restrictToParentGroup, dragColumn: dragColumn2 } = options;
+    let breakpoints = [];
     columns.forEach((c) => {
       const b = {
         columnId: c.id,
@@ -6993,6 +6995,26 @@ function reorderColumnsOnDrag(params) {
         breakpoints.push(b);
       }
     });
+    if (restrictToParentGroup) {
+      let checkAllowedColumnsInDirection2 = function(colIndex, dir2, disallowedTargets2) {
+        const col = columns[colIndex];
+        if (!col) {
+          return;
+        }
+        if (col.columnGroup !== dragColumn2.columnGroup) {
+          disallowedTargets2.add(col.id);
+        }
+        checkAllowedColumnsInDirection2(colIndex + dir2, dir2, disallowedTargets2);
+      };
+      var checkAllowedColumnsInDirection = checkAllowedColumnsInDirection2;
+      const dragColIndex = dragColumn2.computedVisibleIndex;
+      const disallowedTargets = /* @__PURE__ */ new Set();
+      checkAllowedColumnsInDirection2(dragColIndex - 1, -1, disallowedTargets);
+      checkAllowedColumnsInDirection2(dragColIndex + 1, 1, disallowedTargets);
+      breakpoints = breakpoints.filter((b) => {
+        return !disallowedTargets.has(b.columnId);
+      });
+    }
     return breakpoints;
   };
   const initialPinnedStartCount = computedPinnedStartColumns.length;
@@ -7171,7 +7193,10 @@ function reorderColumnsOnDrag(params) {
           imperativeApi.scrollLeft = value;
         }
       });
-      const breakpoints = getBreakPoints(computedVisibleColumns);
+      const breakpoints = getBreakPoints(computedVisibleColumns, {
+        dragColumn,
+        restrictToParentGroup: draggableColumnsRestrictTo === "group"
+      });
       let currentPos = dir === -1 ? dragColumn.computedOffset + diffX : dragColumn.computedOffset + dragColumn.computedWidth + diffX;
       let idx = (0, import_binary_search2.default)(
         breakpoints,
@@ -7330,7 +7355,7 @@ var useColumnPointerEvents = ({
       if (((_a2 = e.target) == null ? void 0 : _a2.tagName) === "INPUT") {
         return;
       }
-      const { brain } = getState();
+      const { brain, draggableColumnsRestrictTo } = getState();
       const {
         computedVisibleColumns,
         computedVisibleColumnsMap,
@@ -7352,6 +7377,7 @@ var useColumnPointerEvents = ({
       let didDragAtLeastOnce = false;
       const dragger = reorderColumnsOnDrag({
         brain,
+        draggableColumnsRestrictTo,
         columnOffsetAtIndexCSSVar: columnOffsetAtIndex4,
         columnWidthAtIndexCSSVar: columnWidthAtIndex3,
         computedPinnedEndColumns,
@@ -9960,6 +9986,7 @@ function InfiniteTableHeaderFn(props) {
   } = props;
   const {
     computed,
+    getState,
     state: { headerBrain, headerOptions, showColumnFilters }
   } = useInfiniteTable();
   const { computedColumnsMap } = computed;
@@ -10012,7 +10039,8 @@ function InfiniteTableHeaderFn(props) {
           computedWidth: colGroupItem.computedWidth,
           groupOffset: colGroupItem.groupOffset
         });
-        return /* @__PURE__ */ React46.createElement(
+        const visible = getState().columnGroupVisibility[colGroupItem.id] !== false;
+        return visible ? /* @__PURE__ */ React46.createElement(
           InfiniteTableHeaderGroup,
           {
             bodyBrain,
@@ -10023,7 +10051,7 @@ function InfiniteTableHeaderFn(props) {
             height,
             columnGroup: computedColumnGroup
           }
-        );
+        ) : null;
       }
       return /* @__PURE__ */ React46.createElement(
         InfiniteTableHeaderCell,
@@ -17333,12 +17361,18 @@ var ScrollListener = class {
 };
 
 // src/components/InfiniteTable/state/computeColumnGroupsDepths.ts
-function computeColumnGroupsDepths(columnGroups) {
+function computeColumnGroupsDepths(columnGroups, columnGroupVisibility) {
   const map2 = /* @__PURE__ */ new Map();
+  function isVisible(colGroupId) {
+    return columnGroupVisibility[colGroupId] !== false;
+  }
   Object.keys(columnGroups).forEach((colGroupId) => {
     const colGroup = columnGroups[colGroupId];
     let parentGroupId = colGroup.columnGroup;
     let depth = 0;
+    if (!isVisible(colGroupId)) {
+      depth = -1;
+    }
     while (parentGroupId) {
       const parent = columnGroups[parentGroupId];
       if (!parent) {
@@ -17347,7 +17381,9 @@ function computeColumnGroupsDepths(columnGroups) {
         }
         break;
       }
-      depth++;
+      if (isVisible(parentGroupId)) {
+        depth++;
+      }
       parentGroupId = parent.columnGroup;
     }
     map2.set(colGroupId, depth);
@@ -17364,6 +17400,7 @@ function getRowDetailRendererFromComponent(RowDetail) {
 }
 
 // src/components/InfiniteTable/state/getInitialState.ts
+var EMPTY_OBJECT = {};
 function createRenderer2(brain) {
   const renderer = new ReactHeadlessTableRenderer(brain);
   const onRenderUpdater = buildSubscriptionCallback();
@@ -17511,6 +17548,7 @@ var forwardProps4 = (_setupState) => {
     onScrollbarsChange: 1,
     autoSizeColumnsKey: 1,
     columnDefaultFlex: 1,
+    draggableColumnsRestrictTo: (draggableColumnsRestrictTo) => draggableColumnsRestrictTo != null ? draggableColumnsRestrictTo : false,
     columnMenuRealignDelay: (columnMenuRealignDelay) => columnMenuRealignDelay != null ? columnMenuRealignDelay : 50,
     scrollStopDelay: (scrollStopDelay) => scrollStopDelay != null ? scrollStopDelay : 250,
     viewportReservedWidth: (viewportReservedWidth) => viewportReservedWidth != null ? viewportReservedWidth : 0,
@@ -17549,7 +17587,8 @@ var forwardProps4 = (_setupState) => {
     rowDetailHeight: (rowDetailHeight) => typeof rowDetailHeight === "number" || typeof rowDetailHeight === "function" ? rowDetailHeight : 300,
     columnHeaderHeight: (columnHeaderHeight) => typeof columnHeaderHeight === "number" ? columnHeaderHeight : 30,
     columns: 1,
-    columnVisibility: (columnVisibility) => columnVisibility != null ? columnVisibility : {},
+    columnVisibility: (columnVisibility) => columnVisibility != null ? columnVisibility : EMPTY_OBJECT,
+    columnGroupVisibility: (columnGroupVisibility) => columnGroupVisibility != null ? columnGroupVisibility : EMPTY_OBJECT,
     // TODO check if columnPinning works when the value for a pinned col is `true` instead of `"start"`
     columnSizing: (columnSizing) => columnSizing || {},
     columnTypes: (columnTypes) => columnTypes || {},
@@ -17630,7 +17669,10 @@ var mapPropsToState = (params) => {
   var _a, _b, _c, _d, _e;
   const { props, state, oldState, parentState } = params;
   const computedColumnGroups = state.pivotColumnGroups || state.columnGroups;
-  const columnGroupsDepthsMap = state.columnGroups && state.columnGroups != (oldState == null ? void 0 : oldState.columnGroups) || state.pivotColumnGroups && state.pivotColumnGroups != (oldState == null ? void 0 : oldState.pivotColumnGroups) ? computeColumnGroupsDepths(computedColumnGroups) : state.columnGroupsDepthsMap;
+  const columnGroupsDepthsMap = state.columnGroups && state.columnGroups != (oldState == null ? void 0 : oldState.columnGroups) || state.columnGroups && state.columnGroupVisibility != (oldState == null ? void 0 : oldState.columnGroupVisibility) || state.pivotColumnGroups && state.pivotColumnGroups != (oldState == null ? void 0 : oldState.pivotColumnGroups) ? computeColumnGroupsDepths(
+    computedColumnGroups,
+    state.columnGroupVisibility
+  ) : state.columnGroupsDepthsMap;
   const groupBy = parentState == null ? void 0 : parentState.groupBy;
   const groupRenderStrategy = getGroupRenderStrategy({
     groupRenderStrategy: props.groupRenderStrategy,
@@ -17685,7 +17727,11 @@ var mapPropsToState = (params) => {
     keyboardNavigation: (_c = props.keyboardNavigation) != null ? _c : state.activeCellIndex != null ? "cell" : state.activeRowIndex != null ? "row" : "cell",
     columnHeaderCssEllipsis: (_e = (_d = props.columnHeaderCssEllipsis) != null ? _d : props.columnCssEllipsis) != null ? _e : true,
     columnGroupsDepthsMap,
-    columnGroupsMaxDepth: columnGroupsDepthsMap != state.columnGroupsDepthsMap ? Math.max(...columnGroupsDepthsMap.values(), 0) : state.columnGroupsMaxDepth,
+    columnGroupsMaxDepth: columnGroupsDepthsMap != state.columnGroupsDepthsMap ? (
+      // was 0, but after implementing columnGroupVisibility
+      // it can be -1, to denote that no column group is visible
+      Math.max(...columnGroupsDepthsMap.values(), -1)
+    ) : state.columnGroupsMaxDepth,
     computedColumnGroups,
     rowHeightCSSVar: typeof props.rowHeight === "string" ? props.rowHeight : "",
     rowDetailHeightCSSVar: typeof props.rowDetailHeight === "string" ? props.rowDetailHeight : "",
@@ -18611,7 +18657,11 @@ function useComputed() {
   const computedPinnedEndOverflow = computedPinnedEndWidth ? computedPinnedEndColumnsWidth > computedPinnedEndWidth : false;
   const [multiRowSelector] = (0, import_react49.useState)(() => {
     const multiRowSelector2 = new MultiRowSelector({
-      getIdForIndex: (index) => getDataSourceState().dataArray[index].id
+      getIdForIndex: (index) => {
+        var _a2;
+        const dataItem = getDataSourceState().dataArray[index];
+        return (_a2 = dataItem == null ? void 0 : dataItem.id) != null ? _a2 : -1;
+      }
     });
     return multiRowSelector2;
   });
@@ -18843,7 +18893,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "4.3.5"
+      version: "4.3.6"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;

package/index.dev.mjs

@@ -6913,6 +6913,7 @@ function reorderColumnsOnDrag(params) {
     infiniteDOMNode,
     brain,
     dragColumnHeaderTargetRect,
+    draggableColumnsRestrictTo,
     tableRect,
     setProxyPosition,
     api: imperativeApi
@@ -6941,8 +6942,9 @@ function reorderColumnsOnDrag(params) {
     const scrollLeft2 = brain.getScrollPosition().scrollLeft;
     return col.computedOffset >= scrollLeft2 + getCurrentPinnedWidth("start") && col.computedOffset + col.computedWidth < scrollLeft2 + tableRect.width - getCurrentPinnedWidth("end");
   }
-  const getBreakPoints = (columns) => {
-    const breakpoints = [];
+  const getBreakPoints = (columns, options) => {
+    const { restrictToParentGroup, dragColumn: dragColumn2 } = options;
+    let breakpoints = [];
     columns.forEach((c) => {
       const b = {
         columnId: c.id,
@@ -6956,6 +6958,26 @@ function reorderColumnsOnDrag(params) {
         breakpoints.push(b);
       }
     });
+    if (restrictToParentGroup) {
+      let checkAllowedColumnsInDirection2 = function(colIndex, dir2, disallowedTargets2) {
+        const col = columns[colIndex];
+        if (!col) {
+          return;
+        }
+        if (col.columnGroup !== dragColumn2.columnGroup) {
+          disallowedTargets2.add(col.id);
+        }
+        checkAllowedColumnsInDirection2(colIndex + dir2, dir2, disallowedTargets2);
+      };
+      var checkAllowedColumnsInDirection = checkAllowedColumnsInDirection2;
+      const dragColIndex = dragColumn2.computedVisibleIndex;
+      const disallowedTargets = /* @__PURE__ */ new Set();
+      checkAllowedColumnsInDirection2(dragColIndex - 1, -1, disallowedTargets);
+      checkAllowedColumnsInDirection2(dragColIndex + 1, 1, disallowedTargets);
+      breakpoints = breakpoints.filter((b) => {
+        return !disallowedTargets.has(b.columnId);
+      });
+    }
     return breakpoints;
   };
   const initialPinnedStartCount = computedPinnedStartColumns.length;
@@ -7134,7 +7156,10 @@ function reorderColumnsOnDrag(params) {
           imperativeApi.scrollLeft = value;
         }
       });
-      const breakpoints = getBreakPoints(computedVisibleColumns);
+      const breakpoints = getBreakPoints(computedVisibleColumns, {
+        dragColumn,
+        restrictToParentGroup: draggableColumnsRestrictTo === "group"
+      });
       let currentPos = dir === -1 ? dragColumn.computedOffset + diffX : dragColumn.computedOffset + dragColumn.computedWidth + diffX;
       let idx = (0, import_binary_search2.default)(
         breakpoints,
@@ -7293,7 +7318,7 @@ var useColumnPointerEvents = ({
       if (((_a2 = e.target) == null ? void 0 : _a2.tagName) === "INPUT") {
         return;
       }
-      const { brain } = getState();
+      const { brain, draggableColumnsRestrictTo } = getState();
       const {
         computedVisibleColumns,
         computedVisibleColumnsMap,
@@ -7315,6 +7340,7 @@ var useColumnPointerEvents = ({
       let didDragAtLeastOnce = false;
       const dragger = reorderColumnsOnDrag({
         brain,
+        draggableColumnsRestrictTo,
         columnOffsetAtIndexCSSVar: columnOffsetAtIndex4,
         columnWidthAtIndexCSSVar: columnWidthAtIndex3,
         computedPinnedEndColumns,
@@ -9923,6 +9949,7 @@ function InfiniteTableHeaderFn(props) {
   } = props;
   const {
     computed,
+    getState,
     state: { headerBrain, headerOptions, showColumnFilters }
   } = useInfiniteTable();
   const { computedColumnsMap } = computed;
@@ -9975,7 +10002,8 @@ function InfiniteTableHeaderFn(props) {
           computedWidth: colGroupItem.computedWidth,
           groupOffset: colGroupItem.groupOffset
         });
-        return /* @__PURE__ */ React46.createElement(
+        const visible = getState().columnGroupVisibility[colGroupItem.id] !== false;
+        return visible ? /* @__PURE__ */ React46.createElement(
           InfiniteTableHeaderGroup,
           {
             bodyBrain,
@@ -9986,7 +10014,7 @@ function InfiniteTableHeaderFn(props) {
             height,
             columnGroup: computedColumnGroup
           }
-        );
+        ) : null;
       }
       return /* @__PURE__ */ React46.createElement(
         InfiniteTableHeaderCell,
@@ -17305,12 +17333,18 @@ var ScrollListener = class {
 };
 
 // src/components/InfiniteTable/state/computeColumnGroupsDepths.ts
-function computeColumnGroupsDepths(columnGroups) {
+function computeColumnGroupsDepths(columnGroups, columnGroupVisibility) {
   const map2 = /* @__PURE__ */ new Map();
+  function isVisible(colGroupId) {
+    return columnGroupVisibility[colGroupId] !== false;
+  }
   Object.keys(columnGroups).forEach((colGroupId) => {
     const colGroup = columnGroups[colGroupId];
     let parentGroupId = colGroup.columnGroup;
     let depth = 0;
+    if (!isVisible(colGroupId)) {
+      depth = -1;
+    }
     while (parentGroupId) {
       const parent = columnGroups[parentGroupId];
       if (!parent) {
@@ -17319,7 +17353,9 @@ function computeColumnGroupsDepths(columnGroups) {
         }
         break;
       }
-      depth++;
+      if (isVisible(parentGroupId)) {
+        depth++;
+      }
       parentGroupId = parent.columnGroup;
     }
     map2.set(colGroupId, depth);
@@ -17336,6 +17372,7 @@ function getRowDetailRendererFromComponent(RowDetail) {
 }
 
 // src/components/InfiniteTable/state/getInitialState.ts
+var EMPTY_OBJECT = {};
 function createRenderer2(brain) {
   const renderer = new ReactHeadlessTableRenderer(brain);
   const onRenderUpdater = buildSubscriptionCallback();
@@ -17483,6 +17520,7 @@ var forwardProps4 = (_setupState) => {
     onScrollbarsChange: 1,
     autoSizeColumnsKey: 1,
     columnDefaultFlex: 1,
+    draggableColumnsRestrictTo: (draggableColumnsRestrictTo) => draggableColumnsRestrictTo != null ? draggableColumnsRestrictTo : false,
     columnMenuRealignDelay: (columnMenuRealignDelay) => columnMenuRealignDelay != null ? columnMenuRealignDelay : 50,
     scrollStopDelay: (scrollStopDelay) => scrollStopDelay != null ? scrollStopDelay : 250,
     viewportReservedWidth: (viewportReservedWidth) => viewportReservedWidth != null ? viewportReservedWidth : 0,
@@ -17521,7 +17559,8 @@ var forwardProps4 = (_setupState) => {
     rowDetailHeight: (rowDetailHeight) => typeof rowDetailHeight === "number" || typeof rowDetailHeight === "function" ? rowDetailHeight : 300,
     columnHeaderHeight: (columnHeaderHeight) => typeof columnHeaderHeight === "number" ? columnHeaderHeight : 30,
     columns: 1,
-    columnVisibility: (columnVisibility) => columnVisibility != null ? columnVisibility : {},
+    columnVisibility: (columnVisibility) => columnVisibility != null ? columnVisibility : EMPTY_OBJECT,
+    columnGroupVisibility: (columnGroupVisibility) => columnGroupVisibility != null ? columnGroupVisibility : EMPTY_OBJECT,
     // TODO check if columnPinning works when the value for a pinned col is `true` instead of `"start"`
     columnSizing: (columnSizing) => columnSizing || {},
     columnTypes: (columnTypes) => columnTypes || {},
@@ -17602,7 +17641,10 @@ var mapPropsToState = (params) => {
   var _a, _b, _c, _d, _e;
   const { props, state, oldState, parentState } = params;
   const computedColumnGroups = state.pivotColumnGroups || state.columnGroups;
-  const columnGroupsDepthsMap = state.columnGroups && state.columnGroups != (oldState == null ? void 0 : oldState.columnGroups) || state.pivotColumnGroups && state.pivotColumnGroups != (oldState == null ? void 0 : oldState.pivotColumnGroups) ? computeColumnGroupsDepths(computedColumnGroups) : state.columnGroupsDepthsMap;
+  const columnGroupsDepthsMap = state.columnGroups && state.columnGroups != (oldState == null ? void 0 : oldState.columnGroups) || state.columnGroups && state.columnGroupVisibility != (oldState == null ? void 0 : oldState.columnGroupVisibility) || state.pivotColumnGroups && state.pivotColumnGroups != (oldState == null ? void 0 : oldState.pivotColumnGroups) ? computeColumnGroupsDepths(
+    computedColumnGroups,
+    state.columnGroupVisibility
+  ) : state.columnGroupsDepthsMap;
   const groupBy = parentState == null ? void 0 : parentState.groupBy;
   const groupRenderStrategy = getGroupRenderStrategy({
     groupRenderStrategy: props.groupRenderStrategy,
@@ -17657,7 +17699,11 @@ var mapPropsToState = (params) => {
     keyboardNavigation: (_c = props.keyboardNavigation) != null ? _c : state.activeCellIndex != null ? "cell" : state.activeRowIndex != null ? "row" : "cell",
     columnHeaderCssEllipsis: (_e = (_d = props.columnHeaderCssEllipsis) != null ? _d : props.columnCssEllipsis) != null ? _e : true,
     columnGroupsDepthsMap,
-    columnGroupsMaxDepth: columnGroupsDepthsMap != state.columnGroupsDepthsMap ? Math.max(...columnGroupsDepthsMap.values(), 0) : state.columnGroupsMaxDepth,
+    columnGroupsMaxDepth: columnGroupsDepthsMap != state.columnGroupsDepthsMap ? (
+      // was 0, but after implementing columnGroupVisibility
+      // it can be -1, to denote that no column group is visible
+      Math.max(...columnGroupsDepthsMap.values(), -1)
+    ) : state.columnGroupsMaxDepth,
     computedColumnGroups,
     rowHeightCSSVar: typeof props.rowHeight === "string" ? props.rowHeight : "",
     rowDetailHeightCSSVar: typeof props.rowDetailHeight === "string" ? props.rowDetailHeight : "",
@@ -18583,7 +18629,11 @@ function useComputed() {
   const computedPinnedEndOverflow = computedPinnedEndWidth ? computedPinnedEndColumnsWidth > computedPinnedEndWidth : false;
   const [multiRowSelector] = useState17(() => {
     const multiRowSelector2 = new MultiRowSelector({
-      getIdForIndex: (index) => getDataSourceState().dataArray[index].id
+      getIdForIndex: (index) => {
+        var _a2;
+        const dataItem = getDataSourceState().dataArray[index];
+        return (_a2 = dataItem == null ? void 0 : dataItem.id) != null ? _a2 : -1;
+      }
     });
     return multiRowSelector2;
   });
@@ -18815,7 +18865,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "4.3.5"
+      version: "4.3.6"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;

package/index.js

@@ -6950,6 +6950,7 @@ function reorderColumnsOnDrag(params) {
     infiniteDOMNode,
     brain,
     dragColumnHeaderTargetRect,
+    draggableColumnsRestrictTo,
     tableRect,
     setProxyPosition,
     api: imperativeApi
@@ -6978,8 +6979,9 @@ function reorderColumnsOnDrag(params) {
     const scrollLeft2 = brain.getScrollPosition().scrollLeft;
     return col.computedOffset >= scrollLeft2 + getCurrentPinnedWidth("start") && col.computedOffset + col.computedWidth < scrollLeft2 + tableRect.width - getCurrentPinnedWidth("end");
   }
-  const getBreakPoints = (columns) => {
-    const breakpoints = [];
+  const getBreakPoints = (columns, options) => {
+    const { restrictToParentGroup, dragColumn: dragColumn2 } = options;
+    let breakpoints = [];
     columns.forEach((c) => {
       const b = {
         columnId: c.id,
@@ -6993,6 +6995,26 @@ function reorderColumnsOnDrag(params) {
         breakpoints.push(b);
       }
     });
+    if (restrictToParentGroup) {
+      let checkAllowedColumnsInDirection2 = function(colIndex, dir2, disallowedTargets2) {
+        const col = columns[colIndex];
+        if (!col) {
+          return;
+        }
+        if (col.columnGroup !== dragColumn2.columnGroup) {
+          disallowedTargets2.add(col.id);
+        }
+        checkAllowedColumnsInDirection2(colIndex + dir2, dir2, disallowedTargets2);
+      };
+      var checkAllowedColumnsInDirection = checkAllowedColumnsInDirection2;
+      const dragColIndex = dragColumn2.computedVisibleIndex;
+      const disallowedTargets = /* @__PURE__ */ new Set();
+      checkAllowedColumnsInDirection2(dragColIndex - 1, -1, disallowedTargets);
+      checkAllowedColumnsInDirection2(dragColIndex + 1, 1, disallowedTargets);
+      breakpoints = breakpoints.filter((b) => {
+        return !disallowedTargets.has(b.columnId);
+      });
+    }
     return breakpoints;
   };
   const initialPinnedStartCount = computedPinnedStartColumns.length;
@@ -7171,7 +7193,10 @@ function reorderColumnsOnDrag(params) {
           imperativeApi.scrollLeft = value;
         }
       });
-      const breakpoints = getBreakPoints(computedVisibleColumns);
+      const breakpoints = getBreakPoints(computedVisibleColumns, {
+        dragColumn,
+        restrictToParentGroup: draggableColumnsRestrictTo === "group"
+      });
       let currentPos = dir === -1 ? dragColumn.computedOffset + diffX : dragColumn.computedOffset + dragColumn.computedWidth + diffX;
       let idx = (0, import_binary_search2.default)(
         breakpoints,
@@ -7330,7 +7355,7 @@ var useColumnPointerEvents = ({
       if (((_a2 = e.target) == null ? void 0 : _a2.tagName) === "INPUT") {
         return;
       }
-      const { brain } = getState();
+      const { brain, draggableColumnsRestrictTo } = getState();
       const {
         computedVisibleColumns,
         computedVisibleColumnsMap,
@@ -7352,6 +7377,7 @@ var useColumnPointerEvents = ({
       let didDragAtLeastOnce = false;
       const dragger = reorderColumnsOnDrag({
         brain,
+        draggableColumnsRestrictTo,
         columnOffsetAtIndexCSSVar: columnOffsetAtIndex4,
         columnWidthAtIndexCSSVar: columnWidthAtIndex3,
         computedPinnedEndColumns,
@@ -9960,6 +9986,7 @@ function InfiniteTableHeaderFn(props) {
   } = props;
   const {
     computed,
+    getState,
     state: { headerBrain, headerOptions, showColumnFilters }
   } = useInfiniteTable();
   const { computedColumnsMap } = computed;
@@ -10012,7 +10039,8 @@ function InfiniteTableHeaderFn(props) {
           computedWidth: colGroupItem.computedWidth,
           groupOffset: colGroupItem.groupOffset
         });
-        return /* @__PURE__ */ React46.createElement(
+        const visible = getState().columnGroupVisibility[colGroupItem.id] !== false;
+        return visible ? /* @__PURE__ */ React46.createElement(
           InfiniteTableHeaderGroup,
           {
             bodyBrain,
@@ -10023,7 +10051,7 @@ function InfiniteTableHeaderFn(props) {
             height,
             columnGroup: computedColumnGroup
           }
-        );
+        ) : null;
       }
       return /* @__PURE__ */ React46.createElement(
         InfiniteTableHeaderCell,
@@ -17333,12 +17361,18 @@ var ScrollListener = class {
 };
 
 // src/components/InfiniteTable/state/computeColumnGroupsDepths.ts
-function computeColumnGroupsDepths(columnGroups) {
+function computeColumnGroupsDepths(columnGroups, columnGroupVisibility) {
   const map2 = /* @__PURE__ */ new Map();
+  function isVisible(colGroupId) {
+    return columnGroupVisibility[colGroupId] !== false;
+  }
   Object.keys(columnGroups).forEach((colGroupId) => {
     const colGroup = columnGroups[colGroupId];
     let parentGroupId = colGroup.columnGroup;
     let depth = 0;
+    if (!isVisible(colGroupId)) {
+      depth = -1;
+    }
     while (parentGroupId) {
       const parent = columnGroups[parentGroupId];
       if (!parent) {
@@ -17347,7 +17381,9 @@ function computeColumnGroupsDepths(columnGroups) {
         }
         break;
       }
-      depth++;
+      if (isVisible(parentGroupId)) {
+        depth++;
+      }
       parentGroupId = parent.columnGroup;
     }
     map2.set(colGroupId, depth);
@@ -17364,6 +17400,7 @@ function getRowDetailRendererFromComponent(RowDetail) {
 }
 
 // src/components/InfiniteTable/state/getInitialState.ts
+var EMPTY_OBJECT = {};
 function createRenderer2(brain) {
   const renderer = new ReactHeadlessTableRenderer(brain);
   const onRenderUpdater = buildSubscriptionCallback();
@@ -17511,6 +17548,7 @@ var forwardProps4 = (_setupState) => {
     onScrollbarsChange: 1,
     autoSizeColumnsKey: 1,
     columnDefaultFlex: 1,
+    draggableColumnsRestrictTo: (draggableColumnsRestrictTo) => draggableColumnsRestrictTo != null ? draggableColumnsRestrictTo : false,
     columnMenuRealignDelay: (columnMenuRealignDelay) => columnMenuRealignDelay != null ? columnMenuRealignDelay : 50,
     scrollStopDelay: (scrollStopDelay) => scrollStopDelay != null ? scrollStopDelay : 250,
     viewportReservedWidth: (viewportReservedWidth) => viewportReservedWidth != null ? viewportReservedWidth : 0,
@@ -17549,7 +17587,8 @@ var forwardProps4 = (_setupState) => {
     rowDetailHeight: (rowDetailHeight) => typeof rowDetailHeight === "number" || typeof rowDetailHeight === "function" ? rowDetailHeight : 300,
     columnHeaderHeight: (columnHeaderHeight) => typeof columnHeaderHeight === "number" ? columnHeaderHeight : 30,
     columns: 1,
-    columnVisibility: (columnVisibility) => columnVisibility != null ? columnVisibility : {},
+    columnVisibility: (columnVisibility) => columnVisibility != null ? columnVisibility : EMPTY_OBJECT,
+    columnGroupVisibility: (columnGroupVisibility) => columnGroupVisibility != null ? columnGroupVisibility : EMPTY_OBJECT,
     // TODO check if columnPinning works when the value for a pinned col is `true` instead of `"start"`
     columnSizing: (columnSizing) => columnSizing || {},
     columnTypes: (columnTypes) => columnTypes || {},
@@ -17630,7 +17669,10 @@ var mapPropsToState = (params) => {
   var _a, _b, _c, _d, _e;
   const { props, state, oldState, parentState } = params;
   const computedColumnGroups = state.pivotColumnGroups || state.columnGroups;
-  const columnGroupsDepthsMap = state.columnGroups && state.columnGroups != (oldState == null ? void 0 : oldState.columnGroups) || state.pivotColumnGroups && state.pivotColumnGroups != (oldState == null ? void 0 : oldState.pivotColumnGroups) ? computeColumnGroupsDepths(computedColumnGroups) : state.columnGroupsDepthsMap;
+  const columnGroupsDepthsMap = state.columnGroups && state.columnGroups != (oldState == null ? void 0 : oldState.columnGroups) || state.columnGroups && state.columnGroupVisibility != (oldState == null ? void 0 : oldState.columnGroupVisibility) || state.pivotColumnGroups && state.pivotColumnGroups != (oldState == null ? void 0 : oldState.pivotColumnGroups) ? computeColumnGroupsDepths(
+    computedColumnGroups,
+    state.columnGroupVisibility
+  ) : state.columnGroupsDepthsMap;
   const groupBy = parentState == null ? void 0 : parentState.groupBy;
   const groupRenderStrategy = getGroupRenderStrategy({
     groupRenderStrategy: props.groupRenderStrategy,
@@ -17685,7 +17727,11 @@ var mapPropsToState = (params) => {
     keyboardNavigation: (_c = props.keyboardNavigation) != null ? _c : state.activeCellIndex != null ? "cell" : state.activeRowIndex != null ? "row" : "cell",
     columnHeaderCssEllipsis: (_e = (_d = props.columnHeaderCssEllipsis) != null ? _d : props.columnCssEllipsis) != null ? _e : true,
     columnGroupsDepthsMap,
-    columnGroupsMaxDepth: columnGroupsDepthsMap != state.columnGroupsDepthsMap ? Math.max(...columnGroupsDepthsMap.values(), 0) : state.columnGroupsMaxDepth,
+    columnGroupsMaxDepth: columnGroupsDepthsMap != state.columnGroupsDepthsMap ? (
+      // was 0, but after implementing columnGroupVisibility
+      // it can be -1, to denote that no column group is visible
+      Math.max(...columnGroupsDepthsMap.values(), -1)
+    ) : state.columnGroupsMaxDepth,
     computedColumnGroups,
     rowHeightCSSVar: typeof props.rowHeight === "string" ? props.rowHeight : "",
     rowDetailHeightCSSVar: typeof props.rowDetailHeight === "string" ? props.rowDetailHeight : "",
@@ -18611,7 +18657,11 @@ function useComputed() {
   const computedPinnedEndOverflow = computedPinnedEndWidth ? computedPinnedEndColumnsWidth > computedPinnedEndWidth : false;
   const [multiRowSelector] = (0, import_react49.useState)(() => {
     const multiRowSelector2 = new MultiRowSelector({
-      getIdForIndex: (index) => getDataSourceState().dataArray[index].id
+      getIdForIndex: (index) => {
+        var _a2;
+        const dataItem = getDataSourceState().dataArray[index];
+        return (_a2 = dataItem == null ? void 0 : dataItem.id) != null ? _a2 : -1;
+      }
     });
     return multiRowSelector2;
   });
@@ -18843,7 +18893,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "4.3.5"
+      version: "4.3.6"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;

package/index.mjs

@@ -6913,6 +6913,7 @@ function reorderColumnsOnDrag(params) {
     infiniteDOMNode,
     brain,
     dragColumnHeaderTargetRect,
+    draggableColumnsRestrictTo,
     tableRect,
     setProxyPosition,
     api: imperativeApi
@@ -6941,8 +6942,9 @@ function reorderColumnsOnDrag(params) {
     const scrollLeft2 = brain.getScrollPosition().scrollLeft;
     return col.computedOffset >= scrollLeft2 + getCurrentPinnedWidth("start") && col.computedOffset + col.computedWidth < scrollLeft2 + tableRect.width - getCurrentPinnedWidth("end");
   }
-  const getBreakPoints = (columns) => {
-    const breakpoints = [];
+  const getBreakPoints = (columns, options) => {
+    const { restrictToParentGroup, dragColumn: dragColumn2 } = options;
+    let breakpoints = [];
     columns.forEach((c) => {
       const b = {
         columnId: c.id,
@@ -6956,6 +6958,26 @@ function reorderColumnsOnDrag(params) {
         breakpoints.push(b);
       }
     });
+    if (restrictToParentGroup) {
+      let checkAllowedColumnsInDirection2 = function(colIndex, dir2, disallowedTargets2) {
+        const col = columns[colIndex];
+        if (!col) {
+          return;
+        }
+        if (col.columnGroup !== dragColumn2.columnGroup) {
+          disallowedTargets2.add(col.id);
+        }
+        checkAllowedColumnsInDirection2(colIndex + dir2, dir2, disallowedTargets2);
+      };
+      var checkAllowedColumnsInDirection = checkAllowedColumnsInDirection2;
+      const dragColIndex = dragColumn2.computedVisibleIndex;
+      const disallowedTargets = /* @__PURE__ */ new Set();
+      checkAllowedColumnsInDirection2(dragColIndex - 1, -1, disallowedTargets);
+      checkAllowedColumnsInDirection2(dragColIndex + 1, 1, disallowedTargets);
+      breakpoints = breakpoints.filter((b) => {
+        return !disallowedTargets.has(b.columnId);
+      });
+    }
     return breakpoints;
   };
   const initialPinnedStartCount = computedPinnedStartColumns.length;
@@ -7134,7 +7156,10 @@ function reorderColumnsOnDrag(params) {
           imperativeApi.scrollLeft = value;
         }
       });
-      const breakpoints = getBreakPoints(computedVisibleColumns);
+      const breakpoints = getBreakPoints(computedVisibleColumns, {
+        dragColumn,
+        restrictToParentGroup: draggableColumnsRestrictTo === "group"
+      });
       let currentPos = dir === -1 ? dragColumn.computedOffset + diffX : dragColumn.computedOffset + dragColumn.computedWidth + diffX;
       let idx = (0, import_binary_search2.default)(
         breakpoints,
@@ -7293,7 +7318,7 @@ var useColumnPointerEvents = ({
       if (((_a2 = e.target) == null ? void 0 : _a2.tagName) === "INPUT") {
         return;
       }
-      const { brain } = getState();
+      const { brain, draggableColumnsRestrictTo } = getState();
       const {
         computedVisibleColumns,
         computedVisibleColumnsMap,
@@ -7315,6 +7340,7 @@ var useColumnPointerEvents = ({
       let didDragAtLeastOnce = false;
       const dragger = reorderColumnsOnDrag({
         brain,
+        draggableColumnsRestrictTo,
         columnOffsetAtIndexCSSVar: columnOffsetAtIndex4,
         columnWidthAtIndexCSSVar: columnWidthAtIndex3,
         computedPinnedEndColumns,
@@ -9923,6 +9949,7 @@ function InfiniteTableHeaderFn(props) {
   } = props;
   const {
     computed,
+    getState,
     state: { headerBrain, headerOptions, showColumnFilters }
   } = useInfiniteTable();
   const { computedColumnsMap } = computed;
@@ -9975,7 +10002,8 @@ function InfiniteTableHeaderFn(props) {
           computedWidth: colGroupItem.computedWidth,
           groupOffset: colGroupItem.groupOffset
         });
-        return /* @__PURE__ */ React46.createElement(
+        const visible = getState().columnGroupVisibility[colGroupItem.id] !== false;
+        return visible ? /* @__PURE__ */ React46.createElement(
           InfiniteTableHeaderGroup,
           {
             bodyBrain,
@@ -9986,7 +10014,7 @@ function InfiniteTableHeaderFn(props) {
             height,
             columnGroup: computedColumnGroup
           }
-        );
+        ) : null;
       }
       return /* @__PURE__ */ React46.createElement(
         InfiniteTableHeaderCell,
@@ -17305,12 +17333,18 @@ var ScrollListener = class {
 };
 
 // src/components/InfiniteTable/state/computeColumnGroupsDepths.ts
-function computeColumnGroupsDepths(columnGroups) {
+function computeColumnGroupsDepths(columnGroups, columnGroupVisibility) {
   const map2 = /* @__PURE__ */ new Map();
+  function isVisible(colGroupId) {
+    return columnGroupVisibility[colGroupId] !== false;
+  }
   Object.keys(columnGroups).forEach((colGroupId) => {
     const colGroup = columnGroups[colGroupId];
     let parentGroupId = colGroup.columnGroup;
     let depth = 0;
+    if (!isVisible(colGroupId)) {
+      depth = -1;
+    }
     while (parentGroupId) {
       const parent = columnGroups[parentGroupId];
       if (!parent) {
@@ -17319,7 +17353,9 @@ function computeColumnGroupsDepths(columnGroups) {
         }
         break;
       }
-      depth++;
+      if (isVisible(parentGroupId)) {
+        depth++;
+      }
       parentGroupId = parent.columnGroup;
     }
     map2.set(colGroupId, depth);
@@ -17336,6 +17372,7 @@ function getRowDetailRendererFromComponent(RowDetail) {
 }
 
 // src/components/InfiniteTable/state/getInitialState.ts
+var EMPTY_OBJECT = {};
 function createRenderer2(brain) {
   const renderer = new ReactHeadlessTableRenderer(brain);
   const onRenderUpdater = buildSubscriptionCallback();
@@ -17483,6 +17520,7 @@ var forwardProps4 = (_setupState) => {
     onScrollbarsChange: 1,
     autoSizeColumnsKey: 1,
     columnDefaultFlex: 1,
+    draggableColumnsRestrictTo: (draggableColumnsRestrictTo) => draggableColumnsRestrictTo != null ? draggableColumnsRestrictTo : false,
     columnMenuRealignDelay: (columnMenuRealignDelay) => columnMenuRealignDelay != null ? columnMenuRealignDelay : 50,
     scrollStopDelay: (scrollStopDelay) => scrollStopDelay != null ? scrollStopDelay : 250,
     viewportReservedWidth: (viewportReservedWidth) => viewportReservedWidth != null ? viewportReservedWidth : 0,
@@ -17521,7 +17559,8 @@ var forwardProps4 = (_setupState) => {
     rowDetailHeight: (rowDetailHeight) => typeof rowDetailHeight === "number" || typeof rowDetailHeight === "function" ? rowDetailHeight : 300,
     columnHeaderHeight: (columnHeaderHeight) => typeof columnHeaderHeight === "number" ? columnHeaderHeight : 30,
     columns: 1,
-    columnVisibility: (columnVisibility) => columnVisibility != null ? columnVisibility : {},
+    columnVisibility: (columnVisibility) => columnVisibility != null ? columnVisibility : EMPTY_OBJECT,
+    columnGroupVisibility: (columnGroupVisibility) => columnGroupVisibility != null ? columnGroupVisibility : EMPTY_OBJECT,
     // TODO check if columnPinning works when the value for a pinned col is `true` instead of `"start"`
     columnSizing: (columnSizing) => columnSizing || {},
     columnTypes: (columnTypes) => columnTypes || {},
@@ -17602,7 +17641,10 @@ var mapPropsToState = (params) => {
   var _a, _b, _c, _d, _e;
   const { props, state, oldState, parentState } = params;
   const computedColumnGroups = state.pivotColumnGroups || state.columnGroups;
-  const columnGroupsDepthsMap = state.columnGroups && state.columnGroups != (oldState == null ? void 0 : oldState.columnGroups) || state.pivotColumnGroups && state.pivotColumnGroups != (oldState == null ? void 0 : oldState.pivotColumnGroups) ? computeColumnGroupsDepths(computedColumnGroups) : state.columnGroupsDepthsMap;
+  const columnGroupsDepthsMap = state.columnGroups && state.columnGroups != (oldState == null ? void 0 : oldState.columnGroups) || state.columnGroups && state.columnGroupVisibility != (oldState == null ? void 0 : oldState.columnGroupVisibility) || state.pivotColumnGroups && state.pivotColumnGroups != (oldState == null ? void 0 : oldState.pivotColumnGroups) ? computeColumnGroupsDepths(
+    computedColumnGroups,
+    state.columnGroupVisibility
+  ) : state.columnGroupsDepthsMap;
   const groupBy = parentState == null ? void 0 : parentState.groupBy;
   const groupRenderStrategy = getGroupRenderStrategy({
     groupRenderStrategy: props.groupRenderStrategy,
@@ -17657,7 +17699,11 @@ var mapPropsToState = (params) => {
     keyboardNavigation: (_c = props.keyboardNavigation) != null ? _c : state.activeCellIndex != null ? "cell" : state.activeRowIndex != null ? "row" : "cell",
     columnHeaderCssEllipsis: (_e = (_d = props.columnHeaderCssEllipsis) != null ? _d : props.columnCssEllipsis) != null ? _e : true,
     columnGroupsDepthsMap,
-    columnGroupsMaxDepth: columnGroupsDepthsMap != state.columnGroupsDepthsMap ? Math.max(...columnGroupsDepthsMap.values(), 0) : state.columnGroupsMaxDepth,
+    columnGroupsMaxDepth: columnGroupsDepthsMap != state.columnGroupsDepthsMap ? (
+      // was 0, but after implementing columnGroupVisibility
+      // it can be -1, to denote that no column group is visible
+      Math.max(...columnGroupsDepthsMap.values(), -1)
+    ) : state.columnGroupsMaxDepth,
     computedColumnGroups,
     rowHeightCSSVar: typeof props.rowHeight === "string" ? props.rowHeight : "",
     rowDetailHeightCSSVar: typeof props.rowDetailHeight === "string" ? props.rowDetailHeight : "",
@@ -18583,7 +18629,11 @@ function useComputed() {
   const computedPinnedEndOverflow = computedPinnedEndWidth ? computedPinnedEndColumnsWidth > computedPinnedEndWidth : false;
   const [multiRowSelector] = useState17(() => {
     const multiRowSelector2 = new MultiRowSelector({
-      getIdForIndex: (index) => getDataSourceState().dataArray[index].id
+      getIdForIndex: (index) => {
+        var _a2;
+        const dataItem = getDataSourceState().dataArray[index];
+        return (_a2 = dataItem == null ? void 0 : dataItem.id) != null ? _a2 : -1;
+      }
     });
     return multiRowSelector2;
   });
@@ -18815,7 +18865,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "4.3.5"
+      version: "4.3.6"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;

package/package.json

@@ -25,7 +25,7 @@
   "bugs": {
     "url": "https://github.com/infinite-table/infinite-react/issues"
   },
-  "version": "4.3.5",
+  "version": "4.3.6",
   "main": "index.js",
   "module": "index.mjs",
   "typings": "index.d.ts",
@@ -34,5 +34,5 @@
   },
   "license": "Commercial & Open Source",
   "//": "will be updated at build time",
-  "publishedAt": 1723208083972
+  "publishedAt": 1723632776523
 }