@infinite-table/infinite-react 4.3.5 → 4.3.7

package/index.d.ts

@@ -632,7 +632,13 @@ declare type InfiniteTableColumn<DATA_TYPE> = {
     field?: KeyOfNoSymbol<DATA_TYPE>;
     valueGetter?: InfiniteTableColumnValueGetter<DATA_TYPE>;
     defaultSortable?: InfiniteTableColumnSortable<DATA_TYPE>;
-    draggable?: boolean;
+    /**
+     * Whether the column is draggable by default.
+     *
+     * This prop overrides the top-level columnDefaultDraggable prop, but is
+     * overridden by the top-level draggableColumns prop.
+     */
+    defaultDraggable?: boolean;
     resizable?: boolean;
     shouldAcceptEdit?: (params: InfiniteTablePropOnEditAcceptedParams<DATA_TYPE>) => boolean | Error | Promise<boolean | Error>;
     contentFocusable?: InfiniteTableColumnContentFocusable<DATA_TYPE>;
@@ -1400,6 +1406,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'];
@@ -1459,7 +1466,8 @@ interface InfiniteTableMappedState<T> {
     columnDefaultWidth: NonUndefined<InfiniteTableProps<T>['columnDefaultWidth']>;
     columnDefaultFlex: InfiniteTableProps<T>['columnDefaultFlex'];
     columnCssEllipsis: NonUndefined<InfiniteTableProps<T>['columnCssEllipsis']>;
-    draggableColumns: NonUndefined<InfiniteTableProps<T>['draggableColumns']>;
+    draggableColumns: InfiniteTableProps<T>['draggableColumns'];
+    columnDefaultDraggable: InfiniteTableProps<T>['columnDefaultDraggable'];
     sortable: InfiniteTableProps<T>['sortable'];
     hideEmptyGroupColumns: NonUndefined<InfiniteTableProps<T>['hideEmptyGroupColumns']>;
     hideColumnWhenGrouped: NonUndefined<InfiniteTableProps<T>['hideColumnWhenGrouped']>;
@@ -1474,6 +1482,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 +4758,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> = {
@@ -4780,7 +4790,7 @@ declare type InfiniteTableColumnType<T> = {
     defaultHiddenWhenGroupedBy?: InfiniteTableColumn<T>['defaultHiddenWhenGroupedBy'];
     header?: InfiniteTableColumn<T>['header'];
     comparer?: InfiniteTableColumn<T>['comparer'];
-    draggable?: InfiniteTableColumn<T>['draggable'];
+    draggable?: InfiniteTableColumn<T>['defaultDraggable'];
     resizable?: InfiniteTableColumn<T>['resizable'];
     align?: InfiniteTableColumn<T>['align'];
     headerAlign?: InfiniteTableColumn<T>['headerAlign'];
@@ -4939,6 +4949,7 @@ interface InfiniteTableApi<T> {
     getSortingForColumn: (columnId: string) => SortDir | null;
     getColumnApi: (columnId: string) => InfiniteTableColumnApi<T> | null;
     setVisibilityForColumn: (columnId: string, visible: boolean) => void;
+    setVisibilityForColumnGroup: (columnGroupId: string, visible: boolean) => void;
     getVisibleColumnsCount: () => number;
     scrollRowIntoView: (rowIndex: number, config?: {
         scrollAdjustPosition?: ScrollAdjustPosition;
@@ -5091,6 +5102,8 @@ interface InfiniteTableProps<T> {
     groupRenderStrategy?: InfiniteTablePropGroupRenderStrategy;
     hideEmptyGroupColumns?: boolean;
     columnVisibility?: InfiniteTablePropColumnVisibility;
+    columnGroupVisibility?: InfiniteTablePropColumnGroupVisibility;
+    defaultColumnGroupVisibility?: InfiniteTablePropColumnGroupVisibility;
     defaultColumnVisibility?: InfiniteTablePropColumnVisibility;
     pinnedStartMaxWidth?: number;
     pinnedEndMaxWidth?: number;
@@ -5116,6 +5129,7 @@ interface InfiniteTableProps<T> {
     collapsedColumnGroups?: InfiniteTablePropCollapsedColumnGroups;
     onScrollbarsChange?: (scrollbars: Scrollbars) => void;
     onColumnVisibilityChange?: (columnVisibility: InfiniteTablePropColumnVisibility) => void;
+    onColumnGroupVisibilityChange?: (columnGroupVisibility: InfiniteTablePropColumnGroupVisibility) => void;
     columnTypes?: InfiniteTablePropColumnTypes<T>;
     showSeparatePivotColumnForSingleAggregation?: boolean;
     isRowDetailExpanded?: (rowInfo: InfiniteTableRowInfo<T>) => boolean;
@@ -5168,7 +5182,19 @@ interface InfiniteTableProps<T> {
     onActiveCellIndexChange?: (activeCellIndex: [number, number]) => void;
     activeCellIndex?: [number, number] | null;
     defaultActiveCellIndex?: [number, number] | null;
+    /**
+     * Whether the columns are draggable by default.
+     *
+     * This is the prop that has the lowest priority - it's overridden by column.defaultDraggable and ultimately by draggableColumns
+     */
+    columnDefaultDraggable?: boolean;
+    /**
+     * Whether the columns are draggable by default.
+     *
+     * This is the prop that has the highest priority - overrides columnDefaultDraggable and column.defaultDraggable
+     */
     draggableColumns?: boolean;
+    draggableColumnsRestrictTo?: false | 'group';
     header?: boolean;
     headerOptions?: InfiniteTablePropHeaderOptions;
     focusedClassName?: string;
@@ -5402,4 +5428,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

@@ -5686,6 +5686,7 @@ var getComputedColumns = ({
   viewportReservedWidth,
   resizableColumns,
   draggableColumns,
+  columnDefaultDraggable,
   columnOrder,
   columnPinning,
   editable,
@@ -5969,7 +5970,7 @@ var getComputedColumns = ({
       computedSortedDesc,
       computedVisibleIndex,
       computedPinned,
-      computedDraggable: (_z = (_y = c.draggable) != null ? _y : draggableColumns) != null ? _z : DEFAULT_DRAGGABLE,
+      computedDraggable: (_z = (_y = draggableColumns != null ? draggableColumns : c.defaultDraggable) != null ? _y : columnDefaultDraggable) != null ? _z : DEFAULT_DRAGGABLE,
       computedFirstInCategory,
       computedLastInCategory,
       computedFirst: theComputedVisibleIndex === 0,
@@ -6950,6 +6951,7 @@ function reorderColumnsOnDrag(params) {
     infiniteDOMNode,
     brain,
     dragColumnHeaderTargetRect,
+    draggableColumnsRestrictTo,
     tableRect,
     setProxyPosition,
     api: imperativeApi
@@ -6978,8 +6980,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 +6996,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 +7194,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 +7356,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 +7378,7 @@ var useColumnPointerEvents = ({
       let didDragAtLeastOnce = false;
       const dragger = reorderColumnsOnDrag({
         brain,
+        draggableColumnsRestrictTo,
         columnOffsetAtIndexCSSVar: columnOffsetAtIndex4,
         columnWidthAtIndexCSSVar: columnWidthAtIndex3,
         computedPinnedEndColumns,
@@ -9960,6 +9987,7 @@ function InfiniteTableHeaderFn(props) {
   } = props;
   const {
     computed,
+    getState,
     state: { headerBrain, headerOptions, showColumnFilters }
   } = useInfiniteTable();
   const { computedColumnsMap } = computed;
@@ -10012,7 +10040,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 +10052,7 @@ function InfiniteTableHeaderFn(props) {
             height,
             columnGroup: computedColumnGroup
           }
-        );
+        ) : null;
       }
       return /* @__PURE__ */ React46.createElement(
         InfiniteTableHeaderCell,
@@ -15890,6 +15919,15 @@ var InfiniteTableApiImpl = class {
     this.setColumnOrder = (columnOrder) => {
       this.actions.columnOrder = columnOrder;
     };
+    this.setVisibilityForColumnGroup = (columnGroupId, visible) => {
+      const columnGroupVisibility = __spreadValues({}, this.getState().columnGroupVisibility);
+      if (visible) {
+        delete columnGroupVisibility[columnGroupId];
+      } else {
+        columnGroupVisibility[columnGroupId] = false;
+      }
+      this.actions.columnGroupVisibility = columnGroupVisibility;
+    };
     this.collapseAllGroupRows = () => {
       const state = this.getDataSourceState();
       const newState = new GroupRowsState(state.groupRowsState);
@@ -17333,12 +17371,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 +17391,9 @@ function computeColumnGroupsDepths(columnGroups) {
         }
         break;
       }
-      depth++;
+      if (isVisible(parentGroupId)) {
+        depth++;
+      }
       parentGroupId = parent.columnGroup;
     }
     map2.set(colGroupId, depth);
@@ -17364,6 +17410,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 +17558,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,
@@ -17525,7 +17573,8 @@ var forwardProps4 = (_setupState) => {
     columnMaxWidth: (columnMaxWidth) => columnMaxWidth != null ? columnMaxWidth : 5e3,
     columnDefaultWidth: (columnDefaultWidth) => columnDefaultWidth != null ? columnDefaultWidth : 200,
     columnCssEllipsis: (columnCssEllipsis) => columnCssEllipsis != null ? columnCssEllipsis : true,
-    draggableColumns: (draggableColumns) => draggableColumns != null ? draggableColumns : true,
+    draggableColumns: 1,
+    columnDefaultDraggable: 1,
     headerOptions: (headerOptions) => __spreadValues({
       alwaysReserveSpaceForSortIcon: true
     }, headerOptions),
@@ -17549,7 +17598,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 +17680,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 +17738,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 : "",
@@ -18238,6 +18295,7 @@ var useComputedColumns = ({
   columnCssEllipsis,
   columnHeaderCssEllipsis,
   draggableColumns,
+  columnDefaultDraggable,
   sortInfo,
   multiSort,
   filterValue,
@@ -18299,6 +18357,7 @@ var useComputedColumns = ({
       pinnedEndMaxWidth,
       pinnedStartMaxWidth,
       draggableColumns,
+      columnDefaultDraggable,
       columnOrder,
       columnPinning,
       columnDefaultEditable,
@@ -18326,6 +18385,8 @@ var useComputedColumns = ({
     columnOrder,
     columnVisibility,
     columnVisibilityAssumeVisible,
+    columnDefaultDraggable,
+    draggableColumns,
     resizableColumns,
     pinnedEndMaxWidth,
     pinnedStartMaxWidth,
@@ -18583,6 +18644,7 @@ function useComputed() {
     columnDefaultWidth: componentState.columnDefaultWidth,
     columnDefaultFlex: componentState.columnDefaultFlex,
     columnDefaultSortable: componentState.columnDefaultSortable,
+    columnDefaultDraggable: componentState.columnDefaultDraggable,
     pinnedStartMaxWidth: componentState.pinnedStartMaxWidth,
     pinnedEndMaxWidth: componentState.pinnedEndMaxWidth,
     bodySize,
@@ -18611,7 +18673,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 +18909,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "4.3.5"
+      version: "4.3.7"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;

package/index.dev.mjs

@@ -5649,6 +5649,7 @@ var getComputedColumns = ({
   viewportReservedWidth,
   resizableColumns,
   draggableColumns,
+  columnDefaultDraggable,
   columnOrder,
   columnPinning,
   editable,
@@ -5932,7 +5933,7 @@ var getComputedColumns = ({
       computedSortedDesc,
       computedVisibleIndex,
       computedPinned,
-      computedDraggable: (_z = (_y = c.draggable) != null ? _y : draggableColumns) != null ? _z : DEFAULT_DRAGGABLE,
+      computedDraggable: (_z = (_y = draggableColumns != null ? draggableColumns : c.defaultDraggable) != null ? _y : columnDefaultDraggable) != null ? _z : DEFAULT_DRAGGABLE,
       computedFirstInCategory,
       computedLastInCategory,
       computedFirst: theComputedVisibleIndex === 0,
@@ -6913,6 +6914,7 @@ function reorderColumnsOnDrag(params) {
     infiniteDOMNode,
     brain,
     dragColumnHeaderTargetRect,
+    draggableColumnsRestrictTo,
     tableRect,
     setProxyPosition,
     api: imperativeApi
@@ -6941,8 +6943,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 +6959,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 +7157,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 +7319,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 +7341,7 @@ var useColumnPointerEvents = ({
       let didDragAtLeastOnce = false;
       const dragger = reorderColumnsOnDrag({
         brain,
+        draggableColumnsRestrictTo,
         columnOffsetAtIndexCSSVar: columnOffsetAtIndex4,
         columnWidthAtIndexCSSVar: columnWidthAtIndex3,
         computedPinnedEndColumns,
@@ -9923,6 +9950,7 @@ function InfiniteTableHeaderFn(props) {
   } = props;
   const {
     computed,
+    getState,
     state: { headerBrain, headerOptions, showColumnFilters }
   } = useInfiniteTable();
   const { computedColumnsMap } = computed;
@@ -9975,7 +10003,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 +10015,7 @@ function InfiniteTableHeaderFn(props) {
             height,
             columnGroup: computedColumnGroup
           }
-        );
+        ) : null;
       }
       return /* @__PURE__ */ React46.createElement(
         InfiniteTableHeaderCell,
@@ -15858,6 +15887,15 @@ var InfiniteTableApiImpl = class {
     this.setColumnOrder = (columnOrder) => {
       this.actions.columnOrder = columnOrder;
     };
+    this.setVisibilityForColumnGroup = (columnGroupId, visible) => {
+      const columnGroupVisibility = __spreadValues({}, this.getState().columnGroupVisibility);
+      if (visible) {
+        delete columnGroupVisibility[columnGroupId];
+      } else {
+        columnGroupVisibility[columnGroupId] = false;
+      }
+      this.actions.columnGroupVisibility = columnGroupVisibility;
+    };
     this.collapseAllGroupRows = () => {
       const state = this.getDataSourceState();
       const newState = new GroupRowsState(state.groupRowsState);
@@ -17305,12 +17343,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 +17363,9 @@ function computeColumnGroupsDepths(columnGroups) {
         }
         break;
       }
-      depth++;
+      if (isVisible(parentGroupId)) {
+        depth++;
+      }
       parentGroupId = parent.columnGroup;
     }
     map2.set(colGroupId, depth);
@@ -17336,6 +17382,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 +17530,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,
@@ -17497,7 +17545,8 @@ var forwardProps4 = (_setupState) => {
     columnMaxWidth: (columnMaxWidth) => columnMaxWidth != null ? columnMaxWidth : 5e3,
     columnDefaultWidth: (columnDefaultWidth) => columnDefaultWidth != null ? columnDefaultWidth : 200,
     columnCssEllipsis: (columnCssEllipsis) => columnCssEllipsis != null ? columnCssEllipsis : true,
-    draggableColumns: (draggableColumns) => draggableColumns != null ? draggableColumns : true,
+    draggableColumns: 1,
+    columnDefaultDraggable: 1,
     headerOptions: (headerOptions) => __spreadValues({
       alwaysReserveSpaceForSortIcon: true
     }, headerOptions),
@@ -17521,7 +17570,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 +17652,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 +17710,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 : "",
@@ -18210,6 +18267,7 @@ var useComputedColumns = ({
   columnCssEllipsis,
   columnHeaderCssEllipsis,
   draggableColumns,
+  columnDefaultDraggable,
   sortInfo,
   multiSort,
   filterValue,
@@ -18271,6 +18329,7 @@ var useComputedColumns = ({
       pinnedEndMaxWidth,
       pinnedStartMaxWidth,
       draggableColumns,
+      columnDefaultDraggable,
       columnOrder,
       columnPinning,
       columnDefaultEditable,
@@ -18298,6 +18357,8 @@ var useComputedColumns = ({
     columnOrder,
     columnVisibility,
     columnVisibilityAssumeVisible,
+    columnDefaultDraggable,
+    draggableColumns,
     resizableColumns,
     pinnedEndMaxWidth,
     pinnedStartMaxWidth,
@@ -18555,6 +18616,7 @@ function useComputed() {
     columnDefaultWidth: componentState.columnDefaultWidth,
     columnDefaultFlex: componentState.columnDefaultFlex,
     columnDefaultSortable: componentState.columnDefaultSortable,
+    columnDefaultDraggable: componentState.columnDefaultDraggable,
     pinnedStartMaxWidth: componentState.pinnedStartMaxWidth,
     pinnedEndMaxWidth: componentState.pinnedEndMaxWidth,
     bodySize,
@@ -18583,7 +18645,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 +18881,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "4.3.5"
+      version: "4.3.7"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;

package/index.js

@@ -5686,6 +5686,7 @@ var getComputedColumns = ({
   viewportReservedWidth,
   resizableColumns,
   draggableColumns,
+  columnDefaultDraggable,
   columnOrder,
   columnPinning,
   editable,
@@ -5969,7 +5970,7 @@ var getComputedColumns = ({
       computedSortedDesc,
       computedVisibleIndex,
       computedPinned,
-      computedDraggable: (_z = (_y = c.draggable) != null ? _y : draggableColumns) != null ? _z : DEFAULT_DRAGGABLE,
+      computedDraggable: (_z = (_y = draggableColumns != null ? draggableColumns : c.defaultDraggable) != null ? _y : columnDefaultDraggable) != null ? _z : DEFAULT_DRAGGABLE,
       computedFirstInCategory,
       computedLastInCategory,
       computedFirst: theComputedVisibleIndex === 0,
@@ -6950,6 +6951,7 @@ function reorderColumnsOnDrag(params) {
     infiniteDOMNode,
     brain,
     dragColumnHeaderTargetRect,
+    draggableColumnsRestrictTo,
     tableRect,
     setProxyPosition,
     api: imperativeApi
@@ -6978,8 +6980,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 +6996,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 +7194,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 +7356,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 +7378,7 @@ var useColumnPointerEvents = ({
       let didDragAtLeastOnce = false;
       const dragger = reorderColumnsOnDrag({
         brain,
+        draggableColumnsRestrictTo,
         columnOffsetAtIndexCSSVar: columnOffsetAtIndex4,
         columnWidthAtIndexCSSVar: columnWidthAtIndex3,
         computedPinnedEndColumns,
@@ -9960,6 +9987,7 @@ function InfiniteTableHeaderFn(props) {
   } = props;
   const {
     computed,
+    getState,
     state: { headerBrain, headerOptions, showColumnFilters }
   } = useInfiniteTable();
   const { computedColumnsMap } = computed;
@@ -10012,7 +10040,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 +10052,7 @@ function InfiniteTableHeaderFn(props) {
             height,
             columnGroup: computedColumnGroup
           }
-        );
+        ) : null;
       }
       return /* @__PURE__ */ React46.createElement(
         InfiniteTableHeaderCell,
@@ -15890,6 +15919,15 @@ var InfiniteTableApiImpl = class {
     this.setColumnOrder = (columnOrder) => {
       this.actions.columnOrder = columnOrder;
     };
+    this.setVisibilityForColumnGroup = (columnGroupId, visible) => {
+      const columnGroupVisibility = __spreadValues({}, this.getState().columnGroupVisibility);
+      if (visible) {
+        delete columnGroupVisibility[columnGroupId];
+      } else {
+        columnGroupVisibility[columnGroupId] = false;
+      }
+      this.actions.columnGroupVisibility = columnGroupVisibility;
+    };
     this.collapseAllGroupRows = () => {
       const state = this.getDataSourceState();
       const newState = new GroupRowsState(state.groupRowsState);
@@ -17333,12 +17371,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 +17391,9 @@ function computeColumnGroupsDepths(columnGroups) {
         }
         break;
       }
-      depth++;
+      if (isVisible(parentGroupId)) {
+        depth++;
+      }
       parentGroupId = parent.columnGroup;
     }
     map2.set(colGroupId, depth);
@@ -17364,6 +17410,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 +17558,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,
@@ -17525,7 +17573,8 @@ var forwardProps4 = (_setupState) => {
     columnMaxWidth: (columnMaxWidth) => columnMaxWidth != null ? columnMaxWidth : 5e3,
     columnDefaultWidth: (columnDefaultWidth) => columnDefaultWidth != null ? columnDefaultWidth : 200,
     columnCssEllipsis: (columnCssEllipsis) => columnCssEllipsis != null ? columnCssEllipsis : true,
-    draggableColumns: (draggableColumns) => draggableColumns != null ? draggableColumns : true,
+    draggableColumns: 1,
+    columnDefaultDraggable: 1,
     headerOptions: (headerOptions) => __spreadValues({
       alwaysReserveSpaceForSortIcon: true
     }, headerOptions),
@@ -17549,7 +17598,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 +17680,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 +17738,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 : "",
@@ -18238,6 +18295,7 @@ var useComputedColumns = ({
   columnCssEllipsis,
   columnHeaderCssEllipsis,
   draggableColumns,
+  columnDefaultDraggable,
   sortInfo,
   multiSort,
   filterValue,
@@ -18299,6 +18357,7 @@ var useComputedColumns = ({
       pinnedEndMaxWidth,
       pinnedStartMaxWidth,
       draggableColumns,
+      columnDefaultDraggable,
       columnOrder,
       columnPinning,
       columnDefaultEditable,
@@ -18326,6 +18385,8 @@ var useComputedColumns = ({
     columnOrder,
     columnVisibility,
     columnVisibilityAssumeVisible,
+    columnDefaultDraggable,
+    draggableColumns,
     resizableColumns,
     pinnedEndMaxWidth,
     pinnedStartMaxWidth,
@@ -18583,6 +18644,7 @@ function useComputed() {
     columnDefaultWidth: componentState.columnDefaultWidth,
     columnDefaultFlex: componentState.columnDefaultFlex,
     columnDefaultSortable: componentState.columnDefaultSortable,
+    columnDefaultDraggable: componentState.columnDefaultDraggable,
     pinnedStartMaxWidth: componentState.pinnedStartMaxWidth,
     pinnedEndMaxWidth: componentState.pinnedEndMaxWidth,
     bodySize,
@@ -18611,7 +18673,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 +18909,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "4.3.5"
+      version: "4.3.7"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;

package/index.mjs

@@ -5649,6 +5649,7 @@ var getComputedColumns = ({
   viewportReservedWidth,
   resizableColumns,
   draggableColumns,
+  columnDefaultDraggable,
   columnOrder,
   columnPinning,
   editable,
@@ -5932,7 +5933,7 @@ var getComputedColumns = ({
       computedSortedDesc,
       computedVisibleIndex,
       computedPinned,
-      computedDraggable: (_z = (_y = c.draggable) != null ? _y : draggableColumns) != null ? _z : DEFAULT_DRAGGABLE,
+      computedDraggable: (_z = (_y = draggableColumns != null ? draggableColumns : c.defaultDraggable) != null ? _y : columnDefaultDraggable) != null ? _z : DEFAULT_DRAGGABLE,
       computedFirstInCategory,
       computedLastInCategory,
       computedFirst: theComputedVisibleIndex === 0,
@@ -6913,6 +6914,7 @@ function reorderColumnsOnDrag(params) {
     infiniteDOMNode,
     brain,
     dragColumnHeaderTargetRect,
+    draggableColumnsRestrictTo,
     tableRect,
     setProxyPosition,
     api: imperativeApi
@@ -6941,8 +6943,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 +6959,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 +7157,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 +7319,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 +7341,7 @@ var useColumnPointerEvents = ({
       let didDragAtLeastOnce = false;
       const dragger = reorderColumnsOnDrag({
         brain,
+        draggableColumnsRestrictTo,
         columnOffsetAtIndexCSSVar: columnOffsetAtIndex4,
         columnWidthAtIndexCSSVar: columnWidthAtIndex3,
         computedPinnedEndColumns,
@@ -9923,6 +9950,7 @@ function InfiniteTableHeaderFn(props) {
   } = props;
   const {
     computed,
+    getState,
     state: { headerBrain, headerOptions, showColumnFilters }
   } = useInfiniteTable();
   const { computedColumnsMap } = computed;
@@ -9975,7 +10003,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 +10015,7 @@ function InfiniteTableHeaderFn(props) {
             height,
             columnGroup: computedColumnGroup
           }
-        );
+        ) : null;
       }
       return /* @__PURE__ */ React46.createElement(
         InfiniteTableHeaderCell,
@@ -15858,6 +15887,15 @@ var InfiniteTableApiImpl = class {
     this.setColumnOrder = (columnOrder) => {
       this.actions.columnOrder = columnOrder;
     };
+    this.setVisibilityForColumnGroup = (columnGroupId, visible) => {
+      const columnGroupVisibility = __spreadValues({}, this.getState().columnGroupVisibility);
+      if (visible) {
+        delete columnGroupVisibility[columnGroupId];
+      } else {
+        columnGroupVisibility[columnGroupId] = false;
+      }
+      this.actions.columnGroupVisibility = columnGroupVisibility;
+    };
     this.collapseAllGroupRows = () => {
       const state = this.getDataSourceState();
       const newState = new GroupRowsState(state.groupRowsState);
@@ -17305,12 +17343,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 +17363,9 @@ function computeColumnGroupsDepths(columnGroups) {
         }
         break;
       }
-      depth++;
+      if (isVisible(parentGroupId)) {
+        depth++;
+      }
       parentGroupId = parent.columnGroup;
     }
     map2.set(colGroupId, depth);
@@ -17336,6 +17382,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 +17530,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,
@@ -17497,7 +17545,8 @@ var forwardProps4 = (_setupState) => {
     columnMaxWidth: (columnMaxWidth) => columnMaxWidth != null ? columnMaxWidth : 5e3,
     columnDefaultWidth: (columnDefaultWidth) => columnDefaultWidth != null ? columnDefaultWidth : 200,
     columnCssEllipsis: (columnCssEllipsis) => columnCssEllipsis != null ? columnCssEllipsis : true,
-    draggableColumns: (draggableColumns) => draggableColumns != null ? draggableColumns : true,
+    draggableColumns: 1,
+    columnDefaultDraggable: 1,
     headerOptions: (headerOptions) => __spreadValues({
       alwaysReserveSpaceForSortIcon: true
     }, headerOptions),
@@ -17521,7 +17570,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 +17652,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 +17710,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 : "",
@@ -18210,6 +18267,7 @@ var useComputedColumns = ({
   columnCssEllipsis,
   columnHeaderCssEllipsis,
   draggableColumns,
+  columnDefaultDraggable,
   sortInfo,
   multiSort,
   filterValue,
@@ -18271,6 +18329,7 @@ var useComputedColumns = ({
       pinnedEndMaxWidth,
       pinnedStartMaxWidth,
       draggableColumns,
+      columnDefaultDraggable,
       columnOrder,
       columnPinning,
       columnDefaultEditable,
@@ -18298,6 +18357,8 @@ var useComputedColumns = ({
     columnOrder,
     columnVisibility,
     columnVisibilityAssumeVisible,
+    columnDefaultDraggable,
+    draggableColumns,
     resizableColumns,
     pinnedEndMaxWidth,
     pinnedStartMaxWidth,
@@ -18555,6 +18616,7 @@ function useComputed() {
     columnDefaultWidth: componentState.columnDefaultWidth,
     columnDefaultFlex: componentState.columnDefaultFlex,
     columnDefaultSortable: componentState.columnDefaultSortable,
+    columnDefaultDraggable: componentState.columnDefaultDraggable,
     pinnedStartMaxWidth: componentState.pinnedStartMaxWidth,
     pinnedEndMaxWidth: componentState.pinnedEndMaxWidth,
     bodySize,
@@ -18583,7 +18645,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 +18881,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "4.3.5"
+      version: "4.3.7"
     });
     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.7",
   "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": 1723637108931
 }