@infinite-table/infinite-react 0.4.3 → 0.4.4

package/index.esm.js

@@ -4258,10 +4258,10 @@ var InfiniteTableFooter = forwardRef3(function InfiniteTableFooter2(props, ref)
 import {
   Fragment as Fragment3,
   createContext as createContext5,
-  createElement as createElement22,
+  createElement as createElement25,
   useMemo as useMemo5
 } from "react";
-import { useCallback as useCallback9, useContext as useContext5, useEffect as useEffect12, useRef as useRef13 } from "react";
+import { useCallback as useCallback9, useContext as useContext5, useEffect as useEffect13, useRef as useRef13 } from "react";
 import { createPortal } from "react-dom";
 
 // src/components/DataSource/defaultFilterTypes.ts
@@ -4357,6 +4357,9 @@ function useCellClassName(column, baseClasses, variants, extraFlags) {
   if (column.computedLastInCategory) {
     result.push(...baseClasses.map((c) => `${c}--last-in-category`));
   }
+  if (extraFlags.rowSelected) {
+    result.push(...baseClasses.map((c) => `${c}--row-selected`));
+  }
   if (column.computedPinned) {
     result.push(...baseClasses.map((c) => `${c}--pinned-${column.computedPinned}`));
   } else {
@@ -4949,11 +4952,49 @@ function shallowEqualObjects(objA, objB, ignoreKeys) {
   return true;
 }
 
+// src/components/InfiniteTable/hooks/adjustColumnOrderForAllColumns.ts
+function adjustColumnOrderForAllColumns(options) {
+  const {
+    newColumnOrder,
+    visibleColumnOrder,
+    existingColumnOrder,
+    dragColumnId
+  } = options;
+  if (visibleColumnOrder.length !== newColumnOrder.length) {
+    console.warn("new column order cannot contain less columns than the visible column order");
+    return newColumnOrder;
+  }
+  const dragIndex = visibleColumnOrder.indexOf(dragColumnId);
+  const dropIndex = newColumnOrder.indexOf(dragColumnId);
+  if (dragIndex === dropIndex) {
+    return existingColumnOrder;
+  }
+  if (dropIndex > dragIndex) {
+    const indexInNewOrder = newColumnOrder.indexOf(dragColumnId);
+    const prevColIdInNewOrder = newColumnOrder[indexInNewOrder - 1];
+    const prevColIndexInExiting = existingColumnOrder.indexOf(prevColIdInNewOrder);
+    const indexInExisting = existingColumnOrder.indexOf(dragColumnId);
+    return moveXatY(existingColumnOrder, indexInExisting, prevColIndexInExiting);
+  } else {
+    const indexInNewOrder = newColumnOrder.indexOf(dragColumnId);
+    const nextColIdInNewOrder = newColumnOrder[indexInNewOrder + 1];
+    const nextColIndexInExiting = existingColumnOrder.indexOf(nextColIdInNewOrder);
+    const indexInExisting = existingColumnOrder.indexOf(dragColumnId);
+    return moveXatY(existingColumnOrder, indexInExisting, nextColIndexInExiting);
+  }
+  return newColumnOrder;
+}
+
 // src/components/InfiniteTable/hooks/useColumnPointerEvents.ts
 var columnOffsetAtIndex4 = stripVar(InternalVars.columnOffsetAtIndex);
 var columnWidthAtIndex3 = stripVar(InternalVars.columnWidthAtIndex);
 var baseZIndexForCells2 = stripVar(InternalVars.baseZIndexForCells);
 var equalPinning = (pinning1, pinning2) => {
+  const empty1 = !pinning1 || Object.keys(pinning1).length === 0;
+  const empty2 = !pinning2 || Object.keys(pinning2).length === 0;
+  if (empty1 && empty2) {
+    return true;
+  }
   if (!!pinning1 != !!pinning2) {
     return false;
   }
@@ -5020,14 +5061,20 @@ var useColumnPointerEvents = ({
     function persistColumnOrder(reorderDragResult2) {
       const { columnPinning, columnOrder } = reorderDragResult2;
       if (!equalPinning(getState().columnPinning, columnPinning)) {
-        console.log("update pinning");
         componentActions.columnPinning = columnPinning;
       }
-      if (JSON.stringify(columnOrder, getComputed().computedColumnOrder)) {
+      console.log("old order", getComputed().computedColumnOrder);
+      const currentComputedColumnOrder = getComputed().computedColumnOrder;
+      if (JSON.stringify(columnOrder, currentComputedColumnOrder)) {
         computedVisibleColumns.forEach((col) => {
           setInfiniteColumnOffsetWhileReordering(col.computedVisibleIndex, "", rootRef.current);
         });
-        componentActions.columnOrder = columnOrder;
+        componentActions.columnOrder = adjustColumnOrderForAllColumns({
+          newColumnOrder: columnOrder,
+          visibleColumnOrder: getComputed().computedVisibleColumns.map((c) => c.id),
+          existingColumnOrder: currentComputedColumnOrder,
+          dragColumnId: columnId
+        });
       }
     }
     const onPointerMove = (e2) => {
@@ -5089,18 +5136,269 @@ var useColumnPointerEvents = ({
 
 // src/components/InfiniteTable/utils/RenderHookComponent.tsx
 import {
-  createElement as createElement16
+  createElement as createElement19
 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnCell.tsx
 import {
   Fragment as Fragment2,
   createContext as createContext4,
-  createElement as createElement15,
+  createElement as createElement18,
   memo as memo8
 } from "react";
 import { useCallback as useCallback7, useContext as useContext4, useMemo as useMemo4 } from "react";
 
+// src/components/InfiniteTable/utils/getColumnForGroupBy.tsx
+import {
+  createElement as createElement15
+} from "react";
+
+// src/components/DataSource/state/rowInfoStatus.ts
+var showLoadingIcon = (rowInfo) => {
+  if (rowInfo.dataSourceHasGrouping) {
+    return rowInfo.isGroupRow ? rowInfo.childrenLoading || !rowInfo.selfLoaded : !rowInfo.selfLoaded;
+  }
+  return !rowInfo.selfLoaded;
+};
+
+// src/components/InfiniteTable/components/icons/ExpanderIcon.tsx
+import {
+  createElement as createElement13,
+  useEffect as useEffect9
+} from "react";
+import { useState as useState6 } from "react";
+
+// src/components/InfiniteTable/components/icons/ExpanderIcon.css.ts
+var import_createRuntimeFn2 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
+var ExpanderIconCls = "_16lm1iw6 _16lm1iwi _16lm1iwe";
+var ExpanderIconClsVariants = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "", variantClassNames: { expanded: { true: "_16lm1iwc", false: "_198z9782" }, direction: { end: "_198z9783", start: "_198z9784" } }, defaultVariants: {}, compoundVariants: [[{ expanded: false, direction: "end" }, "_16lm1iwd"]] });
+
+// src/components/InfiniteTable/components/icons/ExpanderIcon.tsx
+function ExpanderIcon(props) {
+  var _a;
+  const { size = 24, direction = "start" } = props;
+  const [expanded, setExpanded] = useState6((_a = props.expanded) != null ? _a : props.defaultExpanded);
+  const onClick = () => {
+    var _a2;
+    (_a2 = props.onChange) == null ? void 0 : _a2.call(props, !expanded);
+    if (!isControlled("expanded", props)) {
+      setExpanded(!expanded);
+    }
+  };
+  useEffect9(() => {
+    if (isControlled("expanded", props)) {
+      setExpanded(props.expanded);
+    }
+  }, [props.expanded]);
+  return /* @__PURE__ */ createElement13("svg", {
+    "data-name": "expander-icon",
+    xmlns: "http://www.w3.org/2000/svg",
+    height: `${size}px`,
+    viewBox: "0 0 24 24",
+    width: `${size}px`,
+    style: props.style,
+    onClick,
+    className: join(props.className, ExpanderIconCls, ExpanderIconClsVariants({
+      direction: direction || "start",
+      expanded
+    }), "InfiniteIcon", "InfiniteIcon-expander", `InfiniteIcon-expander--${expanded ? "expanded" : "collapsed"}`, `InfiniteIcon-expander--${direction === "end" ? "end" : "start"}`)
+  }, /* @__PURE__ */ createElement13("path", {
+    d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
+  }));
+}
+
+// src/components/InfiniteTable/components/icons/LoadingIcon.tsx
+import {
+  createElement as createElement14
+} from "react";
+
+// src/components/InfiniteTable/components/icons/LoadingIcon.css.ts
+var LoadingIconCls = "_16lm1iw8 _16lm1iwi _16lm1iwe";
+
+// src/components/InfiniteTable/components/icons/LoadingIcon.tsx
+var LoadingIcon = (props) => {
+  return /* @__PURE__ */ createElement14("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    style: {
+      margin: "auto",
+      display: "block",
+      shapeRendering: "auto"
+    },
+    width: "24px",
+    height: "24px",
+    viewBox: "0 0 100 100",
+    preserveAspectRatio: "xMidYMid",
+    className: join(props.className, LoadingIconCls, "InfiniteIcon", "InfiniteIcon-loading")
+  }, /* @__PURE__ */ createElement14("circle", {
+    cx: "50",
+    cy: "50",
+    fill: "none",
+    strokeWidth: "10",
+    r: "35",
+    strokeDasharray: "164.93361431346415 56.97787143782138"
+  }, /* @__PURE__ */ createElement14("animateTransform", {
+    attributeName: "transform",
+    type: "rotate",
+    repeatCount: "indefinite",
+    dur: "1s",
+    values: "0 50 50;360 50 50",
+    keyTimes: "0;1"
+  })));
+};
+
+// src/components/InfiniteTable/components/InfiniteTableRow/row.css.ts
+var import_createRuntimeFn3 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
+var GroupRowExpanderCls = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "", variantClassNames: { align: { start: "_7pupv0b", center: "_7pupv0c", end: "_7pupv0d" } }, defaultVariants: {}, compoundVariants: [] });
+var RowClsRecipe = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "_7pupv00", variantClassNames: { zebra: { false: "_7pupv02", even: "_7pupv03", odd: "_7pupv04" }, groupRow: { true: "_7pupv05", false: "_7pupv06" }, inlineGroupRow: { true: "_7pupv07", false: "_7pupv08" }, showHoverRows: { true: "_7pupv09", false: "_7pupv0a" } }, defaultVariants: {}, compoundVariants: [] });
+var RowHoverCls = "_7pupv01";
+
+// src/components/InfiniteTable/utils/getColumnForGroupBy.tsx
+function styleForGroupColumn({
+  rowInfo
+}) {
+  return {
+    [stripVar(ThemeVars.components.Row.groupNesting)]: rowInfo.dataSourceHasGrouping ? rowInfo.isGroupRow ? rowInfo.groupNesting - 1 : rowInfo.groupNesting : 0
+  };
+}
+function getGroupColumnRender({
+  groupIndexForColumn,
+  groupRenderStrategy
+}) {
+  return (renderOptions) => {
+    const { rowInfo, renderBag, column } = renderOptions;
+    let { value: valueToRender, groupIcon, selectionCheckBox } = renderBag;
+    const groupRowInfo = rowInfo;
+    if (groupRenderStrategy === "multi-column") {
+      if (groupIndexForColumn + 1 !== groupRowInfo.groupNesting && groupRowInfo.isGroupRow) {
+        return null;
+      }
+    } else if (groupRenderStrategy === "single-column" && !groupRowInfo.isGroupRow) {
+    }
+    return /* @__PURE__ */ createElement15("div", {
+      className: join(display.flex, column.align === "end" ? flexFlow.rowReverse : flexFlow.row, alignItems.center, groupRenderStrategy === "single-column" || groupRenderStrategy === "multi-column" && !rowInfo.isGroupRow && selectionCheckBox ? GroupRowExpanderCls({ align: column.align || "start" }) : null)
+    }, groupIcon, selectionCheckBox, /* @__PURE__ */ createElement15("div", {
+      className: cssEllipsisClassName
+    }, valueToRender != null ? valueToRender : null));
+  };
+}
+function getGroupColumnRenderGroupIcon({
+  groupIndexForColumn,
+  groupRenderStrategy,
+  toggleGroupRow,
+  initialRenderGroupIcon
+}) {
+  return (renderOptions) => {
+    var _a, _b, _c;
+    const {
+      rowInfo,
+      value,
+      rootGroupBy: groupBy,
+      pivotBy,
+      column
+    } = renderOptions;
+    const groupRowInfo = groupRenderStrategy !== "inline" ? rowInfo : rowInfo.isGroupRow && ((_a = rowInfo.parents) == null ? void 0 : _a[groupIndexForColumn]) || rowInfo;
+    if (!groupRowInfo) {
+      return null;
+    }
+    const collapsed = groupRowInfo.collapsed;
+    if (groupRenderStrategy === "inline") {
+      if (groupRowInfo.groupCount === 1) {
+        return value;
+      }
+      if (groupRowInfo.groupNesting === groupIndexForColumn && collapsed) {
+        return null;
+      }
+    } else {
+      if (!groupRowInfo.isGroupRow) {
+        return null;
+      }
+      if (groupRenderStrategy === "multi-column") {
+        if (groupIndexForColumn + 1 !== groupRowInfo.groupNesting) {
+          return null;
+        }
+      }
+    }
+    const groupKeys = groupRowInfo.groupKeys;
+    let icon = null;
+    const showExpanderIcon = pivotBy ? (((_b = groupRowInfo.groupKeys) == null ? void 0 : _b.length) || 0) < (groupBy == null ? void 0 : groupBy.length) : (((_c = groupRowInfo.groupKeys) == null ? void 0 : _c.length) || 0) <= (groupBy == null ? void 0 : groupBy.length);
+    const isLoading = showLoadingIcon(groupRowInfo);
+    if (isLoading) {
+      icon = /* @__PURE__ */ createElement15(LoadingIcon, null);
+    } else if (showExpanderIcon) {
+      const defaultIcon = /* @__PURE__ */ createElement15(ExpanderIcon, {
+        expanded: !collapsed,
+        direction: column.align === "end" ? "end" : "start",
+        onChange: () => {
+          toggleGroupRow(groupKeys);
+        }
+      });
+      icon = defaultIcon;
+    }
+    if (initialRenderGroupIcon) {
+      renderOptions.renderBag.groupIcon = icon;
+      icon = /* @__PURE__ */ createElement15(RenderCellHookComponent, {
+        render: initialRenderGroupIcon,
+        renderParam: renderOptions
+      });
+    }
+    return icon;
+  };
+}
+function getColumnForGroupBy(options, toggleGroupRow, groupColumnFromProps) {
+  const { groupByForColumn, groupIndexForColumn, groupRenderStrategy } = options;
+  let userDefinedGroupColumn = typeof groupColumnFromProps === "function" ? groupColumnFromProps(options, toggleGroupRow) : __spreadValues({}, groupColumnFromProps);
+  if (groupByForColumn.column) {
+    userDefinedGroupColumn = __spreadValues(__spreadValues({}, userDefinedGroupColumn), groupByForColumn.column);
+  }
+  let generatedGroupColumn = __spreadProps(__spreadValues({
+    header: `Group by ${groupByForColumn.field}`,
+    groupByField: groupByForColumn.field,
+    render: getGroupColumnRender({
+      groupIndexForColumn,
+      groupRenderStrategy
+    })
+  }, userDefinedGroupColumn), {
+    renderGroupIcon: getGroupColumnRenderGroupIcon({
+      initialRenderGroupIcon: userDefinedGroupColumn == null ? void 0 : userDefinedGroupColumn.renderGroupIcon,
+      groupIndexForColumn,
+      toggleGroupRow,
+      groupRenderStrategy
+    })
+  });
+  if (groupColumnFromProps) {
+    if (typeof groupColumnFromProps === "function") {
+      generatedGroupColumn = __spreadValues(__spreadValues({}, generatedGroupColumn), groupColumnFromProps(options, toggleGroupRow));
+    } else {
+      generatedGroupColumn = __spreadValues(__spreadValues({}, generatedGroupColumn), groupColumnFromProps);
+    }
+  }
+  return generatedGroupColumn;
+}
+function getSingleGroupColumn(options, toggleGroupRow, groupColumnFromProps) {
+  const theGroupColumnFromProps = typeof groupColumnFromProps === "function" ? groupColumnFromProps(options, toggleGroupRow) : groupColumnFromProps;
+  const base = {};
+  if (options.sortable != void 0) {
+    base.sortable = options.sortable;
+  }
+  let generatedGroupColumn = __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, base), {
+    header: `Group`,
+    groupByField: options.groupBy.map((g) => g.field),
+    renderSelectionCheckBox: options.selectionMode === "multi-row",
+    render: getGroupColumnRender({
+      groupIndexForColumn: 0,
+      groupRenderStrategy: "single-column"
+    })
+  }), groupColumnFromProps), {
+    renderGroupIcon: getGroupColumnRenderGroupIcon({
+      initialRenderGroupIcon: theGroupColumnFromProps == null ? void 0 : theGroupColumnFromProps.renderGroupIcon,
+      groupIndexForColumn: 0,
+      toggleGroupRow,
+      groupRenderStrategy: "single-column"
+    })
+  });
+  return generatedGroupColumn;
+}
+
 // src/components/InfiniteTable/utils/objectValuesExcept.ts
 function objectValuesExcept(obj, exceptList) {
   const result = [];
@@ -5112,16 +5410,16 @@ function objectValuesExcept(obj, exceptList) {
 }
 
 // src/components/InfiniteTable/components/cell.css.ts
-var import_createRuntimeFn2 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
+var import_createRuntimeFn4 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
 var ColumnCellCls = "_1eexc2a6 _1eexc2a5 _16lm1iwu _16lm1iw1f _16lm1iw1h _16lm1iw2 _16lm1iw1r _16lm1iw1s _16lm1iwy";
-var ColumnCellRecipe = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_1eexc2a8", variantClassNames: { dragging: { false: "_1eexc2a9", true: "_1eexc2aa" }, rowActive: { false: "_1eexc2ab", true: "_1eexc2ac" }, zebra: { false: "_1eexc2ad", even: "_1eexc2ae", odd: "_1eexc2af" }, rowSelected: { true: "_1eexc2ag", false: "_1eexc2ah", null: "_1eexc2ai" }, first: { true: "_1eexc2aj", false: "_1eexc2ak" }, last: { true: "_1eexc2al", false: "_1eexc2am" }, groupByField: { true: "_1eexc2an", false: "_1eexc2ao" }, firstInCategory: { true: "_1eexc2ap", false: "_1eexc2aq" }, lastInCategory: { true: "_1eexc2ar", false: "_1eexc2as" }, pinned: { start: "_1eexc2at", end: "_1eexc2au", false: "_1eexc2av" }, filtered: { true: "_1eexc2aw", false: "_1eexc2ax" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_1eexc2ay"], [{ pinned: "start", firstInCategory: true }, "_1eexc2az"], [{ pinned: "end", firstInCategory: true }, "_1eexc2a10"], [{ pinned: "end", lastInCategory: true }, "_1eexc2a11"]] });
+var ColumnCellRecipe = (0, import_createRuntimeFn4.createRuntimeFn)({ defaultClassName: "_1eexc2a8", variantClassNames: { dragging: { false: "_1eexc2a9", true: "_1eexc2aa" }, rowActive: { false: "_1eexc2ab", true: "_1eexc2ac" }, zebra: { false: "_1eexc2ad", even: "_1eexc2ae", odd: "_1eexc2af" }, rowSelected: { true: "_1eexc2ag", false: "_1eexc2ah", null: "_1eexc2ai" }, first: { true: "_1eexc2aj", false: "_1eexc2ak" }, last: { true: "_1eexc2al", false: "_1eexc2am" }, groupByField: { true: "_1eexc2an", false: "_1eexc2ao" }, firstInCategory: { true: "_1eexc2ap", false: "_1eexc2aq" }, lastInCategory: { true: "_1eexc2ar", false: "_1eexc2as" }, pinned: { start: "_1eexc2at", end: "_1eexc2au", false: "_1eexc2av" }, filtered: { true: "_1eexc2aw", false: "_1eexc2ax" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_1eexc2ay"], [{ pinned: "start", firstInCategory: true }, "_1eexc2az"], [{ pinned: "end", firstInCategory: true }, "_1eexc2a10"], [{ pinned: "end", lastInCategory: true }, "_1eexc2a11"]] });
 var SelectionCheckboxCls = "_1eexc2a7";
 
 // src/components/InfiniteTable/components/CheckBox.tsx
 import {
-  createElement as createElement13
+  createElement as createElement16
 } from "react";
-import { useEffect as useEffect9, useRef as useRef11 } from "react";
+import { useEffect as useEffect10, useRef as useRef11 } from "react";
 
 // src/components/InfiniteTable/components/CheckBox.css.ts
 var CheckBoxCls = "_16lm1iwe";
@@ -5149,10 +5447,10 @@ function InfiniteCheckBoxComponent() {
   const { componentState, componentActions } = useComponentState();
   const { checked, domProps } = componentState;
   const inputRef = useRef11(null);
-  useEffect9(() => {
+  useEffect10(() => {
     inputRef.current.indeterminate = checked == null;
   }, [checked]);
-  return /* @__PURE__ */ createElement13("input", __spreadProps(__spreadValues({}, domProps), {
+  return /* @__PURE__ */ createElement16("input", __spreadProps(__spreadValues({}, domProps), {
     className: join(CheckBoxCls, domProps == null ? void 0 : domProps.className),
     type: "checkbox",
     ref: inputRef,
@@ -5163,24 +5461,152 @@ function InfiniteCheckBoxComponent() {
   }));
 }
 function InfiniteCheckBox(props) {
-  return /* @__PURE__ */ createElement13(InfiniteCheckBoxRoot, __spreadValues({}, props), /* @__PURE__ */ createElement13(InfiniteCheckBoxComponent, null));
+  return /* @__PURE__ */ createElement16(InfiniteCheckBoxRoot, __spreadValues({}, props), /* @__PURE__ */ createElement16(InfiniteCheckBoxComponent, null));
 }
 
-// src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableCell.tsx
-import {
-  Fragment,
-  createElement as createElement14,
-  memo as memo7
-} from "react";
-var { rootClassName: rootClassName5 } = internalProps;
-var InfiniteTableCellClassName = `${rootClassName5}Cell`;
-var InfiniteTableCellContentClassName = `${rootClassName5}Cell_content`;
-var columnWidthAtIndex4 = stripVar(InternalVars.columnWidthAtIndex);
-var columnReorderEffectDurationAtIndex2 = stripVar(InternalVars.columnReorderEffectDurationAtIndex);
-function InfiniteTableCellFn(props) {
-  var _b, _c, _d;
-  const _a = props, {
-    cssEllipsis = true,
+// src/components/InfiniteTable/components/InfiniteTableRow/columnRendering.tsx
+function isColumnWithField(c) {
+  return typeof c.field === "string";
+}
+function getGroupByColumn(options) {
+  const { column, rowInfo, columnsMap } = options;
+  const groupByColumn = rowInfo.isGroupRow && column.groupByField ? columnsMap.get(rowInfo.isGroupRow ? rowInfo.groupBy[rowInfo.groupBy.length - 1] : "") : void 0;
+  return groupByColumn;
+}
+function getColumnRenderingParams(options) {
+  const { column } = options;
+  const groupByColumn = getGroupByColumn(options);
+  const formattedResult = getFormattedValueContextForCell(__spreadProps(__spreadValues({}, options), {
+    column: groupByColumn || column
+  }));
+  const { formattedValueContext } = formattedResult;
+  return {
+    stylingParam: __spreadValues({
+      column: options.column
+    }, formattedValueContext),
+    formattedValueContext,
+    renderFunctions: {
+      renderGroupIcon: (groupByColumn == null ? void 0 : groupByColumn.renderGroupIcon) || column.renderGroupIcon,
+      renderSelectionCheckBox: column.renderSelectionCheckBox,
+      renderValue: (groupByColumn == null ? void 0 : groupByColumn.renderValue) || column.renderValue,
+      renderGroupValue: (groupByColumn == null ? void 0 : groupByColumn.renderGroupValue) || column.renderGroupValue,
+      renderLeafValue: (groupByColumn == null ? void 0 : groupByColumn.renderLeafValue) || column.renderLeafValue
+    },
+    renderParams: getColumnRenderParam(__spreadProps(__spreadValues({}, options), {
+      formattedValueContext
+    })),
+    groupByColumn
+  };
+}
+function getColumnRenderParam(options) {
+  const { column, context, rowInfo, columnsMap, formattedValueContext } = options;
+  const { value } = formattedValueContext;
+  const { api: imperativeApi, getDataSourceState } = context;
+  const { indexInAll: rowIndex } = rowInfo;
+  const dataSourceState = getDataSourceState();
+  const { selectionMode } = dataSourceState;
+  const groupByColumn = rowInfo.isGroupRow ? columnsMap.get(rowInfo.isGroupRow ? rowInfo.groupBy[rowInfo.groupBy.length - 1] : "") : void 0;
+  const toggleGroupRow = imperativeApi.toggleGroupRow;
+  const renderParam = __spreadProps(__spreadValues({
+    column,
+    columnsMap
+  }, formattedValueContext), {
+    groupByColumn,
+    selectionMode,
+    api: imperativeApi,
+    selectRow: imperativeApi.selectionApi.selectRow,
+    deselectRow: imperativeApi.selectionApi.deselectRow,
+    toggleRowSelection: imperativeApi.selectionApi.toggleRowSelection,
+    renderBag: {
+      value,
+      selectionCheckBox: null,
+      groupIcon: null
+    },
+    selectCurrentRow: () => {
+      return imperativeApi.selectionApi.selectRow(rowInfo.id, rowInfo.dataSourceHasGrouping ? rowInfo.groupKeys : void 0);
+    },
+    deselectCurrentRow: () => {
+      return imperativeApi.selectionApi.deselectRow(rowInfo.id, rowInfo.dataSourceHasGrouping ? rowInfo.groupKeys : void 0);
+    },
+    rowIndex,
+    toggleGroupRow,
+    toggleCurrentGroupRow: () => {
+      if (!rowInfo.isGroupRow) {
+        return;
+      }
+      toggleGroupRow(rowInfo.groupKeys);
+    },
+    toggleCurrentGroupRowSelection: () => {
+      if (!rowInfo.isGroupRow) {
+        return;
+      }
+      return imperativeApi.selectionApi.toggleGroupRowSelection(rowInfo.isGroupRow ? rowInfo.groupKeys : []);
+    },
+    rootGroupBy: dataSourceState.groupBy,
+    pivotBy: dataSourceState.pivotBy
+  });
+  return renderParam;
+}
+function getRawValueForCell(column, rowInfo) {
+  const { data, isGroupRow, dataSourceHasGrouping } = rowInfo;
+  const groupBy = dataSourceHasGrouping ? rowInfo.groupBy : void 0;
+  let value = isGroupRow && groupBy && column.groupByField ? rowInfo.value : isColumnWithField(column) ? data == null ? void 0 : data[column.field] : null;
+  if (column.valueGetter) {
+    if (!rowInfo.isGroupRow && rowInfo.data) {
+      value = column.valueGetter({ data: rowInfo.data, field: column.field });
+    }
+  }
+  return value;
+}
+function getFormattedValueParamForCell(rawValue, column, rowInfo, context) {
+  const { rowSelected, indexInAll: rowIndex } = rowInfo;
+  const { activeRowIndex, keyboardNavigation } = context.getState();
+  const rowActive = rowIndex === activeRowIndex && keyboardNavigation === "row";
+  return rowInfo.isGroupRow ? {
+    rowInfo,
+    isGroupRow: rowInfo.isGroupRow,
+    data: rowInfo.data,
+    rowSelected,
+    rowActive,
+    value: rawValue,
+    field: column.field
+  } : {
+    rowInfo,
+    isGroupRow: rowInfo.isGroupRow,
+    data: rowInfo.data,
+    rowSelected,
+    rowActive,
+    value: rawValue,
+    field: column.field
+  };
+}
+function getFormattedValueContextForCell(options) {
+  const { column, rowInfo, context } = options;
+  const rawValue = getRawValueForCell(column, rowInfo);
+  const formattedValueContext = getFormattedValueParamForCell(rawValue, column, rowInfo, context);
+  const formattedValue = column.valueFormatter ? column.valueFormatter(formattedValueContext) : rawValue;
+  formattedValueContext.value = formattedValue;
+  return {
+    formattedValue,
+    formattedValueContext
+  };
+}
+
+// src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableCell.tsx
+import {
+  Fragment,
+  createElement as createElement17,
+  memo as memo7
+} from "react";
+var { rootClassName: rootClassName5 } = internalProps;
+var InfiniteTableCellClassName = `${rootClassName5}Cell`;
+var InfiniteTableCellContentClassName = `${rootClassName5}Cell_content`;
+var columnWidthAtIndex4 = stripVar(InternalVars.columnWidthAtIndex);
+var columnReorderEffectDurationAtIndex2 = stripVar(InternalVars.columnReorderEffectDurationAtIndex);
+function InfiniteTableCellFn(props) {
+  var _b, _c, _d;
+  const _a = props, {
+    cssEllipsis = true,
     virtualized = true,
     skipColumnShifting = false,
     contentStyle,
@@ -5188,6 +5614,7 @@ function InfiniteTableCellFn(props) {
     domRef,
     width,
     contentClassName,
+    rowId,
     afterChildren,
     beforeChildren,
     cellType,
@@ -5202,6 +5629,7 @@ function InfiniteTableCellFn(props) {
     "domRef",
     "width",
     "contentClassName",
+    "rowId",
     "afterChildren",
     "beforeChildren",
     "cellType",
@@ -5218,16 +5646,19 @@ function InfiniteTableCellFn(props) {
     "data-column-id": column.id,
     "data-z-index": style.zIndex,
     className: join(domProps.className, justifyContent[(_b = column.align) != null ? _b : "start"], InfiniteTableCellClassName, ColumnCellCls),
-    children: /* @__PURE__ */ createElement14(Fragment, null, beforeChildren, /* @__PURE__ */ createElement14("div", {
+    children: /* @__PURE__ */ createElement17(Fragment, null, beforeChildren, /* @__PURE__ */ createElement17("div", {
       className: join(InfiniteTableCellContentClassName, cssEllipsis ? cssEllipsisClassName : overflow.hidden, contentClassName),
       style: contentStyle
     }, children), afterChildren)
   });
+  if (rowId != null) {
+    finalDOMProps["data-row-id"] = `${rowId}`;
+  }
   const RenderComponent = cellType === "body" ? (_c = column.components) == null ? void 0 : _c.ColumnCell : (_d = column.components) == null ? void 0 : _d.HeaderCell;
   if (RenderComponent) {
-    return /* @__PURE__ */ createElement14(RenderComponent, __spreadValues({}, finalDOMProps));
+    return /* @__PURE__ */ createElement17(RenderComponent, __spreadValues({}, finalDOMProps));
   }
-  return /* @__PURE__ */ createElement14("div", __spreadProps(__spreadValues({}, finalDOMProps), {
+  return /* @__PURE__ */ createElement17("div", __spreadProps(__spreadValues({}, finalDOMProps), {
     ref: domRef
   }));
 }
@@ -5249,7 +5680,7 @@ var defaultRenderSelectionCheckBox = (params) => {
   if (rowInfo.isGroupRow && !column.groupByField) {
     return null;
   }
-  return /* @__PURE__ */ createElement15(InfiniteCheckBox, {
+  return /* @__PURE__ */ createElement18(InfiniteCheckBox, {
     domProps: {
       className: SelectionCheckboxCls
     },
@@ -5267,8 +5698,12 @@ var defaultRenderSelectionCheckBox = (params) => {
     checked: rowInfo.rowSelected
   });
 };
-function isColumnWithField(c) {
-  return typeof c.field === "string";
+function applyColumnClassName(columnClassName, param) {
+  const colClassName = columnClassName ? typeof columnClassName === "function" ? columnClassName(param) : columnClassName : void 0;
+  return colClassName;
+}
+function applyColumnStyle(existingStyle, columnStyle, param) {
+  return typeof columnStyle === "function" ? __spreadValues(__spreadValues({}, existingStyle), columnStyle(param)) : __spreadValues(__spreadValues({}, existingStyle), columnStyle);
 }
 function InfiniteTableColumnCellFn(props) {
   var _a;
@@ -5280,7 +5715,6 @@ function InfiniteTableColumnCellFn(props) {
     column,
     onMouseLeave,
     onMouseEnter,
-    toggleGroupRow,
     rowIndex,
     rowHeight,
     columnsMap,
@@ -5289,39 +5723,34 @@ function InfiniteTableColumnCellFn(props) {
     showZebraRows
   } = props;
   if (!column) {
-    return /* @__PURE__ */ createElement15("div", {
+    return /* @__PURE__ */ createElement18("div", {
       ref: domRef
     }, "no column");
   }
-  const { data, isGroupRow, dataSourceHasGrouping, rowSelected } = rowInfo;
-  const groupBy = dataSourceHasGrouping ? rowInfo.groupBy : void 0;
-  const groupRowInfo = null;
+  const { rowSelected } = rowInfo;
   const { getState, componentActions, imperativeApi } = useInfiniteTable();
+  const { componentState: dataSourceState, getState: getDataSourceState } = useDataSourceContextValue();
   const { activeRowIndex, keyboardNavigation } = getState();
   const rowActive = rowIndex === activeRowIndex && keyboardNavigation === "row";
-  let value = isGroupRow && groupBy && column.groupByField ? rowInfo.value : isColumnWithField(column) ? data == null ? void 0 : data[column.field] : null;
-  if (column.valueGetter) {
-    if (!rowInfo.isGroupRow && rowInfo.data) {
-      value = column.valueGetter({ data: rowInfo.data, field: column.field });
-    }
-  }
-  if (column.valueFormatter) {
-    value = column.valueFormatter(isGroupRow ? {
-      data: rowInfo.data,
-      isGroupRow,
-      rowInfo,
-      rowActive,
-      field: column.field,
-      value
-    } : {
-      data: rowInfo.data,
-      isGroupRow,
-      rowActive,
-      rowInfo,
-      field: column.field,
-      value
-    });
-  }
+  const renderingContext = {
+    getState,
+    getDataSourceState,
+    actions: componentActions,
+    api: imperativeApi
+  };
+  const {
+    stylingParam,
+    renderParams,
+    formattedValueContext,
+    renderFunctions,
+    groupByColumn
+  } = getColumnRenderingParams({
+    column,
+    rowInfo,
+    columnsMap,
+    context: renderingContext
+  });
+  const renderParam = renderParams;
   const onClick = useCallback7((event) => {
     const colIndex = column.computedVisibleIndex;
     getState().cellClick({
@@ -5329,6 +5758,14 @@ function InfiniteTableColumnCellFn(props) {
       colIndex,
       event
     });
+  }, [rowIndex, column.computedVisibleIndex, keyboardNavigation]);
+  const onMouseDown = useCallback7((event) => {
+    const colIndex = column.computedVisibleIndex;
+    getState().cellMouseDown({
+      rowIndex,
+      colIndex,
+      event
+    });
     if (keyboardNavigation === "row") {
       componentActions.activeRowIndex = rowIndex;
       return;
@@ -5337,121 +5774,73 @@ function InfiniteTableColumnCellFn(props) {
       componentActions.activeCellIndex = [rowIndex, colIndex];
     }
   }, [rowIndex, column.computedVisibleIndex, keyboardNavigation]);
-  const { componentState: computedDataSource } = useDataSourceContextValue();
-  const { selectionMode } = computedDataSource;
-  const rest = rowInfo.isGroupRow ? {
-    rowInfo,
-    isGroupRow: rowInfo.isGroupRow,
-    data: rowInfo.data,
-    rowActive,
-    value,
-    field: column.field
-  } : {
-    rowInfo,
-    isGroupRow: rowInfo.isGroupRow,
-    data: rowInfo.data,
-    rowActive,
-    value,
-    field: column.field
-  };
-  const stylingRenderParam = __spreadValues({
-    column
-  }, rest);
-  const renderParam = __spreadProps(__spreadValues({
-    column,
-    columnsMap,
-    domRef,
-    groupRowInfo
-  }, rest), {
-    selectionMode,
-    selectRow: imperativeApi.selectionApi.selectRow,
-    deselectRow: imperativeApi.selectionApi.deselectRow,
-    toggleRowSelection: imperativeApi.selectionApi.toggleRowSelection,
-    renderBag: {
-      value,
-      selectionCheckBox: null,
-      groupIcon: null
-    },
-    selectCurrentRow: useCallback7(() => {
-      return imperativeApi.selectionApi.selectRow(rowInfo.id, rowInfo.dataSourceHasGrouping ? rowInfo.groupKeys : void 0);
-    }, [rowInfo]),
-    deselectCurrentRow: useCallback7(() => {
-      return imperativeApi.selectionApi.deselectRow(rowInfo.id, rowInfo.dataSourceHasGrouping ? rowInfo.groupKeys : void 0);
-    }, [rowInfo]),
-    rowIndex,
-    toggleGroupRow,
-    toggleCurrentGroupRow: useCallback7(() => {
-      if (!rowInfo.isGroupRow) {
-        return;
-      }
-      toggleGroupRow(rowInfo.groupKeys);
-    }, [rowInfo]),
-    toggleCurrentGroupRowSelection: useCallback7(() => {
-      if (!rowInfo.isGroupRow) {
-        return;
-      }
-      return imperativeApi.selectionApi.toggleGroupRowSelection(rowInfo.isGroupRow ? rowInfo.groupKeys : []);
-    }, [rowInfo]),
-    groupBy: computedDataSource.groupBy,
-    pivotBy: computedDataSource.pivotBy
-  });
+  const { selectionMode } = dataSourceState;
+  renderParam.domRef = domRef;
+  renderParam.selectCurrentRow = useCallback7(renderParam.selectCurrentRow, [
+    rowInfo
+  ]);
+  renderParam.deselectCurrentRow = useCallback7(renderParam.deselectCurrentRow, [
+    rowInfo
+  ]);
+  renderParam.toggleCurrentGroupRow = useCallback7(renderParam.toggleCurrentGroupRow, [rowInfo]);
+  renderParam.toggleCurrentGroupRowSelection = useCallback7(renderParam.toggleCurrentGroupRowSelection, [rowInfo]);
   const renderChildren = useCallback7(() => {
     if (hidden) {
       return null;
     }
-    if (column.renderGroupIcon) {
-      renderParam.renderBag.groupIcon = /* @__PURE__ */ createElement15(RenderCellHookComponent, {
-        render: column.renderGroupIcon,
+    if (renderFunctions.renderGroupIcon) {
+      renderParam.renderBag.groupIcon = /* @__PURE__ */ createElement18(RenderCellHookComponent, {
+        render: renderFunctions.renderGroupIcon,
         renderParam: __spreadProps(__spreadValues({}, renderParam), {
           renderBag: __spreadValues({}, renderParam.renderBag)
         })
       });
     }
-    if (column.renderSelectionCheckBox && selectionMode == "multi-row") {
-      renderParam.renderBag.selectionCheckBox = /* @__PURE__ */ createElement15(RenderCellHookComponent, {
+    if (renderFunctions.renderSelectionCheckBox && selectionMode == "multi-row") {
+      renderParam.renderBag.selectionCheckBox = /* @__PURE__ */ createElement18(RenderCellHookComponent, {
         render: defaultRenderSelectionCheckBox,
         renderParam
       });
-      if (column.renderSelectionCheckBox !== true) {
-        renderParam.renderBag.selectionCheckBox = /* @__PURE__ */ createElement15(RenderCellHookComponent, {
-          render: column.renderSelectionCheckBox,
+      if (renderFunctions.renderSelectionCheckBox !== true) {
+        renderParam.renderBag.selectionCheckBox = /* @__PURE__ */ createElement18(RenderCellHookComponent, {
+          render: renderFunctions.renderSelectionCheckBox,
           renderParam: __spreadProps(__spreadValues({}, renderParam), {
             renderBag: __spreadValues({}, renderParam.renderBag)
           })
         });
       }
     }
-    if (column.renderValue) {
-      renderParam.renderBag.value = /* @__PURE__ */ createElement15(RenderCellHookComponent, {
-        render: column.renderValue,
+    if (renderFunctions.renderValue) {
+      renderParam.renderBag.value = /* @__PURE__ */ createElement18(RenderCellHookComponent, {
+        render: renderFunctions.renderValue,
         renderParam: __spreadProps(__spreadValues({}, renderParam), {
           renderBag: __spreadValues({}, renderParam.renderBag)
         })
       });
     }
-    if (rowInfo.isGroupRow && column.renderGroupValue) {
-      renderParam.renderBag.value = /* @__PURE__ */ createElement15(RenderCellHookComponent, {
-        render: column.renderGroupValue,
+    if (rowInfo.isGroupRow && renderFunctions.renderGroupValue) {
+      renderParam.renderBag.value = /* @__PURE__ */ createElement18(RenderCellHookComponent, {
+        render: renderFunctions.renderGroupValue,
         renderParam: __spreadProps(__spreadValues({}, renderParam), {
           renderBag: __spreadValues({}, renderParam.renderBag)
         })
       });
     }
-    if (!rowInfo.isGroupRow && column.renderLeafValue) {
-      renderParam.renderBag.value = /* @__PURE__ */ createElement15(RenderCellHookComponent, {
-        render: column.renderLeafValue,
+    if (!rowInfo.isGroupRow && renderFunctions.renderLeafValue) {
+      renderParam.renderBag.value = /* @__PURE__ */ createElement18(RenderCellHookComponent, {
+        render: renderFunctions.renderLeafValue,
         renderParam: __spreadProps(__spreadValues({}, renderParam), {
           renderBag: __spreadValues({}, renderParam.renderBag)
         })
       });
     }
     if (column.render) {
-      return /* @__PURE__ */ createElement15(RenderCellHookComponent, {
+      return /* @__PURE__ */ createElement18(RenderCellHookComponent, {
         render: column.render,
         renderParam
       });
     }
-    return /* @__PURE__ */ createElement15(Fragment2, null, column.align !== "end" ? renderParam.renderBag.groupIcon : null, column.align !== "end" ? renderParam.renderBag.selectionCheckBox : null, renderParam.renderBag.value, column.align === "end" ? renderParam.renderBag.selectionCheckBox : null, column.align === "end" ? renderParam.renderBag.groupIcon : null);
+    return /* @__PURE__ */ createElement18(Fragment2, null, column.align !== "end" ? renderParam.renderBag.groupIcon : null, column.align !== "end" ? renderParam.renderBag.selectionCheckBox : null, renderParam.renderBag.value, column.align === "end" ? renderParam.renderBag.selectionCheckBox : null, column.align === "end" ? renderParam.renderBag.groupIcon : null);
   }, [
     column,
     hidden,
@@ -5459,16 +5848,31 @@ function InfiniteTableColumnCellFn(props) {
       renderBag: true
     })
   ]);
-  const rowPropsAndStyleArgs = __spreadProps(__spreadValues({}, rest), {
+  const rowPropsAndStyleArgs = __spreadProps(__spreadValues({}, formattedValueContext), {
     rowIndex
   });
   const rowComputedClassName = typeof rowClassName === "function" ? rowClassName(rowPropsAndStyleArgs) : rowClassName;
-  const colClassName = column.className ? typeof column.className === "function" ? column.className(stylingRenderParam) : column.className : void 0;
+  let colClassName = void 0;
+  if (groupByColumn == null ? void 0 : groupByColumn.className) {
+    colClassName = applyColumnClassName(groupByColumn.className, stylingParam);
+  }
+  if (column.className) {
+    colClassName = join(colClassName, applyColumnClassName(column.className, stylingParam));
+  }
   let style;
+  if (rowInfo.dataSourceHasGrouping && column.groupByField) {
+    style = styleForGroupColumn({ rowInfo });
+  }
   if (rowStyle) {
     style = typeof rowStyle === "function" ? __spreadValues(__spreadValues({}, style), rowStyle(rowPropsAndStyleArgs)) : __spreadValues(__spreadValues({}, style), rowStyle);
   }
-  style = column.style ? typeof column.style === "function" ? __spreadValues(__spreadValues({}, style), column.style(stylingRenderParam) || {}) : __spreadValues(__spreadValues({}, style), column.style) : style || {};
+  if (groupByColumn == null ? void 0 : groupByColumn.style) {
+    style = applyColumnStyle(style, groupByColumn.style, stylingParam);
+  }
+  if (column.style) {
+    style = applyColumnStyle(style, column.style, stylingParam);
+  }
+  style = style || {};
   style.height = rowHeight;
   style.zIndex = `var(${columnZIndexAtIndex4}-${column.computedVisibleIndex})`;
   const memoizedStyle = useMemo4(() => style, [!style ? null : JSON.stringify(style)]);
@@ -5479,15 +5883,17 @@ function InfiniteTableColumnCellFn(props) {
     cellType: "body",
     column,
     width,
+    rowId: rowInfo.id,
     style: memoizedStyle,
     onMouseLeave,
     onMouseEnter,
     onClick,
+    onMouseDown,
     cssEllipsis: (_a = column.cssEllipsis) != null ? _a : true,
     className: join(useCellClassName(column, [InfiniteTableColumnCellClassName, InfiniteTableCellClassName], ColumnCellRecipe, { dragging: false, zebra, rowActive, rowSelected }), colClassName, rowComputedClassName),
     renderChildren
   };
-  return /* @__PURE__ */ createElement15(InfiniteTableCell, __spreadValues({}, cellProps));
+  return /* @__PURE__ */ createElement18(InfiniteTableCell, __spreadValues({}, cellProps));
 }
 var InfiniteTableColumnCell = memo8(InfiniteTableColumnCellFn);
 function useInfiniteColumnCell() {
@@ -5502,18 +5908,18 @@ function RenderHookComponent(props) {
 }
 function RenderCellHookComponent(props) {
   const ContextProvider = InfiniteTableColumnCellContext.Provider;
-  return /* @__PURE__ */ createElement16(ContextProvider, {
+  return /* @__PURE__ */ createElement19(ContextProvider, {
     value: props.renderParam
-  }, /* @__PURE__ */ createElement16(RenderHookComponent, {
+  }, /* @__PURE__ */ createElement19(RenderHookComponent, {
     render: props.render,
     renderParam: props.renderParam
   }));
 }
 function RenderHeaderCellHookComponent(props) {
   const ContextProvider = InfiniteTableHeaderCellContext.Provider;
-  return /* @__PURE__ */ createElement16(ContextProvider, {
+  return /* @__PURE__ */ createElement19(ContextProvider, {
     value: props.renderParam
-  }, /* @__PURE__ */ createElement16(RenderHookComponent, {
+  }, /* @__PURE__ */ createElement19(RenderHookComponent, {
     render: props.render,
     renderParam: props.renderParam
   }));
@@ -5521,7 +5927,7 @@ function RenderHeaderCellHookComponent(props) {
 
 // src/components/InfiniteTable/components/FilterEditors.tsx
 import {
-  createElement as createElement17
+  createElement as createElement20
 } from "react";
 function getFilterEditors() {
   return {
@@ -5531,7 +5937,7 @@ function getFilterEditors() {
 }
 var defaultFilterEditors = getFilterEditors();
 function StringFilterEditor(props) {
-  return /* @__PURE__ */ createElement17("input", {
+  return /* @__PURE__ */ createElement20("input", {
     "aria-label": `Filter for ${props.ariaLabel}`,
     type: "text",
     value: props.filterValue,
@@ -5542,7 +5948,7 @@ function StringFilterEditor(props) {
   });
 }
 function NumberFilterEditor(props) {
-  return /* @__PURE__ */ createElement17("input", {
+  return /* @__PURE__ */ createElement20("input", {
     "aria-label": `Filter for ${props.ariaLabel}`,
     type: "number",
     value: props.filterValue,
@@ -5559,24 +5965,24 @@ function NumberFilterEditor(props) {
 
 // src/components/InfiniteTable/components/icons/SortIcon.tsx
 import {
-  createElement as createElement18
+  createElement as createElement21
 } from "react";
-import { useEffect as useEffect10, useState as useState6 } from "react";
+import { useEffect as useEffect11, useState as useState7 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/header.css.ts
-var import_createRuntimeFn3 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
+var import_createRuntimeFn5 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
 var CellCls = "_1eexc2a5 _16lm1iwu _16lm1iw1f _16lm1iw1h _16lm1iw2 _16lm1iw1r _16lm1iw1s _16lm1iwy";
-var HeaderCellContentRecipe = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "_12zfob11e _16lm1iw10 _16lm1iw12 _16lm1iwu _16lm1iw1f _16lm1iw1h", variantClassNames: { filtered: { false: "_12zfob11f", true: "_12zfob11g" } }, defaultVariants: {}, compoundVariants: [] });
+var HeaderCellContentRecipe = (0, import_createRuntimeFn5.createRuntimeFn)({ defaultClassName: "_12zfob11e _16lm1iw10 _16lm1iw12 _16lm1iwu _16lm1iw1f _16lm1iw1h", variantClassNames: { filtered: { false: "_12zfob11f", true: "_12zfob11g" } }, defaultVariants: {}, compoundVariants: [] });
 var HeaderCellProxy = "_12zfob1k _16lm1iw1s _16lm1iw1t _16lm1iw1m";
-var HeaderCellRecipe = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "_12zfob1l _16lm1iww", variantClassNames: { rowActive: { false: "_12zfob1m", true: "_12zfob1n" }, rowSelected: { false: "_12zfob1o", true: "_12zfob1p", null: "_12zfob1q" }, zebra: { false: "_12zfob1r", even: "_12zfob1s", odd: "_12zfob1t" }, dragging: { true: "_12zfob1u", false: "_12zfob1v" }, first: { true: "_12zfob1w", false: "_12zfob1x" }, last: { true: "_12zfob1y", false: "_12zfob1z" }, groupByField: { true: "_12zfob110", false: "_12zfob111" }, firstInCategory: { true: "_12zfob112", false: "_12zfob113" }, lastInCategory: { true: "_12zfob114", false: "_12zfob115" }, pinned: { start: "_12zfob116", end: "_12zfob117", false: "_12zfob118" }, filtered: { true: "_12zfob119", false: "_12zfob11a" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_12zfob11b"], [{ pinned: "end", firstInCategory: true }, "_12zfob11c"], [{ pinned: false, lastInCategory: true }, "_12zfob11d"]] });
-var HeaderClsRecipe = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "_12zfob16 _16lm1iww _16lm1iw2", variantClassNames: { pinned: { start: "_12zfob17", end: "_12zfob18", false: "_12zfob19" }, firstInCategory: { true: "_12zfob1a", false: "_12zfob1b" }, lastInCategory: { true: "_12zfob1c", false: "_12zfob1d" }, overflow: { true: "_12zfob1e", false: "_12zfob1f" } }, defaultVariants: {}, compoundVariants: [[{ overflow: true, pinned: "start" }, "_12zfob1g"], [{ pinned: "start", firstInCategory: true }, "_12zfob1h"], [{ overflow: true, pinned: "end" }, "_12zfob1i"], [{ pinned: "end", lastInCategory: true }, "_12zfob1j"]] });
+var HeaderCellRecipe = (0, import_createRuntimeFn5.createRuntimeFn)({ defaultClassName: "_12zfob1l _16lm1iww", variantClassNames: { rowActive: { false: "_12zfob1m", true: "_12zfob1n" }, rowSelected: { false: "_12zfob1o", true: "_12zfob1p", null: "_12zfob1q" }, zebra: { false: "_12zfob1r", even: "_12zfob1s", odd: "_12zfob1t" }, dragging: { true: "_12zfob1u", false: "_12zfob1v" }, first: { true: "_12zfob1w", false: "_12zfob1x" }, last: { true: "_12zfob1y", false: "_12zfob1z" }, groupByField: { true: "_12zfob110", false: "_12zfob111" }, firstInCategory: { true: "_12zfob112", false: "_12zfob113" }, lastInCategory: { true: "_12zfob114", false: "_12zfob115" }, pinned: { start: "_12zfob116", end: "_12zfob117", false: "_12zfob118" }, filtered: { true: "_12zfob119", false: "_12zfob11a" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_12zfob11b"], [{ pinned: "end", firstInCategory: true }, "_12zfob11c"], [{ pinned: false, lastInCategory: true }, "_12zfob11d"]] });
+var HeaderClsRecipe = (0, import_createRuntimeFn5.createRuntimeFn)({ defaultClassName: "_12zfob16 _16lm1iww _16lm1iw2", variantClassNames: { pinned: { start: "_12zfob17", end: "_12zfob18", false: "_12zfob19" }, firstInCategory: { true: "_12zfob1a", false: "_12zfob1b" }, lastInCategory: { true: "_12zfob1c", false: "_12zfob1d" }, overflow: { true: "_12zfob1e", false: "_12zfob1f" } }, defaultVariants: {}, compoundVariants: [[{ overflow: true, pinned: "start" }, "_12zfob1g"], [{ pinned: "start", firstInCategory: true }, "_12zfob1h"], [{ overflow: true, pinned: "end" }, "_12zfob1i"], [{ pinned: "end", lastInCategory: true }, "_12zfob1j"]] });
 var HeaderFilterCls = "_12zfob11j _16lm1iwu _16lm1iw1f _16lm1iw1h _16lm1iw1";
 var HeaderFilterEditorCls = "_16lm1iw12 _16lm1iw10";
 var HeaderGroupCls = "_12zfob11i _16lm1iwu _16lm1iw1f _16lm1iw1h";
 var HeaderScrollbarPlaceholderCls = "_12zfob15 _16lm1iw2";
 var HeaderSortIconCls = "_16lm1iw1";
 var HeaderSortIconIndexCls = "_12zfob14";
-var HeaderSortIconRecipe = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "", variantClassNames: { align: { start: "_12zfob11", center: "_12zfob12", end: "_12zfob13" } }, defaultVariants: {}, compoundVariants: [] });
+var HeaderSortIconRecipe = (0, import_createRuntimeFn5.createRuntimeFn)({ defaultClassName: "", variantClassNames: { align: { start: "_12zfob11", center: "_12zfob12", end: "_12zfob13" } }, defaultVariants: {}, compoundVariants: [] });
 var HeaderWrapperCls = "_12zfob11h _16lm1iw1m _16lm1iw1 _16lm1iwu _16lm1iw1f";
 
 // src/components/InfiniteTable/components/icons/SortIcon.tsx
@@ -5588,8 +5994,8 @@ var defaultLineStyle = {
 var InfiniteTableIconClassName = "InfiniteTableIcon";
 function SortIcon(props) {
   var _a;
-  const [rendered, setRendered] = useState6(true);
-  const [opacity, setOpacity] = useState6(0);
+  const [rendered, setRendered] = useState7(true);
+  const [opacity, setOpacity] = useState7(0);
   const { direction, lineWidth = 1, style, className, index } = props;
   const showIndex = index != null && index > 0;
   const size = (_a = props.size) != null ? _a : 16;
@@ -5603,7 +6009,7 @@ function SortIcon(props) {
   }), props.lineStyle), {
     opacity
   });
-  useEffect10(() => {
+  useEffect11(() => {
     const newOpacity = direction != 0 ? 1 : 0;
     if (!rendered && newOpacity) {
       setRendered(true);
@@ -5633,39 +6039,39 @@ function SortIcon(props) {
   if (direction === -1) {
     indexStyle.top = "100%";
   }
-  return /* @__PURE__ */ createElement18("div", {
+  return /* @__PURE__ */ createElement21("div", {
     style: __spreadProps(__spreadValues({}, style), { width: size }),
     className: join(className, InfiniteTableIconClassName, `${InfiniteTableIconClassName}-sort`)
-  }, showIndex ? /* @__PURE__ */ createElement18("div", {
+  }, showIndex ? /* @__PURE__ */ createElement21("div", {
     "data-name": "index",
     style: indexStyle,
     className: HeaderSortIconIndexCls
-  }, index) : null, /* @__PURE__ */ createElement18("div", {
+  }, index) : null, /* @__PURE__ */ createElement21("div", {
     style: __spreadValues({ width: sizes[0] }, lineStyle),
     onTransitionEnd
-  }), /* @__PURE__ */ createElement18("div", {
+  }), /* @__PURE__ */ createElement21("div", {
     style: __spreadValues({ width: sizes[1] }, lineStyle)
-  }), /* @__PURE__ */ createElement18("div", {
+  }), /* @__PURE__ */ createElement21("div", {
     style: __spreadValues({ width: sizes[2] }, lineStyle)
   }));
 }
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableColumnHeaderFilter.tsx
 import {
-  createElement as createElement19
+  createElement as createElement22
 } from "react";
-import { useEffect as useEffect11, useState as useState7 } from "react";
+import { useEffect as useEffect12, useState as useState8 } from "react";
 var { rootClassName: rootClassName7 } = internalProps;
 var InfiniteTableColumnHeaderFilterClassName = `${rootClassName7}HeaderCell__filter`;
 var stopPropagation = (e) => e.stopPropagation();
 function InfiniteTableColumnHeaderFilter(props) {
   var _a, _b, _c, _d;
-  const [theValue, setTheValue] = useState7((_b = (_a = props.columnFilterValue) == null ? void 0 : _a.filterValue) != null ? _b : "");
+  const [theValue, setTheValue] = useState8((_b = (_a = props.columnFilterValue) == null ? void 0 : _a.filterValue) != null ? _b : "");
   const onInputChange = (filterValue) => {
     setTheValue(filterValue);
     props.onChange(filterValue);
   };
-  useEffect11(() => {
+  useEffect12(() => {
     var _a2;
     if (props.columnFilterValue) {
       if (theValue !== props.columnFilterValue.filterValue) {
@@ -5692,15 +6098,15 @@ function InfiniteTableColumnHeaderFilter(props) {
     onChange: onInputChange
   };
   const FilterEditor = props.filterEditor;
-  return /* @__PURE__ */ createElement19("div", {
+  return /* @__PURE__ */ createElement22("div", {
     onPointerUp: stopPropagation,
     onPointerDown: stopPropagation,
     className: `${InfiniteTableColumnHeaderFilterClassName} ${HeaderFilterCls}`,
     style: { height: props.columnHeaderHeight }
-  }, FilterEditor ? /* @__PURE__ */ createElement19(FilterEditor, __spreadValues({}, filterEditorProps)) : null);
+  }, FilterEditor ? /* @__PURE__ */ createElement22(FilterEditor, __spreadValues({}, filterEditorProps)) : null);
 }
 function InfiniteTableColumnHeaderFilterEmpty() {
-  return /* @__PURE__ */ createElement19("div", {
+  return /* @__PURE__ */ createElement22("div", {
     onPointerUp: stopPropagation,
     onPointerDown: stopPropagation,
     className: `${InfiniteTableColumnHeaderFilterClassName} ${HeaderFilterCls}`,
@@ -5710,7 +6116,7 @@ function InfiniteTableColumnHeaderFilterEmpty() {
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/useColumnResizeHandle.tsx
 import {
-  createElement as createElement21
+  createElement as createElement24
 } from "react";
 import { useCallback as useCallback8 } from "react";
 
@@ -6051,9 +6457,9 @@ var computeGroupResize = (params) => {
 };
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/index.tsx
-import { useRef as useRef12, useState as useState8 } from "react";
+import { useRef as useRef12, useState as useState9 } from "react";
 import {
-  createElement as createElement20,
+  createElement as createElement23,
   memo as memo9
 } from "react";
 
@@ -6146,17 +6552,17 @@ function getColumnGroupResizer(colIndexes, config) {
 }
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/ResizeHandle.css.ts
-var import_createRuntimeFn4 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
+var import_createRuntimeFn6 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
 var ResizeHandleCls = "zneyzh0 _16lm1iw2 _16lm1iw13 _16lm1iw1a _16lm1iw18 _16lm1iwf _16lm1iw1m";
-var ResizeHandleDraggerClsRecipe = (0, import_createRuntimeFn4.createRuntimeFn)({ defaultClassName: "zneyzhb _16lm1iw2 _16lm1iw13 _16lm1iw18", variantClassNames: { constrained: { false: "zneyzhc", true: "zneyzhd" } }, defaultVariants: {}, compoundVariants: [] });
-var ResizeHandleRecipeCls = (0, import_createRuntimeFn4.createRuntimeFn)({ defaultClassName: "", variantClassNames: { computedPinned: { start: "zneyzh1", end: "zneyzh2 _16lm1iw15 _16lm1iw1c", false: "zneyzh3" }, computedFirstInCategory: { true: "zneyzh4", false: "zneyzh5" }, computedLastInCategory: { true: "zneyzh6", false: "zneyzh7" } }, defaultVariants: {}, compoundVariants: [[{ computedPinned: "end", computedLastInCategory: false, computedFirstInCategory: true }, "zneyzh8"], [{ computedPinned: false, computedFirstInCategory: false, computedLastInCategory: true }, "zneyzh9"], [{ computedPinned: "start", computedFirstInCategory: false, computedLastInCategory: true }, "zneyzha"]] });
+var ResizeHandleDraggerClsRecipe = (0, import_createRuntimeFn6.createRuntimeFn)({ defaultClassName: "zneyzhb _16lm1iw2 _16lm1iw13 _16lm1iw18", variantClassNames: { constrained: { false: "zneyzhc", true: "zneyzhd" } }, defaultVariants: {}, compoundVariants: [] });
+var ResizeHandleRecipeCls = (0, import_createRuntimeFn6.createRuntimeFn)({ defaultClassName: "", variantClassNames: { computedPinned: { start: "zneyzh1", end: "zneyzh2 _16lm1iw15 _16lm1iw1c", false: "zneyzh3" }, computedFirstInCategory: { true: "zneyzh4", false: "zneyzh5" }, computedLastInCategory: { true: "zneyzh6", false: "zneyzh7" } }, defaultVariants: {}, compoundVariants: [[{ computedPinned: "end", computedLastInCategory: false, computedFirstInCategory: true }, "zneyzh8"], [{ computedPinned: false, computedFirstInCategory: false, computedLastInCategory: true }, "zneyzh9"], [{ computedPinned: "start", computedFirstInCategory: false, computedLastInCategory: true }, "zneyzha"]] });
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/index.tsx
 var { rootClassName: rootClassName8 } = internalProps;
 var InfiniteTableHeaderCellResizeHandleCls = `${rootClassName8}HeaderCell_ResizeHandle`;
 function ResizeHandleFn(props) {
   const domRef = useRef12(null);
-  const [constrained, setConstrained] = useState8(false);
+  const [constrained, setConstrained] = useState9(false);
   const constrainedRef = useRef12(constrained);
   constrainedRef.current = constrained;
   const col = props.columns[props.columnIndex];
@@ -6209,7 +6615,7 @@ function ResizeHandleFn(props) {
   const style = (computedPinned === false || computedPinned === "start") && computedLastInCategory ? {
     right: computedPinned === "start" ? 0 : 0
   } : computedPinned === "end" && computedFirstInCategory ? { right: "none", left: 0 } : void 0;
-  return /* @__PURE__ */ createElement20("div", {
+  return /* @__PURE__ */ createElement23("div", {
     ref: domRef,
     className: `${InfiniteTableHeaderCellResizeHandleCls} ${ResizeHandleCls} ${ResizeHandleRecipeCls({
       computedPinned,
@@ -6217,7 +6623,7 @@ function ResizeHandleFn(props) {
       computedLastInCategory
     })}`,
     onPointerDown
-  }, /* @__PURE__ */ createElement20("div", {
+  }, /* @__PURE__ */ createElement23("div", {
     style,
     className: ResizeHandleDraggerClsRecipe({
       constrained
@@ -6282,7 +6688,7 @@ function useColumnResizeHandle(column) {
     }
     componentActions.columnSizing = columnSizing;
   }, [computeResizeForDiff]);
-  const resizeHandle = column.computedResizable ? /* @__PURE__ */ createElement21(ResizeHandle, {
+  const resizeHandle = column.computedResizable ? /* @__PURE__ */ createElement24(ResizeHandle, {
     columns: computedVisibleColumns,
     columnIndex: column.computedVisibleIndex,
     computeResize: computeResizeForDiff,
@@ -6295,7 +6701,7 @@ function useColumnResizeHandle(column) {
 var defaultRenderSelectionCheckBox2 = (params) => {
   const { allRowsSelected, someRowsSelected, api } = params;
   const selected = allRowsSelected ? true : someRowsSelected ? null : false;
-  return /* @__PURE__ */ createElement22(InfiniteCheckBox, {
+  return /* @__PURE__ */ createElement25(InfiniteCheckBox, {
     domProps: {
       className: SelectionCheckboxCls
     },
@@ -6337,7 +6743,7 @@ function InfiniteTableHeaderCell(props) {
     (_a2 = props.domRef) == null ? void 0 : _a2.call(props, node);
   }, [props.domRef]);
   const alwaysShow = headerOptions.alwaysReserveSpaceForSortIcon;
-  const sortIcon = column.computedSortable && (column.computedSorted || alwaysShow) ? /* @__PURE__ */ createElement22(SortIcon, {
+  const sortIcon = column.computedSortable && (column.computedSorted || alwaysShow) ? /* @__PURE__ */ createElement25(SortIcon, {
     index: column.computedMultiSort ? column.computedSortIndex + 1 : void 0,
     className: `${InfiniteTableHeaderCellClassName}__sort-icon ${HeaderSortIconCls} ${HeaderSortIconRecipe({
       align: column.align || "start"
@@ -6364,7 +6770,7 @@ function InfiniteTableHeaderCell(props) {
   const align = column.align || "start";
   const renderChildren = () => {
     if (column.renderSortIcon) {
-      renderParam.renderBag.sortIcon = /* @__PURE__ */ createElement22(RenderHeaderCellHookComponent, {
+      renderParam.renderBag.sortIcon = /* @__PURE__ */ createElement25(RenderHeaderCellHookComponent, {
         render: column.renderSortIcon,
         renderParam: __spreadProps(__spreadValues({}, renderParam), {
           renderBag: __spreadValues({}, renderParam.renderBag)
@@ -6372,12 +6778,12 @@ function InfiniteTableHeaderCell(props) {
       });
     }
     if (column.renderSelectionCheckBox && selectionMode === "multi-row") {
-      renderParam.renderBag.selectionCheckBox = /* @__PURE__ */ createElement22(RenderHeaderCellHookComponent, {
+      renderParam.renderBag.selectionCheckBox = /* @__PURE__ */ createElement25(RenderHeaderCellHookComponent, {
         render: defaultRenderSelectionCheckBox2,
         renderParam
       });
       if (column.renderHeaderSelectionCheckBox && column.renderHeaderSelectionCheckBox !== true) {
-        renderParam.renderBag.selectionCheckBox = /* @__PURE__ */ createElement22(RenderHeaderCellHookComponent, {
+        renderParam.renderBag.selectionCheckBox = /* @__PURE__ */ createElement25(RenderHeaderCellHookComponent, {
           render: column.renderHeaderSelectionCheckBox,
           renderParam: __spreadProps(__spreadValues({}, renderParam), {
             renderBag: __spreadValues({}, renderParam.renderBag)
@@ -6386,7 +6792,7 @@ function InfiniteTableHeaderCell(props) {
       }
     }
     if (header instanceof Function) {
-      renderParam.renderBag.header = /* @__PURE__ */ createElement22(RenderHookComponent, {
+      renderParam.renderBag.header = /* @__PURE__ */ createElement25(RenderHeaderCellHookComponent, {
         render: header,
         renderParam: __spreadProps(__spreadValues({}, renderParam), {
           renderBag: __spreadValues({}, renderParam.renderBag)
@@ -6394,12 +6800,12 @@ function InfiniteTableHeaderCell(props) {
       });
     }
     if (column.renderHeader) {
-      return /* @__PURE__ */ createElement22(RenderHeaderCellHookComponent, {
+      return /* @__PURE__ */ createElement25(RenderHeaderCellHookComponent, {
         render: column.renderHeader,
         renderParam
       });
     }
-    return /* @__PURE__ */ createElement22(Fragment3, null, align !== "end" ? renderParam.renderBag.selectionCheckBox : null, align === "end" ? renderParam.renderBag.sortIcon : null, renderParam.renderBag.header, align !== "end" ? renderParam.renderBag.sortIcon : null, align === "end" ? renderParam.renderBag.selectionCheckBox : null);
+    return /* @__PURE__ */ createElement25(Fragment3, null, align !== "end" ? renderParam.renderBag.selectionCheckBox : null, align === "end" ? renderParam.renderBag.sortIcon : null, renderParam.renderBag.header, align !== "end" ? renderParam.renderBag.sortIcon : null, align === "end" ? renderParam.renderBag.selectionCheckBox : null);
   };
   const domRef = useRef13(null);
   const {
@@ -6407,7 +6813,7 @@ function InfiniteTableHeaderCell(props) {
     getState: getDataSourceState,
     componentState: { filterDelay, filterTypes }
   } = useDataSourceContextValue();
-  useEffect12(() => {
+  useEffect13(() => {
     let clearOnResize = null;
     const node = domRef.current;
     if (onResize && node) {
@@ -6430,7 +6836,7 @@ function InfiniteTableHeaderCell(props) {
   });
   let draggingProxy = null;
   if (dragging && proxyPosition) {
-    draggingProxy = /* @__PURE__ */ createElement22("div", {
+    draggingProxy = /* @__PURE__ */ createElement25("div", {
       key: column.id,
       className: `${InfiniteTableHeaderCellClassName}Proxy ${HeaderCellProxy}`,
       style: {
@@ -6512,9 +6918,9 @@ function InfiniteTableHeaderCell(props) {
   const resizeHandle = useColumnResizeHandle(column);
   const zIndex2 = `var(${columnZIndexAtIndex5}-${column.computedVisibleIndex})`;
   style.zIndex = zIndex2;
-  return /* @__PURE__ */ createElement22(ContextProvider, {
+  return /* @__PURE__ */ createElement25(ContextProvider, {
     value: renderParam
-  }, /* @__PURE__ */ createElement22(InfiniteTableCell, {
+  }, /* @__PURE__ */ createElement25(InfiniteTableCell, {
     domRef: ref,
     cellType: "header",
     column,
@@ -6533,7 +6939,7 @@ function InfiniteTableHeaderCell(props) {
       rowActive: false
     }), CellCls),
     cssEllipsis: (_e = (_d = column.headerCssEllipsis) != null ? _d : column.cssEllipsis) != null ? _e : true,
-    afterChildren: /* @__PURE__ */ createElement22(Fragment3, null, showColumnFilters ? column.computedFilterable ? /* @__PURE__ */ createElement22(InfiniteTableColumnHeaderFilter, {
+    afterChildren: /* @__PURE__ */ createElement25(Fragment3, null, showColumnFilters ? column.computedFilterable ? /* @__PURE__ */ createElement25(InfiniteTableColumnHeaderFilter, {
       filterEditor: FilterEditor,
       filterTypes,
       onChange: debouncedOnFilterValueChange,
@@ -6541,7 +6947,7 @@ function InfiniteTableHeaderCell(props) {
       columnLabel: column.field || column.name || column.id,
       columnFilterValue: column.computedFilterValue,
       columnHeaderHeight
-    }) : /* @__PURE__ */ createElement22(InfiniteTableColumnHeaderFilterEmpty, null) : null, resizeHandle),
+    }) : /* @__PURE__ */ createElement25(InfiniteTableColumnHeaderFilterEmpty, null) : null, resizeHandle),
     renderChildren
   }), draggingProxy);
 }
@@ -6552,7 +6958,7 @@ function useInfiniteHeaderCell() {
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderWrapper.tsx
 import {
-  createElement as createElement27,
+  createElement as createElement30,
   useCallback as useCallback12,
   useMemo as useMemo6
 } from "react";
@@ -6659,33 +7065,33 @@ function assignGroupOffsetsAndComputedWidths(items, groupOffset = 0) {
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.tsx
 import {
-  createElement as createElement26,
+  createElement as createElement29,
   memo as memo11
 } from "react";
-import { useCallback as useCallback11, useEffect as useEffect13, useRef as useRef15 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect14, useRef as useRef15 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderGroup.tsx
 import {
-  createElement as createElement25
+  createElement as createElement28
 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/useColumnGroupResizeHandle.tsx
 import {
-  createElement as createElement24
+  createElement as createElement27
 } from "react";
 import { useCallback as useCallback10 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/GroupResizeHandle.tsx
-import { useRef as useRef14, useState as useState9 } from "react";
+import { useRef as useRef14, useState as useState10 } from "react";
 import {
-  createElement as createElement23,
+  createElement as createElement26,
   memo as memo10
 } from "react";
 var { rootClassName: rootClassName10 } = internalProps;
 var InfiniteTableHeaderCellResizeHandleCls2 = `${rootClassName10}HeaderCell_ResizeHandle`;
 function GroupResizeHandleFn(props) {
   const domRef = useRef14(null);
-  const [constrained, setConstrained] = useState9(false);
+  const [constrained, setConstrained] = useState10(false);
   const constrainedRef = useRef14(constrained);
   constrainedRef.current = constrained;
   const col = props.groupColumns[0];
@@ -6746,7 +7152,7 @@ function GroupResizeHandleFn(props) {
   const style = (computedPinned === false || computedPinned === "start") && computedLastInCategory ? {
     right: computedPinned === "start" ? 0 : ThemeVars.components.HeaderCell.resizeHandleWidth
   } : computedPinned === "end" && computedFirstInCategory ? { right: "none", left: 0 } : void 0;
-  return /* @__PURE__ */ createElement23("div", {
+  return /* @__PURE__ */ createElement26("div", {
     ref: domRef,
     className: `${InfiniteTableHeaderCellResizeHandleCls2} ${ResizeHandleCls} ${ResizeHandleRecipeCls({
       computedPinned,
@@ -6754,7 +7160,7 @@ function GroupResizeHandleFn(props) {
       computedLastInCategory
     })}`,
     onPointerDown
-  }, /* @__PURE__ */ createElement23("div", {
+  }, /* @__PURE__ */ createElement26("div", {
     style: __spreadValues(__spreadValues({}, style), props.style),
     className: ResizeHandleDraggerClsRecipe({
       constrained
@@ -6812,7 +7218,7 @@ function useColumnGroupResizeHandle(groupColumns, config) {
     componentActions.columnSizing = columnSizing;
   }, [computeResizeForDiff]);
   const groupResizable = groupColumns.some((c) => c.computedResizable);
-  const resizeHandle = groupResizable ? /* @__PURE__ */ createElement24(GroupResizeHandle, {
+  const resizeHandle = groupResizable ? /* @__PURE__ */ createElement27(GroupResizeHandle, {
     brain: bodyBrain,
     style: {
       height: groupHeight * (columnGroupsMaxDepth - columnGroup.depth + 2)
@@ -6846,13 +7252,13 @@ function InfiniteTableHeaderGroup(props) {
   const firstColumn = columns[0];
   const width = columns.length > 1 ? `calc( ` + columns.map((col) => `var(${columnWidthAtIndex5}-${col.computedVisibleIndex})`).join(" + ") + " )" : `var(${columnWidthAtIndex5}-${firstColumn.computedVisibleIndex})`;
   const zIndex2 = `calc(var(${columnZIndexAtIndex6}-${firstColumn.computedVisibleIndex}) + ${columnGroupsMaxDepth - columnGroup.depth})`;
-  return /* @__PURE__ */ createElement25("div", {
+  return /* @__PURE__ */ createElement28("div", {
     ref: props.domRef,
     "data-group-id": columnGroup.uniqueGroupId,
     className: join(HeaderGroupCls, TableHeaderGroupClassName),
     style: { width, height },
     "data-z-index": zIndex2
-  }, /* @__PURE__ */ createElement25("div", {
+  }, /* @__PURE__ */ createElement28("div", {
     className: join(`${TableHeaderGroupClassName}__header-content`, cssEllipsisClassName)
   }, header), handle);
 }
@@ -6875,8 +7281,8 @@ function InfiniteTableHeaderFn(props) {
     computed,
     componentState: { headerBrain, headerOptions }
   } = useInfiniteTable();
-  const { computedVisibleColumnsMap, showColumnFilters } = computed;
-  useEffect13(() => {
+  const { computedColumnsMap, showColumnFilters } = computed;
+  useEffect14(() => {
     const onScroll = (scrollPosition) => {
       if (domRef.current) {
         domRef.current.style.transform = `translate3d(-${scrollPosition.scrollLeft}px, 0px, 0px)`;
@@ -6919,7 +7325,7 @@ function InfiniteTableHeaderFn(props) {
         computedWidth: colGroupItem.computedWidth,
         groupOffset: colGroupItem.groupOffset
       });
-      return /* @__PURE__ */ createElement26(InfiniteTableHeaderGroup, {
+      return /* @__PURE__ */ createElement29(InfiniteTableHeaderGroup, {
         bodyBrain,
         columnGroupsMaxDepth,
         domRef: domRef2,
@@ -6929,13 +7335,13 @@ function InfiniteTableHeaderFn(props) {
         columnGroup: computedColumnGroup
       });
     }
-    return /* @__PURE__ */ createElement26(InfiniteTableHeaderCell, {
+    return /* @__PURE__ */ createElement29(InfiniteTableHeaderCell, {
       domRef: domRef2,
       column,
       headerOptions,
       width: widthWithColspan,
       height: heightWithRowspan,
-      columnsMap: computedVisibleColumnsMap
+      columnsMap: computedColumnsMap
     });
   }, [
     headerOptions,
@@ -6945,7 +7351,7 @@ function InfiniteTableHeaderFn(props) {
     columnGroupsMaxDepth,
     showColumnFilters
   ]);
-  return /* @__PURE__ */ createElement26("div", __spreadValues({}, domProps), /* @__PURE__ */ createElement26(RawTable, {
+  return /* @__PURE__ */ createElement29("div", __spreadValues({}, domProps), /* @__PURE__ */ createElement29(RawTable, {
     name: "header",
     renderCell,
     brain: headerBrain,
@@ -7031,7 +7437,7 @@ function TableHeaderWrapper(props) {
     fixedColsEnd: computedPinnedEndColumns.length,
     fixedColsStart: computedPinnedStartColumns.length
   });
-  const header = /* @__PURE__ */ createElement27(InfiniteTableHeader, {
+  const header = /* @__PURE__ */ createElement30(InfiniteTableHeader, {
     columns: computedVisibleColumns,
     headerBrain,
     bodyBrain,
@@ -7039,14 +7445,14 @@ function TableHeaderWrapper(props) {
     columnGroupsMaxDepth,
     columnAndGroupTreeInfo
   });
-  const verticalScrollbarPlaceholder = scrollbars.vertical && getScrollbarWidth() ? /* @__PURE__ */ createElement27("div", {
+  const verticalScrollbarPlaceholder = scrollbars.vertical && getScrollbarWidth() ? /* @__PURE__ */ createElement30("div", {
     className: HeaderScrollbarPlaceholderCls,
     style: {
       zIndex: 1e3,
       width: getScrollbarWidth()
     }
   }) : null;
-  return /* @__PURE__ */ createElement27("div", {
+  return /* @__PURE__ */ createElement30("div", {
     className: HeaderWrapperCls,
     style: {
       height
@@ -7056,12 +7462,12 @@ function TableHeaderWrapper(props) {
 
 // src/components/InfiniteTable/components/InfiniteTableLicenseFooter/index.tsx
 import {
-  createElement as createElement28,
+  createElement as createElement31,
   forwardRef as forwardRef4,
   useCallback as useCallback13,
   useRef as useRef16
 } from "react";
-import { useEffect as useEffect14 } from "react";
+import { useEffect as useEffect15 } from "react";
 
 // src/components/utils/decamelize.ts
 function decamelize(str, options) {
@@ -7110,7 +7516,7 @@ var InfiniteTableLicenseFooter = forwardRef4(function InfiniteTableLicenseFooter
       ref.current = node;
     }
   }, []);
-  useEffect14(() => {
+  useEffect15(() => {
     const forceStyle = () => {
       raf(() => {
         var _a;
@@ -7124,12 +7530,12 @@ var InfiniteTableLicenseFooter = forwardRef4(function InfiniteTableLicenseFooter
       clearInterval(intervalId);
     };
   }, []);
-  return /* @__PURE__ */ createElement28("div", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ createElement31("div", __spreadProps(__spreadValues({
     ref: domCallback
   }, props), {
     className: join(`${rootClassName13}-Footer`, FooterCls, props.className),
     style: defaultStyle
-  }), "Powered by", " ", /* @__PURE__ */ createElement28("a", {
+  }), "Powered by", " ", /* @__PURE__ */ createElement31("a", {
     href: "https://infinite-table.com",
     rel: "noopener noreferrer",
     role: "link",
@@ -7137,15 +7543,9 @@ var InfiniteTableLicenseFooter = forwardRef4(function InfiniteTableLicenseFooter
   }, "Infinite Table"));
 });
 
-// src/components/InfiniteTable/components/InfiniteTableRow/row.css.ts
-var import_createRuntimeFn5 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
-var GroupRowExpanderCls = (0, import_createRuntimeFn5.createRuntimeFn)({ defaultClassName: "", variantClassNames: { align: { start: "_7pupv0b", center: "_7pupv0c", end: "_7pupv0d" } }, defaultVariants: {}, compoundVariants: [] });
-var RowClsRecipe = (0, import_createRuntimeFn5.createRuntimeFn)({ defaultClassName: "_7pupv00", variantClassNames: { zebra: { false: "_7pupv02", even: "_7pupv03", odd: "_7pupv04" }, groupRow: { true: "_7pupv05", false: "_7pupv06" }, inlineGroupRow: { true: "_7pupv07", false: "_7pupv08" }, showHoverRows: { true: "_7pupv09", false: "_7pupv0a" } }, defaultVariants: {}, compoundVariants: [] });
-var RowHoverCls = "_7pupv01";
-
 // src/components/InfiniteTable/components/LoadMask.tsx
 import {
-  createElement as createElement29,
+  createElement as createElement32,
   memo as memo12
 } from "react";
 
@@ -7159,11 +7559,11 @@ var { rootClassName: rootClassName12 } = internalProps;
 var baseCls3 = `${rootClassName12}-LoadMask`;
 function LoadMaskFn(props) {
   const { visible, children = "Loading" } = props;
-  return /* @__PURE__ */ createElement29("div", {
+  return /* @__PURE__ */ createElement32("div", {
     className: `${LoadMaskCls[visible ? "visible" : "hidden"]} ${baseCls3}`
-  }, /* @__PURE__ */ createElement29("div", {
+  }, /* @__PURE__ */ createElement32("div", {
     className: `${LoadMaskOverlayCls} ${baseCls3}-Overlay`
-  }), /* @__PURE__ */ createElement29("div", {
+  }), /* @__PURE__ */ createElement32("div", {
     className: `${LoadMaskTextCls} ${baseCls3}-Text`
   }, children));
 }
@@ -7404,14 +7804,17 @@ function group(groupParams, data) {
   }
   for (let i = 0, len = data.length; i < len; i++) {
     const item = data[i];
+    const commonData = {};
     for (let groupByIndex = 0; groupByIndex < groupByLength; groupByIndex++) {
       const { field: groupByProperty, toKey: groupToKey } = groupBy[groupByIndex];
       const key = (groupToKey || defaultToKey)(item[groupByProperty], item);
+      commonData[groupByProperty] = key;
       currentGroupKeys.push(key);
       if (!deepMap.has(currentGroupKeys)) {
         const deepMapGroupValue = {
           items: [],
           cache: false,
+          commonData: __spreadValues({}, commonData),
           childrenLoading: false,
           childrenAvailable: false,
           reducerResults: deepClone(initialReducerValue)
@@ -7685,7 +8088,7 @@ function enhancedFlatten(param) {
 // src/components/DataSource/index.tsx
 import {
   Fragment as Fragment4,
-  createElement as createElement30
+  createElement as createElement33
 } from "react";
 
 // src/utils/multisort/sortTypes.ts
@@ -7705,7 +8108,15 @@ var sortTypes_default = defaultSortTypes;
 
 // src/utils/multisort/index.ts
 var multisort = (sortInfo, array, get) => {
-  array.sort(getMultisortFunction(sortInfo, get));
+  const plainSortInfo = sortInfo.map((sortInfo2) => {
+    if (Array.isArray(sortInfo2.field)) {
+      return sortInfo2.field.map((field) => {
+        return __spreadProps(__spreadValues({}, sortInfo2), { field });
+      });
+    }
+    return sortInfo2;
+  }).flat();
+  array.sort(getMultisortFunction(plainSortInfo, get));
   return array;
 };
 multisort.knownTypes = sortTypes_default;
@@ -7938,10 +8349,10 @@ var GroupRowsState = class extends BooleanDeepCollectionState {
 };
 
 // src/components/DataSource/privateHooks/useLoadData.ts
-import { useEffect as useEffect16, useMemo as useMemo7, useRef as useRef18, useState as useState10 } from "react";
+import { useEffect as useEffect17, useMemo as useMemo7, useRef as useRef18, useState as useState11 } from "react";
 
 // src/components/hooks/useEffectWithChanges.ts
-import { useEffect as useEffect15, useRef as useRef17 } from "react";
+import { useEffect as useEffect16, useRef as useRef17 } from "react";
 function useEffectWithChanges(fn, deps) {
   const prevRef = useRef17({});
   const oldValuesRef = useRef17({});
@@ -7959,7 +8370,7 @@ function useEffectWithChanges(fn, deps) {
     }
   }
   prevRef.current = deps;
-  useEffect15(() => {
+  useEffect16(() => {
     const changes2 = changesRef.current;
     const result = fn(changes2, oldValues);
     changesRef.current = {};
@@ -8225,12 +8636,12 @@ function useLoadData() {
     livePaginationCursor,
     cursorId: stateCursorId
   } = componentState;
-  const [scrollbars, setScrollbars] = useState10({
+  const [scrollbars, setScrollbars] = useState11({
     vertical: false,
     horizontal: false
   });
   const scrollbarsRef = useRef18(scrollbars);
-  useEffect16(() => {
+  useEffect17(() => {
     notifyScrollbarsChange.onChange((scrollbars2) => {
       if (!scrollbars2) {
         return;
@@ -8240,7 +8651,7 @@ function useLoadData() {
     });
     return () => notifyScrollbarsChange.destroy();
   }, [notifyScrollbarsChange]);
-  useEffect16(() => {
+  useEffect17(() => {
     if (!livePagination) {
       return;
     }
@@ -8254,7 +8665,7 @@ function useLoadData() {
     });
     return () => cancelAnimationFrame(frameId);
   }, [livePaginationCursor]);
-  useEffect16(() => {
+  useEffect17(() => {
     if (!livePagination || livePaginationCursor !== void 0) {
       return;
     }
@@ -8268,7 +8679,7 @@ function useLoadData() {
     });
     return () => cancelAnimationFrame(frameId);
   }, [dataArray.length, livePaginationCursor]);
-  useEffect16(() => {
+  useEffect17(() => {
     const state = getComponentState();
     const { livePaginationCursor: livePaginationCursor2, livePagination: livePagination2, dataArray: dataArray2 } = state;
     if (!scrollbars.vertical && livePagination2) {
@@ -8318,7 +8729,7 @@ function useLazyLoadRange() {
     componentActions: actions,
     componentState
   } = useComponentState();
-  useEffect16(() => {
+  useEffect17(() => {
     actions.lazyLoadCacheOfLoadedBatches = new DeepMap();
   }, [componentState.data, componentState.dataParams]);
   const {
@@ -8354,7 +8765,7 @@ function useLazyLoadRange() {
     }, cache);
   };
   const debouncedLoadRange = useMemo7(() => debounce(loadRange, { wait: scrollStopDelayUpdatedByTable }), [scrollStopDelayUpdatedByTable]);
-  useEffect16(() => {
+  useEffect17(() => {
     if (lazyLoad) {
       return notifyRenderRangeChange.onChange((renderRange) => {
         latestRenderRangeRef.current = renderRange;
@@ -8363,7 +8774,7 @@ function useLazyLoadRange() {
     }
     return;
   }, [lazyLoadBatchSize, lazyLoad]);
-  useEffect16(() => {
+  useEffect17(() => {
     if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
       debouncedLoadRange();
     }
@@ -9813,7 +10224,7 @@ function DataSourceWithContext(props) {
   if (typeof children === "function") {
     children = children(computedValues);
   }
-  return /* @__PURE__ */ createElement30(Fragment4, null, children);
+  return /* @__PURE__ */ createElement33(Fragment4, null, children);
 }
 var DataSourceRoot = getComponentStateRoot({
   initSetupState,
@@ -9838,14 +10249,14 @@ function DataSourceCmp({ children }) {
     globalThis.dataSourceActions = componentActions;
   }
   useLoadData();
-  return /* @__PURE__ */ createElement30(DataSourceContext.Provider, {
+  return /* @__PURE__ */ createElement33(DataSourceContext.Provider, {
     value: contextValue
-  }, /* @__PURE__ */ createElement30(DataSourceWithContext, {
+  }, /* @__PURE__ */ createElement33(DataSourceWithContext, {
     children
   }));
 }
 function DataSource(props) {
-  return /* @__PURE__ */ createElement30(DataSourceRoot, __spreadValues({}, props), /* @__PURE__ */ createElement30(DataSourceCmp, {
+  return /* @__PURE__ */ createElement33(DataSourceRoot, __spreadValues({}, props), /* @__PURE__ */ createElement33(DataSourceCmp, {
     children: props.children
   }));
 }
@@ -10017,9 +10428,9 @@ function getImperativeApi(param) {
 
 // src/components/InfiniteTable/hooks/useAutoSizeColumns.ts
 import {
-  useEffect as useEffect17,
+  useEffect as useEffect18,
   useRef as useRef19,
-  useState as useState11
+  useState as useState12
 } from "react";
 var OFFSET = 10;
 function getColumnContentMaxWidths(domRef, options) {
@@ -10086,11 +10497,11 @@ function useAutoSizeColumns() {
     componentActions,
     componentState: { domRef, ready, autoSizeColumnsKey, brain }
   } = useComponentState();
-  const [refreshId, setRefreshId] = useState11(0);
+  const [refreshId, setRefreshId] = useState12(0);
   const theKey = typeof autoSizeColumnsKey === "object" ? autoSizeColumnsKey.key : autoSizeColumnsKey;
   const getTheKey = useLatest(theKey);
   const lastExecutedIdentifierRef = useRef19(null);
-  useEffect17(() => {
+  useEffect18(() => {
     const key = getTheKey();
     if (key == null) {
       return;
@@ -10103,7 +10514,7 @@ function useAutoSizeColumns() {
     };
     return brain.onRenderRangeChange(onChange);
   }, [brain]);
-  useEffect17(() => {
+  useEffect18(() => {
     var _a;
     if (theKey == null) {
       return;
@@ -10148,9 +10559,9 @@ function useAutoSizeColumns() {
 }
 
 // src/components/InfiniteTable/hooks/useCellRendering.tsx
-import { useCallback as useCallback14, useEffect as useEffect18, useRef as useRef20 } from "react";
+import { useCallback as useCallback14, useEffect as useEffect19, useRef as useRef20 } from "react";
 import {
-  createElement as createElement31
+  createElement as createElement34
 } from "react";
 
 // src/components/InfiniteTable/hooks/useYourBrain.ts
@@ -10187,7 +10598,7 @@ function useCellRendering(param) {
     computedPinnedStartColumns,
     computedPinnedEndColumns,
     computedVisibleColumns,
-    computedVisibleColumnsMap,
+    computedColumnsMap,
     rowspan,
     toggleGroupRow,
     columnSize
@@ -10223,12 +10634,12 @@ function useCellRendering(param) {
     rowspan
   });
   const scrollTopMaxRef = useRef20(0);
-  useEffect18(() => {
+  useEffect19(() => {
     return brain.onRenderCountChange(() => {
       scrollTopMaxRef.current = brain.scrollTopMax;
     });
   }, [brain]);
-  useEffect18(() => {
+  useEffect19(() => {
     return brain.onScrollStop((scrollPosition) => {
       const { scrollTop: scrollTop2 } = scrollPosition;
       if (scrollTop2 === 0) {
@@ -10245,7 +10656,7 @@ function useCellRendering(param) {
       }
     });
   }, [brain, onScrollToTop, onScrollToBottom]);
-  useEffect18(() => {
+  useEffect19(() => {
     if (!bodySize.height) {
       return;
     }
@@ -10256,7 +10667,7 @@ function useCellRendering(param) {
     }
   }, [!!bodySize.height]);
   const [, rerender] = useRerender();
-  useEffect18(() => {
+  useEffect19(() => {
     rerender();
   }, [dataSourceState]);
   const renderCell = useCallback14((params) => {
@@ -10291,16 +10702,16 @@ function useCellRendering(param) {
       domRef,
       width,
       column,
-      columnsMap: computedVisibleColumnsMap,
+      columnsMap: computedColumnsMap,
       rowStyle,
       rowClassName
     };
-    return /* @__PURE__ */ createElement31(InfiniteTableColumnCell, __spreadValues({}, cellProps));
+    return /* @__PURE__ */ createElement34(InfiniteTableColumnCell, __spreadValues({}, cellProps));
   }, [
     rowHeight,
     getData,
     computedVisibleColumns,
-    computedVisibleColumnsMap,
+    computedColumnsMap,
     groupRenderStrategy,
     toggleGroupRow,
     showZebraRows,
@@ -10387,10 +10798,10 @@ var MultiRowSelector = class {
 };
 
 // src/components/InfiniteTable/hooks/useColumnGroups.ts
-import { useEffect as useEffect20 } from "react";
+import { useEffect as useEffect21 } from "react";
 
 // src/components/hooks/useInterceptedMap.ts
-import { useEffect as useEffect19 } from "react";
+import { useEffect as useEffect20 } from "react";
 function interceptMap(map2, fns) {
   const { set, delete: deleteKey, clear } = map2;
   if (fns.set) {
@@ -10410,390 +10821,151 @@ function interceptMap(map2, fns) {
   if (fns.clear || fns.beforeClear) {
     map2.clear = () => {
       if (fns.beforeClear) {
-        fns.beforeClear(map2);
-      }
-      const result = clear.call(map2);
-      if (fns.clear) {
-        fns.clear();
-      }
-      return result;
-    };
-  }
-  return () => {
-    if (set) {
-      map2.set = set;
-    }
-    if (deleteKey) {
-      map2.delete = deleteKey;
-    }
-    if (clear) {
-      map2.clear = clear;
-    }
-  };
-}
-
-// src/components/InfiniteTable/state/computeColumnGroupsDepths.ts
-function computeColumnGroupsDepths(columnGroups) {
-  const map2 = new Map();
-  columnGroups.forEach((colGroup, colGroupId) => {
-    let parentGroupId = colGroup.columnGroup;
-    let depth = 0;
-    while (parentGroupId) {
-      const parent = columnGroups.get(parentGroupId);
-      if (!parent) {
-        if (false) {
-          console.warn(`Cannot find column group ${parentGroupId}`);
-        }
-        break;
-      }
-      depth++;
-      parentGroupId = parent.columnGroup;
-    }
-    map2.set(colGroupId, depth);
-  });
-  return map2;
-}
-
-// src/components/InfiniteTable/hooks/useColumnGroups.ts
-function useColumnGroups() {
-  const {
-    componentState: {
-      computedColumnGroups,
-      collapsedColumnGroups
-    },
-    componentActions,
-    getComponentState
-  } = useComponentState();
-  useEffect20(() => {
-    const recompute = () => {
-      componentActions.columnGroupsDepthsMap = computeColumnGroupsDepths(computedColumnGroups);
-    };
-    const update = rafFn(recompute);
-    return interceptMap(computedColumnGroups, {
-      clear: update,
-      delete: update,
-      set: update
-    });
-  }, [computedColumnGroups]);
-  useEffect20(() => {
-    return interceptMap(collapsedColumnGroups, {
-      set: (key, visibleCol) => {
-        const colIds = key.slice(1);
-        const columnVisibility = __spreadValues({}, getComponentState().columnVisibility);
-        colIds.forEach((colId) => {
-          columnVisibility[colId] = false;
-        });
-        delete columnVisibility[visibleCol];
-        componentActions.columnVisibility = columnVisibility;
-      },
-      beforeClear: (currentCollapsedGroups) => {
-        const columnVisibility = __spreadValues({}, getComponentState().columnVisibility);
-        const keys = [...currentCollapsedGroups.keys()];
-        keys.forEach((key) => {
-          const colIds = key.slice(1);
-          colIds.forEach((colId) => {
-            delete columnVisibility[colId];
-          });
-        });
-        componentActions.columnVisibility = columnVisibility;
-      },
-      delete: (key) => {
-        const columnVisibility = __spreadValues({}, getComponentState().columnVisibility);
-        const colIds = key.slice(1);
-        colIds.forEach((colId) => {
-          delete columnVisibility[colId];
-        });
-        componentActions.columnVisibility = columnVisibility;
-      }
-    });
-  }, [collapsedColumnGroups]);
-}
-
-// src/components/InfiniteTable/hooks/useColumnRowspan.ts
-import { useMemo as useMemo8 } from "react";
-function useColumnRowspan(computedVisibleColumns) {
-  const { getState: getDataSourceState } = useDataSourceContextValue();
-  const rowspan = useMemo8(() => {
-    const colsWithRowspan = computedVisibleColumns.filter((col) => typeof col.rowspan === "function");
-    return colsWithRowspan.length ? ({ rowIndex, colIndex }) => {
-      const dataArray = getDataSourceState().dataArray;
-      const rowInfo = dataArray[rowIndex];
-      if (!rowInfo) {
-        return 1;
-      }
-      const data = rowInfo.data;
-      const column = computedVisibleColumns[colIndex];
-      if (!column || !column.rowspan) {
-        return 1;
-      }
-      return column.rowspan({
-        column,
-        data,
-        dataArray,
-        rowInfo,
-        rowIndex
-      });
-    } : void 0;
-  }, [computedVisibleColumns]);
-  return rowspan;
-}
-
-// src/components/InfiniteTable/hooks/useColumnSizeFn.ts
-import { useCallback as useCallback15 } from "react";
-var debug4 = dbg("useColumnSizeFn");
-function useColumnSizeFn(columns) {
-  const columnSize = useCallback15((index) => {
-    const column = columns[index];
-    if (false) {
-      debug4("cannot find column at index", index, columns);
-    }
-    return column ? column.computedWidth : 0;
-  }, [columns]);
-  return columnSize;
-}
-
-// src/components/InfiniteTable/hooks/useColumnsWhen.ts
-import { useEffect as useEffect23, useMemo as useMemo9 } from "react";
-
-// src/components/InfiniteTable/utils/getColumnForGroupBy.tsx
-import {
-  createElement as createElement34
-} from "react";
-
-// src/components/DataSource/state/rowInfoStatus.ts
-var showLoadingIcon = (rowInfo) => {
-  if (rowInfo.dataSourceHasGrouping) {
-    return rowInfo.isGroupRow ? rowInfo.childrenLoading || !rowInfo.selfLoaded : !rowInfo.selfLoaded;
-  }
-  return !rowInfo.selfLoaded;
-};
-
-// src/components/InfiniteTable/components/icons/ExpanderIcon.tsx
-import {
-  createElement as createElement32,
-  useEffect as useEffect21
-} from "react";
-import { useState as useState12 } from "react";
-
-// src/components/InfiniteTable/components/icons/ExpanderIcon.css.ts
-var import_createRuntimeFn6 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
-var ExpanderIconCls = "_16lm1iw6 _16lm1iwi _16lm1iwe";
-var ExpanderIconClsVariants = (0, import_createRuntimeFn6.createRuntimeFn)({ defaultClassName: "", variantClassNames: { expanded: { true: "_16lm1iwc", false: "_198z9782" }, direction: { end: "_198z9783", start: "_198z9784" } }, defaultVariants: {}, compoundVariants: [[{ expanded: false, direction: "end" }, "_16lm1iwd"]] });
-
-// src/components/InfiniteTable/components/icons/ExpanderIcon.tsx
-function ExpanderIcon(props) {
-  var _a;
-  const { size = 24, direction = "start" } = props;
-  const [expanded, setExpanded] = useState12((_a = props.expanded) != null ? _a : props.defaultExpanded);
-  const onClick = () => {
-    var _a2;
-    (_a2 = props.onChange) == null ? void 0 : _a2.call(props, !expanded);
-    if (!isControlled("expanded", props)) {
-      setExpanded(!expanded);
-    }
-  };
-  useEffect21(() => {
-    if (isControlled("expanded", props)) {
-      setExpanded(props.expanded);
-    }
-  }, [props.expanded]);
-  return /* @__PURE__ */ createElement32("svg", {
-    "data-name": "expander-icon",
-    xmlns: "http://www.w3.org/2000/svg",
-    height: `${size}px`,
-    viewBox: "0 0 24 24",
-    width: `${size}px`,
-    style: props.style,
-    onClick,
-    className: join(props.className, ExpanderIconCls, ExpanderIconClsVariants({
-      direction: direction || "start",
-      expanded
-    }), "InfiniteIcon", "InfiniteIcon-expander", `InfiniteIcon-expander--${expanded ? "expanded" : "collapsed"}`, `InfiniteIcon-expander--${direction === "end" ? "end" : "start"}`)
-  }, /* @__PURE__ */ createElement32("path", {
-    d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
-  }));
-}
-
-// src/components/InfiniteTable/components/icons/LoadingIcon.tsx
-import {
-  createElement as createElement33
-} from "react";
-
-// src/components/InfiniteTable/components/icons/LoadingIcon.css.ts
-var LoadingIconCls = "_16lm1iw8 _16lm1iwi _16lm1iwe";
-
-// src/components/InfiniteTable/components/icons/LoadingIcon.tsx
-var LoadingIcon = (props) => {
-  return /* @__PURE__ */ createElement33("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    style: {
-      margin: "auto",
-      display: "block",
-      shapeRendering: "auto"
-    },
-    width: "24px",
-    height: "24px",
-    viewBox: "0 0 100 100",
-    preserveAspectRatio: "xMidYMid",
-    className: join(props.className, LoadingIconCls, "InfiniteIcon", "InfiniteIcon-loading")
-  }, /* @__PURE__ */ createElement33("circle", {
-    cx: "50",
-    cy: "50",
-    fill: "none",
-    strokeWidth: "10",
-    r: "35",
-    strokeDasharray: "164.93361431346415 56.97787143782138"
-  }, /* @__PURE__ */ createElement33("animateTransform", {
-    attributeName: "transform",
-    type: "rotate",
-    repeatCount: "indefinite",
-    dur: "1s",
-    values: "0 50 50;360 50 50",
-    keyTimes: "0;1"
-  })));
-};
-
-// src/components/InfiniteTable/utils/getColumnForGroupBy.tsx
-function styleForGroupColumn({
-  rowInfo
-}) {
-  return {
-    [stripVar(ThemeVars.components.Row.groupNesting)]: rowInfo.dataSourceHasGrouping ? rowInfo.isGroupRow ? rowInfo.groupNesting - 1 : rowInfo.groupNesting : 0
-  };
-}
-function getGroupColumnRender({
-  groupIndexForColumn,
-  groupRenderStrategy
-}) {
-  return (renderOptions) => {
-    const { rowInfo, renderBag, column } = renderOptions;
-    let { value: valueToRender, groupIcon, selectionCheckBox } = renderBag;
-    const groupRowInfo = rowInfo;
-    if (groupRenderStrategy === "multi-column") {
-      if (groupIndexForColumn + 1 !== groupRowInfo.groupNesting && groupRowInfo.isGroupRow) {
-        return null;
-      }
-    } else if (groupRenderStrategy === "single-column" && !groupRowInfo.isGroupRow) {
-    }
-    return /* @__PURE__ */ createElement34("div", {
-      className: join(display.flex, column.align === "end" ? flexFlow.rowReverse : flexFlow.row, alignItems.center, groupRenderStrategy === "single-column" || groupRenderStrategy === "multi-column" && !rowInfo.isGroupRow && selectionCheckBox ? GroupRowExpanderCls({ align: column.align || "start" }) : null)
-    }, groupIcon, selectionCheckBox, /* @__PURE__ */ createElement34("div", {
-      className: cssEllipsisClassName
-    }, valueToRender != null ? valueToRender : null));
-  };
-}
-function getGroupColumnRenderGroupIcon({
-  groupIndexForColumn,
-  groupRenderStrategy,
-  toggleGroupRow,
-  initialRenderGroupIcon
-}) {
-  return (renderOptions) => {
-    var _a, _b, _c;
-    const { rowInfo, value, groupBy, pivotBy, column } = renderOptions;
-    const groupRowInfo = groupRenderStrategy !== "inline" ? rowInfo : rowInfo.isGroupRow && ((_a = rowInfo.parents) == null ? void 0 : _a[groupIndexForColumn]) || rowInfo;
-    if (!groupRowInfo) {
-      return null;
-    }
-    const collapsed = groupRowInfo.collapsed;
-    if (groupRenderStrategy === "inline") {
-      if (groupRowInfo.groupCount === 1) {
-        return value;
-      }
-      if (groupRowInfo.groupNesting === groupIndexForColumn && collapsed) {
-        return null;
-      }
-    } else {
-      if (!groupRowInfo.isGroupRow) {
-        return null;
+        fns.beforeClear(map2);
       }
-      if (groupRenderStrategy === "multi-column") {
-        if (groupIndexForColumn + 1 !== groupRowInfo.groupNesting) {
-          return null;
-        }
+      const result = clear.call(map2);
+      if (fns.clear) {
+        fns.clear();
       }
+      return result;
+    };
+  }
+  return () => {
+    if (set) {
+      map2.set = set;
     }
-    const groupKeys = groupRowInfo.groupKeys;
-    let icon = null;
-    const showExpanderIcon = pivotBy ? (((_b = groupRowInfo.groupKeys) == null ? void 0 : _b.length) || 0) < (groupBy == null ? void 0 : groupBy.length) : (((_c = groupRowInfo.groupKeys) == null ? void 0 : _c.length) || 0) <= (groupBy == null ? void 0 : groupBy.length);
-    const isLoading = showLoadingIcon(groupRowInfo);
-    if (isLoading) {
-      icon = /* @__PURE__ */ createElement34(LoadingIcon, null);
-    } else if (showExpanderIcon) {
-      const defaultIcon = /* @__PURE__ */ createElement34(ExpanderIcon, {
-        expanded: !collapsed,
-        direction: column.align === "end" ? "end" : "start",
-        onChange: () => {
-          toggleGroupRow(groupKeys);
-        }
-      });
-      icon = defaultIcon;
+    if (deleteKey) {
+      map2.delete = deleteKey;
     }
-    if (initialRenderGroupIcon) {
-      renderOptions.renderBag.groupIcon = icon;
-      icon = /* @__PURE__ */ createElement34(RenderHookComponent, {
-        render: initialRenderGroupIcon,
-        renderParam: renderOptions
-      });
+    if (clear) {
+      map2.clear = clear;
     }
-    return icon;
   };
 }
-function getColumnForGroupBy(options, toggleGroupRow, groupColumnFromProps) {
-  const { groupByForColumn, groupIndexForColumn, groupRenderStrategy } = options;
-  let userDefinedGroupColumn = typeof groupColumnFromProps === "function" ? groupColumnFromProps(options, toggleGroupRow) : __spreadValues({}, groupColumnFromProps);
-  if (groupByForColumn.column) {
-    userDefinedGroupColumn = __spreadValues(__spreadValues({}, userDefinedGroupColumn), groupByForColumn.column);
-  }
-  let generatedGroupColumn = __spreadProps(__spreadValues({
-    header: `Group by ${groupByForColumn.field}`,
-    groupByField: groupByForColumn.field,
-    sortable: false,
-    style: styleForGroupColumn,
-    render: getGroupColumnRender({
-      groupIndexForColumn,
-      groupRenderStrategy
-    })
-  }, userDefinedGroupColumn), {
-    renderGroupIcon: getGroupColumnRenderGroupIcon({
-      initialRenderGroupIcon: userDefinedGroupColumn == null ? void 0 : userDefinedGroupColumn.renderGroupIcon,
-      groupIndexForColumn,
-      toggleGroupRow,
-      groupRenderStrategy
-    })
-  });
-  if (groupColumnFromProps) {
-    if (typeof groupColumnFromProps === "function") {
-      generatedGroupColumn = __spreadValues(__spreadValues({}, generatedGroupColumn), groupColumnFromProps(options, toggleGroupRow));
-    } else {
-      generatedGroupColumn = __spreadValues(__spreadValues({}, generatedGroupColumn), groupColumnFromProps);
+
+// src/components/InfiniteTable/state/computeColumnGroupsDepths.ts
+function computeColumnGroupsDepths(columnGroups) {
+  const map2 = new Map();
+  columnGroups.forEach((colGroup, colGroupId) => {
+    let parentGroupId = colGroup.columnGroup;
+    let depth = 0;
+    while (parentGroupId) {
+      const parent = columnGroups.get(parentGroupId);
+      if (!parent) {
+        if (false) {
+          console.warn(`Cannot find column group ${parentGroupId}`);
+        }
+        break;
+      }
+      depth++;
+      parentGroupId = parent.columnGroup;
     }
-  }
-  return generatedGroupColumn;
-}
-function getSingleGroupColumn(options, toggleGroupRow, groupColumnFromProps) {
-  const theGroupColumnFromProps = typeof groupColumnFromProps === "function" ? groupColumnFromProps(options, toggleGroupRow) : groupColumnFromProps;
-  let generatedGroupColumn = __spreadProps(__spreadValues({
-    header: `Group`,
-    groupByField: options.groupBy.map((g) => g.field),
-    sortable: false,
-    renderSelectionCheckBox: options.selectionMode === "multi-row",
-    style: styleForGroupColumn,
-    render: getGroupColumnRender({
-      groupIndexForColumn: 0,
-      groupRenderStrategy: "single-column"
-    })
-  }, groupColumnFromProps), {
-    renderGroupIcon: getGroupColumnRenderGroupIcon({
-      initialRenderGroupIcon: theGroupColumnFromProps == null ? void 0 : theGroupColumnFromProps.renderGroupIcon,
-      groupIndexForColumn: 0,
-      toggleGroupRow,
-      groupRenderStrategy: "single-column"
-    })
+    map2.set(colGroupId, depth);
   });
-  return generatedGroupColumn;
+  return map2;
+}
+
+// src/components/InfiniteTable/hooks/useColumnGroups.ts
+function useColumnGroups() {
+  const {
+    componentState: {
+      computedColumnGroups,
+      collapsedColumnGroups
+    },
+    componentActions,
+    getComponentState
+  } = useComponentState();
+  useEffect21(() => {
+    const recompute = () => {
+      componentActions.columnGroupsDepthsMap = computeColumnGroupsDepths(computedColumnGroups);
+    };
+    const update = rafFn(recompute);
+    return interceptMap(computedColumnGroups, {
+      clear: update,
+      delete: update,
+      set: update
+    });
+  }, [computedColumnGroups]);
+  useEffect21(() => {
+    return interceptMap(collapsedColumnGroups, {
+      set: (key, visibleCol) => {
+        const colIds = key.slice(1);
+        const columnVisibility = __spreadValues({}, getComponentState().columnVisibility);
+        colIds.forEach((colId) => {
+          columnVisibility[colId] = false;
+        });
+        delete columnVisibility[visibleCol];
+        componentActions.columnVisibility = columnVisibility;
+      },
+      beforeClear: (currentCollapsedGroups) => {
+        const columnVisibility = __spreadValues({}, getComponentState().columnVisibility);
+        const keys = [...currentCollapsedGroups.keys()];
+        keys.forEach((key) => {
+          const colIds = key.slice(1);
+          colIds.forEach((colId) => {
+            delete columnVisibility[colId];
+          });
+        });
+        componentActions.columnVisibility = columnVisibility;
+      },
+      delete: (key) => {
+        const columnVisibility = __spreadValues({}, getComponentState().columnVisibility);
+        const colIds = key.slice(1);
+        colIds.forEach((colId) => {
+          delete columnVisibility[colId];
+        });
+        componentActions.columnVisibility = columnVisibility;
+      }
+    });
+  }, [collapsedColumnGroups]);
+}
+
+// src/components/InfiniteTable/hooks/useColumnRowspan.ts
+import { useMemo as useMemo8 } from "react";
+function useColumnRowspan(computedVisibleColumns) {
+  const { getState: getDataSourceState } = useDataSourceContextValue();
+  const rowspan = useMemo8(() => {
+    const colsWithRowspan = computedVisibleColumns.filter((col) => typeof col.rowspan === "function");
+    return colsWithRowspan.length ? ({ rowIndex, colIndex }) => {
+      const dataArray = getDataSourceState().dataArray;
+      const rowInfo = dataArray[rowIndex];
+      if (!rowInfo) {
+        return 1;
+      }
+      const data = rowInfo.data;
+      const column = computedVisibleColumns[colIndex];
+      if (!column || !column.rowspan) {
+        return 1;
+      }
+      return column.rowspan({
+        column,
+        data,
+        dataArray,
+        rowInfo,
+        rowIndex
+      });
+    } : void 0;
+  }, [computedVisibleColumns]);
+  return rowspan;
+}
+
+// src/components/InfiniteTable/hooks/useColumnSizeFn.ts
+import { useCallback as useCallback15 } from "react";
+var debug4 = dbg("useColumnSizeFn");
+function useColumnSizeFn(columns) {
+  const columnSize = useCallback15((index) => {
+    const column = columns[index];
+    if (false) {
+      debug4("cannot find column at index", index, columns);
+    }
+    return column ? column.computedWidth : 0;
+  }, [columns]);
+  return columnSize;
 }
 
+// src/components/InfiniteTable/hooks/useColumnsWhen.ts
+import { useEffect as useEffect23, useMemo as useMemo9 } from "react";
+
 // src/components/InfiniteTable/hooks/useEffectWithRaf.ts
 import { useEffect as useEffect22, useRef as useRef21 } from "react";
 function useEffectWithRaf(fn, deps) {
@@ -10981,17 +11153,19 @@ function useColumnsWhenGrouping() {
     componentState: {
       columns,
       groupColumn,
+      hideColumnWhenGrouped,
       groupRenderStrategy,
       pivotColumns,
       pivotColumn,
       pivotTotalColumnPosition,
       pivotGrandTotalColumnPosition
-    }
+    },
+    getComponentState
   } = useComponentState();
   const toggleGroupRow = useToggleGroupRow();
   useEffect23(() => {
     const update = () => {
-      const columnsWhenGrouping = getColumnsWhenGrouping({
+      const { columns: columnsWhenGrouping, groupColumnIds } = getColumnsWhenGrouping({
         columns,
         groupColumn,
         pivotColumn,
@@ -11005,6 +11179,23 @@ function useColumnsWhenGrouping() {
         selectionMode
       });
       componentActions.columnsWhenGrouping = columnsWhenGrouping;
+      let currentColumnOrder = getComponentState().columnOrder;
+      if (groupColumnIds.length && Array.isArray(currentColumnOrder)) {
+        const colOrder = new Set(currentColumnOrder);
+        let shouldUpdate = false;
+        groupColumnIds.forEach((groupColId) => {
+          if (!colOrder.has(groupColId)) {
+            shouldUpdate = true;
+            currentColumnOrder = [
+              groupColId,
+              ...currentColumnOrder
+            ];
+          }
+        });
+        if (shouldUpdate) {
+          componentActions.columnOrder = currentColumnOrder;
+        }
+      }
     };
     update();
     return interceptMap(columns, {
@@ -11017,6 +11208,7 @@ function useColumnsWhenGrouping() {
     groupBy,
     pivotBy,
     selectionMode,
+    hideColumnWhenGrouped,
     groupColumn,
     groupRenderStrategy,
     pivotColumns,
@@ -11041,6 +11233,7 @@ function useHideColumns(groupByMap) {
     componentState: {
       columnTypes,
       computedColumns,
+      hideColumnWhenGrouped,
       hideEmptyGroupColumns,
       groupRenderStrategy
     }
@@ -11130,16 +11323,13 @@ function useHideColumns(groupByMap) {
   useEffect23(() => {
     const isGrouped = groupBy.length > 0;
     const currentState = getComponentState();
-    const { controlledColumnVisibility, columnVisibility } = currentState;
-    if (controlledColumnVisibility) {
-      return;
-    }
+    const { columnVisibility, hideColumnWhenGrouped: hideColumnWhenGrouped2 } = currentState;
     const newColumnVisibility = __spreadValues({}, columnVisibility);
     let updated = false;
     computedColumns.forEach((col, id) => {
-      if (col.defaultHiddenWhenGroupedBy) {
+      if (col.defaultHiddenWhenGroupedBy || hideColumnWhenGrouped2) {
         const nowHidden = columnVisibility[id] === false;
-        const shouldBeHidden = col.defaultHiddenWhenGroupedBy === "*" && isGrouped || typeof col.defaultHiddenWhenGroupedBy === "string" && groupByMap.get(col.defaultHiddenWhenGroupedBy) || typeof col.defaultHiddenWhenGroupedBy === "object" && Object.keys(col.defaultHiddenWhenGroupedBy).reduce((acc, field) => acc || groupByMap.has(field), false);
+        const shouldBeHidden = col.defaultHiddenWhenGroupedBy === "*" && isGrouped || (col.defaultHiddenWhenGroupedBy === true || hideColumnWhenGrouped2) && col.field && groupByMap.get(col.field) || typeof col.defaultHiddenWhenGroupedBy === "string" && groupByMap.get(col.defaultHiddenWhenGroupedBy) || typeof col.defaultHiddenWhenGroupedBy === "object" && Object.keys(col.defaultHiddenWhenGroupedBy).reduce((acc, field) => acc || groupByMap.has(field), false);
         if (nowHidden !== shouldBeHidden) {
           updated = true;
           if (shouldBeHidden) {
@@ -11153,7 +11343,13 @@ function useHideColumns(groupByMap) {
     if (updated) {
       componentActions.columnVisibility = newColumnVisibility;
     }
-  }, [computedColumns, columnTypes, groupBy, groupByMap]);
+  }, [
+    computedColumns,
+    columnTypes,
+    groupBy,
+    groupByMap,
+    hideColumnWhenGrouped
+  ]);
 }
 function getColumnsWhenGrouping(params) {
   const {
@@ -11170,9 +11366,10 @@ function getColumnsWhenGrouping(params) {
     columns
   } = params;
   if (groupRenderStrategy === "inline") {
-    return void 0;
+    return { columns: void 0, groupColumnIds: [] };
   }
   const computedColumns = new Map();
+  const groupColumnIds = [];
   if (groupRenderStrategy === "multi-column") {
     groupBy.forEach((groupByForColumn, groupIndexForColumn, arr) => {
       const generatedGroupColumn = getColumnForGroupBy({
@@ -11184,7 +11381,9 @@ function getColumnsWhenGrouping(params) {
         groupRenderStrategy,
         selectionMode
       }, toggleGroupRow, groupColumn);
-      computedColumns.set(generatedGroupColumn.id || `group-by-${groupByForColumn.field}`, generatedGroupColumn);
+      const groupColumnId = generatedGroupColumn.id || `group-by-${groupByForColumn.field}`;
+      groupColumnIds.push(groupColumnId);
+      computedColumns.set(groupColumnId, generatedGroupColumn);
     });
   } else if (groupRenderStrategy === "single-column" && groupBy.length) {
     const singleGroupColumn = getSingleGroupColumn({
@@ -11194,7 +11393,9 @@ function getColumnsWhenGrouping(params) {
       groupRenderStrategy,
       selectionMode
     }, toggleGroupRow, groupColumn);
-    computedColumns.set(singleGroupColumn.id || "group-by", singleGroupColumn);
+    const groupColumnId = singleGroupColumn.id || "group-by";
+    groupColumnIds.push(groupColumnId);
+    computedColumns.set(groupColumnId, singleGroupColumn);
   }
   if (pivotColumns) {
     const columnsByField = {};
@@ -11241,7 +11442,10 @@ function getColumnsWhenGrouping(params) {
       computedColumns.set(colId, col);
     });
   }
-  return computedColumns.size ? computedColumns : void 0;
+  return {
+    columns: computedColumns.size ? computedColumns : void 0,
+    groupColumnIds
+  };
 }
 
 // src/components/InfiniteTable/hooks/useComputedVisibleColumns.ts
@@ -11301,6 +11505,33 @@ var getComputedPinned = (colId, columnPinning) => {
   const computedPinned = pinned === "start" || pinned === true ? "start" : pinned === "end" ? "end" : false;
   return computedPinned;
 };
+function isGroupColumnSortable(column, columns) {
+  var _a;
+  let sortableColumnOrType = (_a = column.sortable) != null ? _a : column.colType.sortable;
+  if (sortableColumnOrType != null) {
+    return sortableColumnOrType;
+  }
+  if (column.computedSortable === false) {
+    return false;
+  }
+  let groupByField = column.groupByField || [];
+  if (groupByField != null && !Array.isArray(groupByField)) {
+    groupByField = [groupByField];
+  }
+  const fields = (groupByField || []).reduce((acc, field) => {
+    acc[field] = true;
+    return acc;
+  }, {});
+  const groupColumns = [];
+  columns.forEach((col) => {
+    if (col.field && fields[col.field]) {
+      groupColumns.push(col);
+    }
+  });
+  return groupColumns.reduce((sortable, col) => {
+    return sortable && col.computedSortable === true;
+  }, true);
+}
 var getComputedVisibleColumns = ({
   columns,
   bodySize,
@@ -11347,12 +11578,16 @@ var getComputedVisibleColumns = ({
     const result2 = isColumnVisible(columnVisibility, columnVisibilityAssumeVisible, colId);
     return result2;
   });
-  const columnsArray = visibleColumnOrder.map((columnId) => columns.get(columnId)).filter(Boolean);
+  const columnIdsToVisibleIndex = new Map();
+  const visibleColumnsArray = visibleColumnOrder.map((columnId, index) => {
+    const col = columns.get(columnId);
+    columnIdsToVisibleIndex.set(columnId, index);
+    return col;
+  });
   const sortedMap = (sortInfo != null ? sortInfo : []).reduce((acc, info, index) => {
     if (info.id) {
       acc[info.id] = { sortInfo: info, index };
-    }
-    if (info.field) {
+    } else if (info.field) {
       acc[info.field] = {
         sortInfo: info,
         index
@@ -11360,54 +11595,57 @@ var getComputedVisibleColumns = ({
     }
     return acc;
   }, {});
+  function getColSize(colId) {
+    var _a, _b, _c, _d, _e, _f;
+    const column = columns.get(colId);
+    const colType = getColumnComputedType(column, columnTypes);
+    const colTypeSizing = {
+      minWidth: colType == null ? void 0 : colType.minWidth,
+      maxWidth: colType == null ? void 0 : colType.maxWidth,
+      width: colType == null ? void 0 : colType.defaultWidth,
+      flex: colType == null ? void 0 : colType.defaultFlex
+    };
+    let colSizing = assignNonNull({
+      width: column == null ? void 0 : column.defaultWidth,
+      flex: column == null ? void 0 : column.defaultFlex,
+      minWidth: column == null ? void 0 : column.minWidth,
+      maxWidth: column == null ? void 0 : column.maxWidth
+    }, columnSizing[colId]);
+    if (colSizing.width != null) {
+      delete colTypeSizing.flex;
+    }
+    if (colSizing.flex != null) {
+      delete colTypeSizing.width;
+    }
+    colSizing = assignNonNull(colTypeSizing, colSizing);
+    const colFlex = (_a = colSizing.flex) != null ? _a : void 0;
+    const colMinWidth = (_c = (_b = colSizing.minWidth) != null ? _b : column == null ? void 0 : column.minWidth) != null ? _c : columnMinWidth;
+    const colMaxWidth = (_e = (_d = colSizing.maxWidth) != null ? _d : column == null ? void 0 : column.maxWidth) != null ? _e : columnMaxWidth;
+    let size = colFlex != void 0 ? void 0 : (_f = colSizing.width) != null ? _f : columnDefaultWidth;
+    if (!size && colFlex == void 0) {
+      size = colMinWidth;
+    }
+    return {
+      size,
+      flex: colFlex,
+      minSize: colMinWidth,
+      maxSize: colMaxWidth
+    };
+  }
   const flexResult = computeFlex({
     availableSize: Math.max(bodySize.width - (viewportReservedWidth != null ? viewportReservedWidth : 0) - getScrollbarWidth(), 0),
     maxSize: columnMaxWidth,
     minSize: columnMinWidth,
-    items: visibleColumnOrder.map((colId) => {
-      var _a, _b, _c, _d, _e, _f;
-      const column = columns.get(colId);
-      const colType = getColumnComputedType(column, columnTypes);
-      const colTypeSizing = {
-        minWidth: colType == null ? void 0 : colType.minWidth,
-        maxWidth: colType == null ? void 0 : colType.maxWidth,
-        width: colType == null ? void 0 : colType.defaultWidth,
-        flex: colType == null ? void 0 : colType.defaultFlex
-      };
-      let colSizing = assignNonNull({
-        width: column == null ? void 0 : column.defaultWidth,
-        flex: column == null ? void 0 : column.defaultFlex,
-        minWidth: column == null ? void 0 : column.minWidth,
-        maxWidth: column == null ? void 0 : column.maxWidth
-      }, columnSizing[colId]);
-      if (colSizing.width != null) {
-        delete colTypeSizing.flex;
-      }
-      if (colSizing.flex != null) {
-        delete colTypeSizing.width;
-      }
-      colSizing = assignNonNull(colTypeSizing, colSizing);
-      const colFlex = (_a = colSizing.flex) != null ? _a : void 0;
-      const colMinWidth = (_c = (_b = colSizing.minWidth) != null ? _b : column == null ? void 0 : column.minWidth) != null ? _c : columnMinWidth;
-      const colMaxWidth = (_e = (_d = colSizing.maxWidth) != null ? _d : column == null ? void 0 : column.maxWidth) != null ? _e : columnMaxWidth;
-      let size = colFlex != void 0 ? void 0 : (_f = colSizing.width) != null ? _f : columnDefaultWidth;
-      if (!size && colFlex == void 0) {
-        size = colMinWidth;
-      }
-      return {
-        size,
-        flex: colFlex,
-        minSize: colMinWidth,
-        maxSize: colMaxWidth
-      };
-    })
+    items: visibleColumnOrder.map(getColSize)
   });
   const { computedSizes, flexSizes, minSizes, maxSizes } = flexResult;
   const computedPinnedStartColumns = [];
   const computedPinnedEndColumns = [];
   const computedUnpinnedColumns = [];
   const computedVisibleColumns = [];
+  computedVisibleColumns.length = visibleColumnOrder.length;
   const computedVisibleColumnsMap = new Map();
+  const computedColumnsMap = new Map();
   let computedUnpinnedColumnsWidth = 0;
   let computedPinnedStartColumnsWidth = 0;
   let computedPinnedEndColumnsWidth = 0;
@@ -11416,7 +11654,7 @@ var getComputedVisibleColumns = ({
   let totalPinnedStartWidth = 0;
   let totalUnpinnedWidth = 0;
   let totalPinnedEndWidth = 0;
-  columnsArray.forEach((_c, i) => {
+  visibleColumnsArray.forEach((_c, i) => {
     const id = visibleColumnOrder[i];
     const computedWidth = computedSizes[i];
     const pinned = computedPinnedArray[i] = getComputedPinned(id, columnPinning);
@@ -11429,39 +11667,55 @@ var getComputedVisibleColumns = ({
     }
   });
   const firstPinnedEndAbsoluteOffset = bodySize.width - totalPinnedEndWidth;
-  columnsArray.forEach((c, i) => {
+  const groupColumns = [];
+  const orderedColumns = new Map();
+  visibleColumnOrder.forEach((id, index) => {
+    const c = visibleColumnsArray[index];
+    orderedColumns.set(id, c);
+  });
+  columns.forEach((c, key) => {
+    if (!orderedColumns.has(key)) {
+      orderedColumns.set(key, c);
+    }
+  });
+  orderedColumns.forEach((c, id) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
-    const id = visibleColumnOrder[i];
-    const nextColumnId = visibleColumnOrder[i + 1];
+    let theComputedVisibleIndex = columnIdsToVisibleIndex.get(id);
+    if (theComputedVisibleIndex == void 0) {
+      theComputedVisibleIndex = -1;
+    }
+    const computedVisible = theComputedVisibleIndex != -1;
+    const nextColumnId = visibleColumnOrder[theComputedVisibleIndex + 1];
     const colType = getColumnComputedType(c, columnTypes);
-    const computedVisibleIndex = i;
+    const computedVisibleIndex = theComputedVisibleIndex;
     const sortingInfo = sortedMap[id] ? sortedMap[id] : c.field ? (_a = sortedMap[c.field]) != null ? _a : null : null;
     const computedSortInfo = (_b = sortingInfo == null ? void 0 : sortingInfo.sortInfo) != null ? _b : null;
     const computedSorted = !!computedSortInfo;
     const computedSortedAsc = computedSorted && computedSortInfo.dir === 1;
     const computedSortedDesc = computedSorted && !computedSortedAsc;
     const computedSortIndex = (_c = sortingInfo == null ? void 0 : sortingInfo.index) != null ? _c : -1;
-    const computedWidth = computedSizes[i];
-    const computedFlex = flexSizes[i] || null;
-    const computedMinWidth = minSizes[i] || 0;
-    const computedMaxWidth = maxSizes[i] || 1e4;
-    const computedPinned = getComputedPinned(id, columnPinning);
-    const computedLast = i === visibleColumnOrder.length - 1;
+    const colSizeForNonVisibleColumn = computedVisible ? {} : getColSize(id);
+    const computedWidth = computedVisible ? computedSizes[theComputedVisibleIndex] : colSizeForNonVisibleColumn.size || 0;
+    const computedFlex = computedVisible ? flexSizes[theComputedVisibleIndex] || null : null;
+    const computedMinWidth = computedVisible ? minSizes[theComputedVisibleIndex] || 0 : colSizeForNonVisibleColumn.minSize || 0;
+    const computedMaxWidth = computedVisible ? maxSizes[theComputedVisibleIndex] || 1e4 : colSizeForNonVisibleColumn.maxSize || 1e4;
+    const computedPinned = computedVisible ? getComputedPinned(id, columnPinning) : false;
+    const computedLast = computedVisible ? theComputedVisibleIndex === visibleColumnOrder.length - 1 : false;
     let computedVisibleIndexInCategory = computedVisibleIndex;
-    const computedPinningOffset = computedPinned === "start" ? computedPinnedStartColumnsWidth : computedPinned === "end" ? computedPinnedEndColumnsWidth : computedOffset - computedPinnedStartColumnsWidth;
+    const computedPinningOffset = computedVisible ? computedPinned === "start" ? computedPinnedStartColumnsWidth : computedPinned === "end" ? computedPinnedEndColumnsWidth : computedOffset - computedPinnedStartColumnsWidth : 0;
     if (computedPinned == "start") {
-      computedVisibleIndexInCategory = computedVisibleIndex;
+      computedVisibleIndexInCategory = computedVisible ? computedVisibleIndex : -1;
     } else if (computedPinned === "end") {
-      computedVisibleIndexInCategory = computedVisibleIndex - (computedPinnedStartColumns.length + computedUnpinnedColumns.length);
+      computedVisibleIndexInCategory = computedVisible ? computedVisibleIndex - (computedPinnedStartColumns.length + computedUnpinnedColumns.length) : -1;
     } else {
-      computedVisibleIndexInCategory = computedVisibleIndex - computedPinnedStartColumns.length;
+      computedVisibleIndexInCategory = computedVisible ? computedVisibleIndex - computedPinnedStartColumns.length : -1;
     }
-    const computedAbsoluteOffset = computedPinned === "start" || computedPinned === false ? computedOffset : firstPinnedEndAbsoluteOffset + computedPinnedEndColumnsWidth;
-    const computedFirstInCategory = computedPinned !== prevPinned;
-    const computedLastInCategory = computedLast || computedPinned !== getComputedPinned(nextColumnId, columnPinning);
+    const computedAbsoluteOffset = computedVisible ? computedPinned === "start" || computedPinned === false ? computedOffset : firstPinnedEndAbsoluteOffset + computedPinnedEndColumnsWidth : -1;
+    const computedFirstInCategory = computedVisible ? computedPinned !== prevPinned : false;
+    const computedLastInCategory = computedVisible ? computedLast || computedPinned !== getComputedPinned(nextColumnId, columnPinning) : false;
     const cssEllipsis = (_e = (_d = c.cssEllipsis) != null ? _d : colType.cssEllipsis) != null ? _e : columnCssEllipsis;
     const headerCssEllipsis = (_j = (_i = (_h = (_g = (_f = c.headerCssEllipsis) != null ? _f : colType.cssEllipsis) != null ? _g : c.cssEllipsis) != null ? _h : colType.headerCssEllipsis) != null ? _i : columnHeaderCssEllipsis) != null ? _j : cssEllipsis;
-    const computedFilterValue = filterValueRecord[id] || c.field ? filterValueRecord[c.field] || null : null;
+    const computedFilterValue = computedVisible ? filterValueRecord[id] || c.field ? filterValueRecord[c.field] || null : null : null;
     const computedFiltered = computedFilterValue != null;
     const computedFilterable = (_l = (_k = c.defaultFilterable) != null ? _k : colType.defaultFilterable) != null ? _l : true;
     const computedDataType = c.dataType || colType.dataType || (Array.isArray(c.type) ? c.type[0] : c.type) || "string";
@@ -11470,14 +11724,16 @@ var getComputedVisibleColumns = ({
     const field = (_m = c.field) != null ? _m : colType.field;
     const valueGetter = (_n = c.valueGetter) != null ? _n : colType.valueGetter;
     let sortableColumnOrType = (_o = c.sortable) != null ? _o : colType.sortable;
-    if (sortableColumnOrType == null) {
+    if (sortableColumnOrType == null && !c.groupByField) {
       if (field == null && valueGetter == null) {
         sortableColumnOrType = false;
       }
     }
     let computedSortable = (_p = sortableColumnOrType != null ? sortableColumnOrType : sortable) != null ? _p : true;
     const result2 = __spreadProps(__spreadValues({
+      colType,
       align: colType.align,
+      computedVisible,
       verticalAlign: colType.verticalAlign,
       defaultHiddenWhenGroupedBy: colType.defaultHiddenWhenGroupedBy,
       valueGetter,
@@ -11520,16 +11776,17 @@ var getComputedVisibleColumns = ({
       computedDraggable: (_u = (_t = c.draggable) != null ? _t : draggableColumns) != null ? _u : true,
       computedFirstInCategory,
       computedLastInCategory,
-      computedFirst: i === 0,
+      computedFirst: theComputedVisibleIndex === 0,
       computedLast,
       toggleSort: () => {
         const currentSortInfo = computedSortInfo;
         let newColumnSortInfo;
+        const field2 = result2.groupByField ? result2.groupByField : c.field;
         if (!currentSortInfo) {
           newColumnSortInfo = {
             dir: 1,
             id,
-            field: c.field,
+            field: field2,
             type: computedSortType
           };
         } else {
@@ -11541,8 +11798,8 @@ var getComputedVisibleColumns = ({
             });
           }
         }
-        if (c.field && newColumnSortInfo && !newColumnSortInfo.field) {
-          newColumnSortInfo.field = c.field;
+        if (field2 && newColumnSortInfo && !newColumnSortInfo.field) {
+          newColumnSortInfo.field = field2;
         }
         if (c.valueGetter && newColumnSortInfo && !newColumnSortInfo.valueGetter) {
           newColumnSortInfo.valueGetter = (data) => c.valueGetter({ data, field: c.field });
@@ -11569,22 +11826,31 @@ var getComputedVisibleColumns = ({
       id,
       header: (_x = (_w = (_v = c.header) != null ? _v : colType.header) != null ? _w : c.name) != null ? _x : c.field
     });
-    computedOffset += computedWidth;
-    computedVisibleColumnsMap.set(result2.id, result2);
-    computedVisibleColumns.push(result2);
-    if (computedPinned === "start") {
-      computedPinnedStartColumns.push(result2);
-      computedPinnedStartColumnsWidth += result2.computedWidth;
-    }
-    if (computedPinned === "end") {
-      computedPinnedEndColumns.push(result2);
-      computedPinnedEndColumnsWidth += result2.computedWidth;
-    }
-    if (!computedPinned) {
-      computedUnpinnedColumns.push(result2);
-      computedUnpinnedColumnsWidth += result2.computedWidth;
-    }
-    prevPinned = computedPinned;
+    if (computedVisible) {
+      computedOffset += computedWidth;
+      computedVisibleColumnsMap.set(result2.id, result2);
+      computedVisibleColumns[theComputedVisibleIndex] = result2;
+      if (computedPinned === "start") {
+        computedPinnedStartColumns.push(result2);
+        computedPinnedStartColumnsWidth += result2.computedWidth;
+      }
+      if (computedPinned === "end") {
+        computedPinnedEndColumns.push(result2);
+        computedPinnedEndColumnsWidth += result2.computedWidth;
+      }
+      if (!computedPinned) {
+        computedUnpinnedColumns.push(result2);
+        computedUnpinnedColumnsWidth += result2.computedWidth;
+      }
+      prevPinned = computedPinned;
+    }
+    if (result2.groupByField) {
+      groupColumns.push(result2);
+    }
+    computedColumnsMap.set(result2.id, result2);
+  });
+  groupColumns.forEach((col) => {
+    col.computedSortable = isGroupColumnSortable(col, computedColumnsMap);
   });
   const computedPinnedStartWidth = pinnedStartMaxWidth != null ? Math.min(pinnedStartMaxWidth, computedPinnedStartColumnsWidth) : computedPinnedStartColumnsWidth;
   const computedPinnedEndWidth = pinnedEndMaxWidth != null ? Math.min(pinnedEndMaxWidth, computedPinnedEndColumnsWidth) : computedPinnedEndColumnsWidth;
@@ -11600,6 +11866,7 @@ var getComputedVisibleColumns = ({
     computedPinnedEndOffset: computedPinnedStartColumnsWidth + computedUnpinnedColumnsWidth,
     computedUnpinnedColumns,
     computedVisibleColumns,
+    computedColumnsMap,
     computedVisibleColumnsMap,
     computedPinnedEndWidth,
     computedPinnedStartWidth,
@@ -11667,7 +11934,8 @@ var useComputedVisibleColumns = ({
     computedPinnedEndOffset,
     computedPinnedEndWidth,
     computedPinnedStartWidth,
-    renderSelectionCheckBox
+    renderSelectionCheckBox,
+    computedColumnsMap
   } = useMemo10(() => {
     return getComputedVisibleColumns({
       columns,
@@ -11720,6 +11988,7 @@ var useComputedVisibleColumns = ({
   const result = {
     renderSelectionCheckBox,
     columns,
+    computedColumnsMap,
     computedPinnedEndWidth,
     computedPinnedStartWidth,
     computedRemainingSpace,
@@ -11827,7 +12096,8 @@ function useComputed() {
     computedRemainingSpace,
     computedPinnedStartWidth,
     computedPinnedEndWidth,
-    renderSelectionCheckBox
+    renderSelectionCheckBox,
+    computedColumnsMap
   } = useComputedVisibleColumns({
     columns,
     columnCssEllipsis: componentState.columnCssEllipsis,
@@ -11871,6 +12141,7 @@ function useComputed() {
     columnSize,
     rowspan,
     toggleGroupRow,
+    computedColumnsMap,
     renderSelectionCheckBox,
     computedPinnedStartOverflow,
     computedPinnedEndOverflow,
@@ -12054,7 +12325,7 @@ var useLicense = (licenseKey = "") => {
   const valid = useMemo11(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.4.3"
+      version: "0.4.4"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -12234,6 +12505,7 @@ function initSetupState2() {
     onRowHeightCSSVarChange: buildSubscriptionCallback(),
     onColumnHeaderHeightCSSVarChange: buildSubscriptionCallback(),
     cellClick: buildSubscriptionCallback(),
+    cellMouseDown: buildSubscriptionCallback(),
     keyDown: buildSubscriptionCallback(),
     bodySize: {
       width: 0,
@@ -12288,6 +12560,7 @@ var forwardProps4 = (setupState) => {
     filterEditors: (filterEditors) => __spreadValues(__spreadValues({}, defaultFilterEditors), filterEditors),
     viewportReservedWidth: (viewportReservedWidth) => viewportReservedWidth != null ? viewportReservedWidth : 0,
     resizableColumns: (resizableColumns) => resizableColumns != null ? resizableColumns : true,
+    hideColumnWhenGrouped: (hideColumnWhenGrouped) => hideColumnWhenGrouped != null ? hideColumnWhenGrouped : false,
     columnMinWidth: (columnMinWidth) => columnMinWidth != null ? columnMinWidth : 30,
     columnMaxWidth: (columnMaxWidth) => columnMaxWidth != null ? columnMaxWidth : 5e3,
     columnDefaultWidth: (columnDefaultWidth) => columnDefaultWidth != null ? columnDefaultWidth : 200,
@@ -12364,6 +12637,7 @@ var mapPropsToState2 = (params) => {
     groupRenderStrategy,
     groupBy,
     computedColumns,
+    initialColumns: props.columns,
     keyboardNavigation: (_a = props.keyboardNavigation) != null ? _a : state.activeCellIndex != null ? "cell" : state.activeRowIndex != null ? "row" : "cell",
     columnHeaderCssEllipsis: (_c = (_b = props.columnHeaderCssEllipsis) != null ? _b : props.columnCssEllipsis) != null ? _c : true,
     columnGroupsDepthsMap,