@infinite-table/infinite-react 0.0.10 → 0.1.0

package/index.esm.js

@@ -703,6 +703,17 @@ var ScrollListener = class {
   }
 };
 
+// src/components/InfiniteTable/utils/toMap.ts
+function toMap(mapOrObject) {
+  if (!mapOrObject) {
+    return new Map();
+  }
+  if (mapOrObject instanceof Map) {
+    return mapOrObject;
+  }
+  return new Map(Object.entries(mapOrObject));
+}
+
 // src/components/InfiniteTable/state/computeColumnGroupsDepths.ts
 function computeColumnGroupsDepths(columnGroups) {
   const map2 = new Map();
@@ -726,15 +737,6 @@ function computeColumnGroupsDepths(columnGroups) {
 }
 
 // src/components/InfiniteTable/state/getInitialState.ts
-function toMap(mapOrObject) {
-  if (!mapOrObject) {
-    return new Map();
-  }
-  if (mapOrObject instanceof Map) {
-    return mapOrObject;
-  }
-  return new Map(Object.entries(mapOrObject));
-}
 function toColumnTypesMap(mapOrObject) {
   return toMap(mapOrObject);
 }
@@ -804,6 +806,7 @@ var forwardProps = () => {
     columnMaxWidth: (columnMaxWidth) => columnMaxWidth != null ? columnMaxWidth : 2e3,
     columnDefaultWidth: (columnDefaultWidth) => columnDefaultWidth != null ? columnDefaultWidth : 200,
     draggableColumns: (draggableColumns) => draggableColumns != null ? draggableColumns : true,
+    showSeparatePivotColumnForSingleAggregation: (showSeparatePivotColumnForSingleAggregation) => showSeparatePivotColumnForSingleAggregation != null ? showSeparatePivotColumnForSingleAggregation : false,
     sortable: (sortable) => sortable != null ? sortable : true,
     hideEmptyGroupColumns: (hideEmptyGroupColumns) => hideEmptyGroupColumns != null ? hideEmptyGroupColumns : false,
     pivotTotalColumnPosition: (pivotTotalColumnPosition) => pivotTotalColumnPosition != null ? pivotTotalColumnPosition : "end",
@@ -815,7 +818,10 @@ var forwardProps = () => {
     virtualizeColumns: (virtualizeColumns) => virtualizeColumns != null ? virtualizeColumns : true,
     rowHeight: (rowHeight) => typeof rowHeight === "number" ? rowHeight : 0,
     headerHeight: (headerHeight) => typeof headerHeight === "number" ? headerHeight : 0,
-    columnVisibility: (columnVisibility) => columnVisibility != null ? columnVisibility : new Map(),
+    columnVisibility: (columnVisibility) => {
+      var _a;
+      return (_a = toMap(columnVisibility)) != null ? _a : new Map();
+    },
     columnPinning: (columnPinning) => columnPinning != null ? columnPinning : new Map(),
     columnSizing: (columnSizing) => {
       var _a;
@@ -825,21 +831,20 @@ var forwardProps = () => {
       var _a;
       return (_a = toColumnTypesMap(columnTypes)) != null ? _a : new Map();
     },
-    columnAggregations: (columnAggregations) => columnAggregations != null ? columnAggregations : new Map(),
     collapsedColumnGroups: (collapsedColumnGroups) => collapsedColumnGroups != null ? collapsedColumnGroups : new Map(),
     columnGroups: (columnGroups) => columnGroups != null ? columnGroups : new Map()
   };
 };
 function getGroupRenderStrategy(options) {
-  const { groupRowsBy, groupColumn, groupRenderStrategy } = options;
+  const { groupBy, groupColumn, groupRenderStrategy } = options;
   if (groupRenderStrategy) {
     return groupRenderStrategy;
   }
   if (groupColumn != null && typeof groupColumn === "object") {
     return "single-column";
   }
-  const columnsInGroupRowsBy = groupRowsBy.filter((g) => g.column);
-  if (columnsInGroupRowsBy.length) {
+  const columnsInGroupBy = groupBy.filter((g) => g.column);
+  if (columnsInGroupBy.length) {
     return "multi-column";
   }
   return "multi-column";
@@ -850,16 +855,17 @@ var mapPropsToState = (params) => {
   const computedColumnGroups = state.pivotColumnGroups || state.columnGroups;
   const virtualizeHeader = header && virtualizeColumns && (!computedColumnGroups || (computedColumnGroups == null ? void 0 : computedColumnGroups.size) === 0);
   const columnGroupsDepthsMap = state.columnGroups && state.columnGroups != (oldState == null ? void 0 : oldState.columnGroups) || state.pivotColumnGroups && state.pivotColumnGroups != (oldState == null ? void 0 : oldState.pivotColumnGroups) ? computeColumnGroupsDepths(computedColumnGroups) : state.columnGroupsDepthsMap;
-  const groupRowsBy = parentState == null ? void 0 : parentState.groupRowsBy;
+  const groupBy = parentState == null ? void 0 : parentState.groupBy;
   const groupRenderStrategy = getGroupRenderStrategy({
     groupRenderStrategy: props.groupRenderStrategy,
-    groupRowsBy,
+    groupBy,
     groupColumn: props.groupColumn
   });
+  const computedColumns = state.computedPivotColumns || state.columnsWhenGrouping || state.columnsWhenInlineGroupRenderStrategy || state.columns;
   return {
     groupRenderStrategy,
-    groupRowsBy,
-    computedColumns: state.computedPivotColumns || state.columnsWhenGrouping || state.columnsWhenInlineGroupRenderStrategy || state.columns,
+    groupBy,
+    computedColumns,
     virtualizeHeader,
     columnGroupsDepthsMap,
     columnGroupsMaxDepth: columnGroupsDepthsMap != state.columnGroupsDepthsMap ? Math.max(...columnGroupsDepthsMap.values(), 0) : state.columnGroupsMaxDepth,
@@ -1645,48 +1651,17 @@ var useComputedVisibleColumns = ({
 var sortAscending = (a, b) => a - b;
 
 // src/components/InfiniteTable/hooks/useComputed.ts
-import { useCallback as useCallback5, useState as useState5 } from "react";
-
-// src/components/InfiniteTable/hooks/useColumnAggregations.ts
-import { useEffect as useEffect5 } from "react";
-
-// src/components/DataSource/publicHooks/useDataSourceActions.ts
-import {
-  useContext as useContext2
-} from "react";
-
-// src/components/DataSource/DataSourceContext.ts
-import {
-  createContext as createContext2
-} from "react";
-var DSContext;
-function getDataSourceContext() {
-  if (DSContext) {
-    return DSContext;
-  }
-  return DSContext = createContext2({
-    getState: () => null,
-    componentState: null,
-    componentActions: null
-  });
-}
-
-// src/components/DataSource/publicHooks/useDataSourceActions.ts
-function useDataSourceActions() {
-  const DataSourceContext = getDataSourceContext();
-  const contextValue = useContext2(DataSourceContext);
-  return contextValue.componentActions;
-}
+import { useCallback as useCallback5, useEffect as useEffect10, useState as useState5 } from "react";
 
 // src/components/hooks/useComponentState.tsx
 import {
   createElement as createElement2,
   memo,
-  useContext as useContext3
+  useContext as useContext2
 } from "react";
 import {
   useReducer,
-  createContext as createContext3,
+  createContext as createContext2,
   useMemo as useMemo3,
   useEffect as useEffect4,
   useState as useState2,
@@ -1766,7 +1741,7 @@ function getComponentStateContext() {
   if (ComponentContext) {
     return ComponentContext;
   }
-  return ComponentContext = createContext3(null);
+  return ComponentContext = createContext2(null);
 }
 function getReducerGeneratedActions(dispatch, getState, getProps, propsToForward, allowedControlledPropOverrides, interceptedActions) {
   const state = getState();
@@ -1925,7 +1900,7 @@ function getComponentStateRoot(config) {
         if (oldValue === newValue) {
           continue;
         }
-        if (isControlled(key, props)) {
+        if (isControlled(key, props) || isControlled(key, prevProps)) {
           if (propsToForward.hasOwnProperty(k)) {
             let valueToSet = newValue;
             const forwardFn = propsToForward[k];
@@ -1962,56 +1937,44 @@ function getComponentStateRoot(config) {
 }
 function useComponentState() {
   const Context = getComponentStateContext();
-  return useContext3(Context);
-}
-
-// src/components/InfiniteTable/hooks/useColumnAggregations.ts
-function useColumnAggregations() {
-  const {
-    componentState: { columnAggregations },
-    getComponentState
-  } = useComponentState();
-  const dataSourceActions = useDataSourceActions();
-  useEffect5(() => {
-    function updateDataSourceAggregations() {
-      const reducers = [];
-      const componentState = getComponentState();
-      columnAggregations.forEach((aggregator, key) => {
-        var _a;
-        const colField = (_a = componentState.computedColumns.get(key)) == null ? void 0 : _a.field;
-        const newAggregator = __spreadValues({
-          getter: (data) => colField ? data[colField] : data
-        }, aggregator);
-        reducers.push(newAggregator);
-      });
-      dataSourceActions.aggregationReducers = reducers;
-    }
-    updateDataSourceAggregations();
-    return interceptMap(columnAggregations, {
-      clear: updateDataSourceAggregations,
-      delete: updateDataSourceAggregations,
-      set: updateDataSourceAggregations
-    });
-  }, [columnAggregations]);
+  return useContext2(Context);
 }
 
 // src/components/DataSource/publicHooks/useDataSource.ts
 import {
-  useContext as useContext4
+  useContext as useContext3
+} from "react";
+
+// src/components/DataSource/DataSourceContext.ts
+import {
+  createContext as createContext3
 } from "react";
+var DSContext;
+function getDataSourceContext() {
+  if (DSContext) {
+    return DSContext;
+  }
+  return DSContext = createContext3({
+    getState: () => null,
+    componentState: null,
+    componentActions: null
+  });
+}
+
+// src/components/DataSource/publicHooks/useDataSource.ts
 function useDataSource() {
   const DataSourceContext = getDataSourceContext();
-  const contextValue = useContext4(DataSourceContext);
+  const contextValue = useContext3(DataSourceContext);
   return contextValue.componentState;
 }
 function useDataSourceContextValue() {
   const DataSourceContext = getDataSourceContext();
-  const contextValue = useContext4(DataSourceContext);
+  const contextValue = useContext3(DataSourceContext);
   return contextValue;
 }
 
 // src/components/InfiniteTable/hooks/useColumnGroups.ts
-import { useEffect as useEffect6 } from "react";
+import { useEffect as useEffect5 } from "react";
 function useColumnGroups() {
   const {
     componentState: {
@@ -2021,7 +1984,7 @@ function useColumnGroups() {
     componentActions,
     getComponentState
   } = useComponentState();
-  useEffect6(() => {
+  useEffect5(() => {
     const recompute = () => {
       componentActions.columnGroupsDepthsMap = computeColumnGroupsDepths(computedColumnGroups);
     };
@@ -2032,7 +1995,7 @@ function useColumnGroups() {
       set: update
     });
   }, [computedColumnGroups]);
-  useEffect6(() => {
+  useEffect5(() => {
     return interceptMap(collapsedColumnGroups, {
       set: (key, visibleCol) => {
         const colIds = key.slice(1);
@@ -2064,7 +2027,7 @@ function useColumnGroups() {
 }
 
 // src/components/InfiniteTable/hooks/useColumnsWhen.ts
-import { useEffect as useEffect10, useMemo as useMemo5 } from "react";
+import { useEffect as useEffect9, useMemo as useMemo5 } from "react";
 
 // src/components/InfiniteTable/state/getComputedPivotColumnsFromDataSourcePivotColumns.tsx
 import {
@@ -2077,27 +2040,14 @@ var join = (...args) => args.filter((x) => !!`${x}`).join(" ");
 // src/components/InfiniteTable/components/icons/ExpanderIcon.tsx
 import {
   createElement as createElement3,
-  useEffect as useEffect7
+  useEffect as useEffect6
 } from "react";
 import { useState as useState3 } from "react";
 
-// src/components/InfiniteTable/utilities.css.ts
-var alignItems = { center: "_16lm1iw11", stretch: "_16lm1iw12" };
-var cssEllipsisClassName = "_16lm1iw1a _16lm1iw1b _16lm1iw16";
-var cursor = { pointer: "_16lm1iwb" };
-var display = { flex: "_16lm1iwj", block: "_16lm1iwk", inlineBlock: "_16lm1iwl" };
-var fill = { currentColor: "_16lm1iw5", accentColor: "_16lm1iw6" };
-var flex = { "1": "_16lm1iwc", none: "_16lm1iwd" };
-var flexFlow = { column: "_16lm1iwz", row: "_16lm1iw10" };
-var justifyContent = { center: "_16lm1iw13", start: "_16lm1iw14", end: "_16lm1iw15" };
-var left = { "0": "_16lm1iwt", "100%": "_16lm1iwu" };
-var position = { relative: "_16lm1iw1", absolute: "_16lm1iw2", sticky: "_16lm1iw3", fixed: "_16lm1iw4" };
-var top = { "0": "_16lm1iwr", "100%": "_16lm1iws" };
-var transform = { translateZero: "_16lm1iw9", rotate90: "_16lm1iwa" };
-var transformTranslateZero = "_16lm1iw8";
-var userSelect = { none: "_16lm1iwm" };
-var willChange = { transform: "_16lm1iw19" };
-var zIndex = { "1": "_16lm1iwe", "10": "_16lm1iwf", "1000": "_16lm1iwg", "10000": "_16lm1iwh", "100000": "_16lm1iwi" };
+// src/components/InfiniteTable/components/icons/ExpanderIcon.css.ts
+var import_createRuntimeFn = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
+var ExpanderIconCls = "_16lm1iw6 _16lm1iwd _16lm1iwb";
+var ExpanderIconClsVariants = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "", variantClassNames: { expanded: { true: "_16lm1iwa", false: "_198z9782" } }, defaultVariants: {}, compoundVariants: [] });
 
 // src/components/InfiniteTable/components/icons/ExpanderIcon.tsx
 function ExpanderIcon(props) {
@@ -2111,7 +2061,7 @@ function ExpanderIcon(props) {
       setExpanded(!expanded);
     }
   };
-  useEffect7(() => {
+  useEffect6(() => {
     if (isControlled("expanded", props)) {
       setExpanded(props.expanded);
     }
@@ -2124,18 +2074,37 @@ function ExpanderIcon(props) {
     width: `${size}px`,
     style: props.style,
     onClick,
-    className: join(props.className, fill.accentColor, flex.none, cursor.pointer, expanded ? fill.accentColor : "", expanded ? transform.rotate90 : "", "InfiniteIcon", "InfiniteIcon-expander", `InfiniteIcon-expander--${expanded ? "expanded" : "collapsed"}`)
+    className: join(props.className, ExpanderIconCls, ExpanderIconClsVariants({
+      expanded
+    }), "InfiniteIcon", "InfiniteIcon-expander", `InfiniteIcon-expander--${expanded ? "expanded" : "collapsed"}`)
   }, /* @__PURE__ */ createElement3("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/InfiniteTableRow/row.css.ts
-var import_createRuntimeFn = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
+var import_createRuntimeFn2 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
 var GroupRowExpanderCls = "_7pupv0b";
-var RowClsRecipe = (0, import_createRuntimeFn.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 RowClsRecipe = (0, import_createRuntimeFn2.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/utilities.css.ts
+var alignItems = { center: "_16lm1iw11", stretch: "_16lm1iw12" };
+var cssEllipsisClassName = "_16lm1iw1a _16lm1iw1b _16lm1iw16";
+var cursor = { pointer: "_16lm1iwb" };
+var display = { flex: "_16lm1iwj", block: "_16lm1iwk", inlineBlock: "_16lm1iwl" };
+var flex = { "1": "_16lm1iwc", none: "_16lm1iwd" };
+var flexFlow = { column: "_16lm1iwz", row: "_16lm1iw10" };
+var justifyContent = { center: "_16lm1iw13", start: "_16lm1iw14", end: "_16lm1iw15" };
+var left = { "0": "_16lm1iwt", "100%": "_16lm1iwu" };
+var position = { relative: "_16lm1iw1", absolute: "_16lm1iw2", sticky: "_16lm1iw3", fixed: "_16lm1iw4" };
+var top = { "0": "_16lm1iwr", "100%": "_16lm1iws" };
+var transform = { translateZero: "_16lm1iw9", rotate90: "_16lm1iwa" };
+var transformTranslateZero = "_16lm1iw8";
+var userSelect = { none: "_16lm1iwm" };
+var willChange = { transform: "_16lm1iw19" };
+var zIndex = { "1": "_16lm1iwe", "10": "_16lm1iwf", "1000": "_16lm1iwg", "10000": "_16lm1iwh", "100000": "_16lm1iwi" };
+
 // src/components/InfiniteTable/state/getComputedPivotColumnsFromDataSourcePivotColumns.tsx
 function getComputedPivotColumnsFromDataSourcePivotColumns(pivotColumns, params) {
   if (!pivotColumns) {
@@ -2145,7 +2114,7 @@ function getComputedPivotColumnsFromDataSourcePivotColumns(pivotColumns, params)
     pivotColumn,
     pivotRowLabelsColumn,
     pivotBy,
-    groupRowsBy,
+    groupBy,
     pivotTotalColumnPosition,
     toggleGroupRow
   } = params;
@@ -2162,7 +2131,7 @@ function getComputedPivotColumnsFromDataSourcePivotColumns(pivotColumns, params)
           column = __spreadValues(__spreadValues({}, column), pivotColumn({
             column,
             pivotBy,
-            groupRowsBy
+            groupBy
           }));
         } else {
           column = __spreadValues(__spreadValues({}, column), pivotColumn);
@@ -2174,7 +2143,7 @@ function getComputedPivotColumnsFromDataSourcePivotColumns(pivotColumns, params)
           column = __spreadValues(__spreadValues({}, column), pivotRowLabelsColumn({
             column,
             pivotBy,
-            groupRowsBy
+            groupBy
           }));
         } else {
           column = __spreadValues(__spreadValues({}, column), pivotRowLabelsColumn);
@@ -2183,11 +2152,11 @@ function getComputedPivotColumnsFromDataSourcePivotColumns(pivotColumns, params)
       if (!column.render) {
         column.render = (renderOptions) => {
           var _a;
-          let { value, rowInfo, column: column2, groupRowsBy: groupRowsBy2 } = renderOptions;
+          let { value, rowInfo, column: column2, groupBy: groupBy2 } = renderOptions;
           if (column2.renderValue) {
             value = column2.renderValue(renderOptions);
           }
-          const showExpanderIcon = (((_a = rowInfo.groupKeys) == null ? void 0 : _a.length) || 0) < groupRowsBy2.length;
+          const showExpanderIcon = (((_a = rowInfo.groupKeys) == null ? void 0 : _a.length) || 0) < groupBy2.length;
           return /* @__PURE__ */ createElement4("div", {
             className: join(display.flex, alignItems.center, GroupRowExpanderCls)
           }, showExpanderIcon ? /* @__PURE__ */ createElement4(ExpanderIcon, {
@@ -2287,7 +2256,7 @@ function getColumnForGroupBy(options, toggleGroupRow, groupColumnFromProps) {
 function getSingleGroupColumn(options, toggleGroupRow, groupColumnFromProps) {
   let generatedGroupColumn = {
     header: `Group`,
-    groupByField: options.groupRowsBy.map((g) => g.field),
+    groupByField: options.groupBy.map((g) => g.field),
     sortable: false,
     render: (renderOptions) => {
       let { value, rowInfo, column } = renderOptions;
@@ -2403,10 +2372,10 @@ var getMultisortFunction = (sortInfo, get) => {
 };
 
 // src/components/DataSource/privateHooks/useLoadData.ts
-import { useEffect as useEffect9, useLayoutEffect as useLayoutEffect3, useRef as useRef6, useState as useState4 } from "react";
+import { useEffect as useEffect8, useLayoutEffect as useLayoutEffect3, useRef as useRef6, useState as useState4 } from "react";
 
 // src/components/hooks/useEffectWithChanges.ts
-import { useEffect as useEffect8, useRef as useRef5 } from "react";
+import { useEffect as useEffect7, useRef as useRef5 } from "react";
 function useEffectWithChanges(fn, deps) {
   const prevRef = useRef5({});
   const oldValuesRef = useRef5({});
@@ -2424,7 +2393,7 @@ function useEffectWithChanges(fn, deps) {
     }
   }
   prevRef.current = deps;
-  useEffect8(() => {
+  useEffect7(() => {
     const changes2 = changesRef.current;
     const result = fn(changes2, oldValues);
     changesRef.current = {};
@@ -2440,7 +2409,7 @@ function buildDataSourceDataParams(componentState) {
   const dataSourceParams = {
     originalDataArray: componentState.originalDataArray,
     sortInfo,
-    groupRowsBy: componentState.groupRowsBy,
+    groupBy: componentState.groupBy,
     pivotBy: componentState.pivotBy
   };
   if (componentState.livePagination !== void 0) {
@@ -2502,7 +2471,7 @@ function useLivePagination() {
   const {
     notifyScrollbarsChange,
     sortInfo,
-    groupRowsBy,
+    groupBy,
     pivotBy,
     livePaginationCursor,
     scrollBottomId
@@ -2512,7 +2481,7 @@ function useLivePagination() {
     horizontal: false
   });
   const scrollbarsRef = useRef6(scrollbars);
-  useEffect9(() => {
+  useEffect8(() => {
     notifyScrollbarsChange.onChange((scrollbars2) => {
       if (!scrollbars2) {
         return;
@@ -2523,7 +2492,7 @@ function useLivePagination() {
     return () => notifyScrollbarsChange.destroy();
   }, [notifyScrollbarsChange]);
   const [cursorId, updateCursorId] = useState4(void 0);
-  useEffect9(() => {
+  useEffect8(() => {
     const frameId = requestAnimationFrame(() => {
       var _a;
       if (!((_a = scrollbarsRef.current) == null ? void 0 : _a.vertical)) {
@@ -2532,18 +2501,18 @@ function useLivePagination() {
     });
     return () => cancelAnimationFrame(frameId);
   }, [livePaginationCursor]);
-  useEffect9(() => {
+  useEffect8(() => {
     const { livePaginationCursor: livePaginationCursor2, livePagination } = getComponentState();
     if (!scrollbars.vertical && livePagination) {
       updateCursorId(livePaginationCursor2);
     }
   }, [scrollbars.vertical]);
-  useEffect9(() => {
+  useEffect8(() => {
     updateCursorId(scrollBottomId);
   }, [scrollBottomId]);
   const depsObject = {
     sortInfo,
-    groupRowsBy,
+    groupBy,
     pivotBy,
     cursorId
   };
@@ -2624,6 +2593,13 @@ var DeepMap = class {
       });
     }
   }
+  static clone(map2) {
+    const clone = new DeepMap();
+    map2.visit((pair, keys) => {
+      clone.set(keys, pair.value);
+    });
+    return clone;
+  }
   set(keys, value) {
     let currentMap = this.map;
     if (!keys.length) {
@@ -3000,6 +2976,7 @@ function initSetupState2() {
     pivotTotalColumnPosition: "end",
     originalDataArray,
     scrollBottomId: Symbol("scrollBottomId"),
+    showSeparatePivotColumnForSingleAggregation: false,
     pivotColumns: void 0,
     pivotColumnGroups: void 0,
     dataArray,
@@ -3008,7 +2985,6 @@ function initSetupState2() {
     sortedAt: 0,
     reducedAt: now,
     generateGroupRows: true,
-    aggregationReducers: void 0,
     groupDeepMap: void 0,
     postSortDataArray: void 0,
     postGroupDataArray: void 0,
@@ -3024,15 +3000,15 @@ function getCompareObject(dataParams) {
 var forwardProps3 = () => {
   return {
     onDataParamsChange: (fn) => fn ? discardCallsWithEqualArg(fn, 100, getCompareObject) : void 0,
-    remoteCount: 1,
     data: 1,
     pivotBy: 1,
     primaryKey: 1,
     livePagination: 1,
     livePaginationCursor: 1,
+    aggregationReducers: 1,
     loading: (loading) => loading != null ? loading : false,
     sortInfo: (sortInfo) => normalizeSortInfo(sortInfo),
-    groupRowsBy: (groupRowsBy) => groupRowsBy != null ? groupRowsBy : [],
+    groupBy: (groupBy) => groupBy != null ? groupBy : [],
     groupRowsState: (groupRowsState) => {
       return groupRowsState || new GroupRowsState({
         expandedRows: true,
@@ -3064,19 +3040,28 @@ function DEFAULT_TO_KEY(value) {
   return value;
 }
 function initReducers(reducers) {
-  if (!reducers || !reducers.length) {
-    return [];
+  if (!reducers || !Object.keys(reducers).length) {
+    return {};
   }
-  return reducers.map((reducer) => reducer.initialValue);
+  const result = {};
+  for (let key in reducers)
+    if (reducers.hasOwnProperty(key)) {
+      result[key] = reducers[key].initialValue;
+    }
+  return result;
 }
 function computeReducersFor(data, reducers, reducerResults) {
-  if (!reducers || !reducers.length) {
+  var _a, _b;
+  if (!reducers || !Object.keys(reducers).length) {
     return;
   }
-  reducers.forEach((reducer, index) => {
-    const currentValue = reducerResults[index];
-    reducerResults[index] = reducer.reducer(currentValue, reducer.getter(data), data);
-  });
+  for (let key in reducers)
+    if (reducers.hasOwnProperty(key)) {
+      const reducer = reducers[key];
+      const currentValue = reducerResults[key];
+      const value = reducer.field ? data[reducer.field] : (_b = (_a = reducer.getter) == null ? void 0 : _a.call(reducer, data)) != null ? _b : null;
+      reducerResults[key] = reducer.reducer(currentValue, value, data);
+    }
 }
 function group(groupParams, data) {
   const {
@@ -3091,7 +3076,7 @@ function group(groupParams, data) {
   let currentGroupKeys = [];
   let currentPivotKeys = [];
   const initialReducerValue = initReducers(reducers);
-  const globalReducerResults = [...initialReducerValue];
+  const globalReducerResults = __spreadValues({}, initialReducerValue);
   for (let i = 0, len = data.length; i < len; i++) {
     let item = data[i];
     for (let groupByIndex = 0; groupByIndex < groupByLength; groupByIndex++) {
@@ -3101,7 +3086,7 @@ function group(groupParams, data) {
       if (!deepMap.has(currentGroupKeys)) {
         const deepMapGroupValue = {
           items: [],
-          reducerResults: [...initialReducerValue]
+          reducerResults: __spreadValues({}, initialReducerValue)
         };
         if (pivot) {
           deepMapGroupValue.pivotDeepMap = new DeepMap();
@@ -3125,7 +3110,7 @@ function group(groupParams, data) {
           if (!pivotDeepMap.has(currentPivotKeys)) {
             topLevelPivotColumns.set(currentPivotKeys, true);
             pivotDeepMap == null ? void 0 : pivotDeepMap.set(currentPivotKeys, {
-              reducerResults: [...initialReducerValue],
+              reducerResults: __spreadValues({}, initialReducerValue),
               items: []
             });
           }
@@ -3187,11 +3172,23 @@ function flatten(groupResult) {
   return result;
 }
 function getEnhancedGroupData(options, deepMapValue) {
-  const { groupBy, groupKeys, collapsed, parents } = options;
+  const { groupBy, groupKeys, collapsed, parents, reducers } = options;
   const groupNesting = groupKeys.length;
   const { items: groupItems, reducerResults, pivotDeepMap } = deepMapValue;
+  let data = null;
+  if (Object.keys(reducerResults).length > 0) {
+    data = {};
+    for (let key in reducers)
+      if (reducers.hasOwnProperty(key)) {
+        const reducer = reducers[key];
+        const field = reducer.field;
+        if (field) {
+          data[field] = reducerResults[key];
+        }
+      }
+  }
   const enhancedGroupData = {
-    data: null,
+    data,
     groupCount: groupItems.length,
     groupData: groupItems,
     groupKeys,
@@ -3213,17 +3210,25 @@ function getEnhancedGroupData(options, deepMapValue) {
   return enhancedGroupData;
 }
 function completeReducers(reducers, reducerResults, items) {
-  if (reducers && reducers.length) {
-    reducers == null ? void 0 : reducers.forEach((reducer, index) => {
-      if (reducer.done) {
-        reducerResults[index] = reducer.done(reducerResults[index], items);
+  if (reducers) {
+    for (let key in reducers)
+      if (reducers.hasOwnProperty(key)) {
+        const reducer = reducers[key];
+        if (reducer.done) {
+          reducerResults[key] = reducer.done(reducerResults[key], items);
+        }
       }
-    });
   }
   return reducerResults;
 }
 function enhancedFlatten(param) {
-  const { groupResult, toPrimaryKey, groupRowsState, generateGroupRows } = param;
+  const {
+    groupResult,
+    toPrimaryKey,
+    groupRowsState,
+    generateGroupRows,
+    reducers = {}
+  } = param;
   const { groupParams, deepMap, pivot } = groupResult;
   const { groupBy } = groupParams;
   const groupByStrings = groupBy.map((g) => g.field);
@@ -3238,6 +3243,7 @@ function enhancedFlatten(param) {
     const enhancedGroupData = getEnhancedGroupData({
       groupBy: groupByStrings,
       parents: Array.from(parents),
+      reducers,
       indexInGroup,
       indexInParentGroups: Array.from(indexInParentGroups),
       indexInAll: result.length,
@@ -3290,13 +3296,45 @@ function enhancedFlatten(param) {
 }
 
 // src/utils/groupAndPivot/getPivotColumnsAndColumnGroups.ts
-function getPivotColumnsAndColumnGroups(deepMap, pivotBy, pivotTotalColumnPosition) {
+function prepareColumn(column) {
+  const { pivotByAtIndex: pivotByForColumn } = column;
+  if (pivotByForColumn.column) {
+    if (typeof pivotByForColumn.column === "function") {
+      Object.assign(column, pivotByForColumn.column({ column }));
+    } else {
+      Object.assign(column, pivotByForColumn.column);
+    }
+  }
+  return column;
+}
+function prepareColumnGroup(columnGroup) {
+  const { pivotByAtIndex: pivotByForColumnGroup } = columnGroup;
+  if (pivotByForColumnGroup.columnGroup) {
+    if (typeof pivotByForColumnGroup.columnGroup === "function") {
+      Object.assign(columnGroup, pivotByForColumnGroup.columnGroup({ columnGroup }));
+    } else {
+      Object.assign(columnGroup, pivotByForColumnGroup.columnGroup);
+    }
+  }
+  return columnGroup;
+}
+function getPivotColumnsAndColumnGroups({
+  deepMap,
+  pivotBy,
+  pivotTotalColumnPosition,
+  reducers = {},
+  showSeparatePivotColumnForSingleAggregation = false
+}) {
   const pivotLength = pivotBy.length;
+  const aggregationReducers = Object.keys(reducers).map((key) => {
+    return __spreadProps(__spreadValues({}, reducers[key]), { id: key });
+  });
   const columns = new Map([
     [
       "labels",
       {
         header: "Row labels",
+        pivotBy,
         valueGetter: (params) => {
           var _a;
           const { rowInfo } = params;
@@ -3306,72 +3344,104 @@ function getPivotColumnsAndColumnGroups(deepMap, pivotBy, pivotTotalColumnPositi
     ]
   ]);
   const columnGroups = new Map();
+  const isSingleAggregationColumn = !showSeparatePivotColumnForSingleAggregation && aggregationReducers.length === 1;
   deepMap.visitDepthFirst((_value, keys, _indexInGroup, next) => {
     keys = [...keys];
     if (pivotTotalColumnPosition === "end") {
       next == null ? void 0 : next();
     }
     if (keys.length === pivotLength) {
-      const parentKeys = keys.slice(0, -1);
-      let columnGroupId = parentKeys.join("/");
       const pivotByForColumn = pivotBy[keys.length - 1];
-      let computedPivotColumn = __spreadValues({
-        pivotBy,
-        pivotColumn: true,
-        pivotGroupKeys: keys,
-        pivotGroupKeyForColumn: keys[keys.length - 1],
-        pivotIndexForColumn: keys.length - 1,
-        pivotByForColumn,
-        sortable: false,
-        columnGroup: parentKeys.length ? `${columnGroupId}` : void 0,
-        header: keys[keys.length - 1],
-        valueGetter: ({ rowInfo }) => {
-          var _a, _b, _c;
-          const value = (_c = (_b = (_a = rowInfo.pivotValuesMap) == null ? void 0 : _a.get(keys)) == null ? void 0 : _b.reducerResults[0]) != null ? _c : null;
-          return value;
-        }
-      }, pivotByForColumn.column);
-      if (pivotByForColumn.column) {
-        if (typeof pivotByForColumn.column === "function") {
-          Object.assign(computedPivotColumn, pivotByForColumn.column({ column: computedPivotColumn }));
-        } else {
-          Object.assign(computedPivotColumn, pivotByForColumn.column);
-        }
-      }
-      columns.set(`${keys.join("/")}`, computedPivotColumn);
-    } else {
-      const colGroupId = keys.join("/");
       const parentKeys = keys.slice(0, -1);
-      columnGroups.set(colGroupId, {
-        columnGroup: parentKeys.length ? parentKeys.join("/") : void 0,
-        header: keys.join(" >> ")
-      });
-      if (pivotTotalColumnPosition !== false) {
-        const pivotByForColumn = pivotBy[keys.length - 1];
-        let computedPivotColumn = __spreadValues({
-          columnGroup: parentKeys.length ? parentKeys.join("/") : void 0,
-          header: `${keys.join("/")} total `,
-          pivotTotalColumn: true,
+      let parentColumnGroupId = parentKeys.join("/");
+      if (!isSingleAggregationColumn) {
+        const columnGroupId = parentColumnGroupId;
+        parentColumnGroupId = keys.join("/");
+        const pivotGroupKey = keys[keys.length - 1];
+        columnGroups.set(parentColumnGroupId, prepareColumnGroup({
+          header: pivotGroupKey,
+          columnGroup: columnGroupId,
+          pivotBy,
           pivotGroupKeys: keys,
-          pivotGroupKeyForColumn: keys[keys.length - 1],
-          pivotByForColumn,
-          pivotIndexForColumn: keys.length - 1,
+          pivotByAtIndex: pivotByForColumn,
+          pivotIndex: keys.length - 1,
+          pivotGroupKey
+        }));
+      }
+      aggregationReducers.forEach((reducer, index) => {
+        const header = isSingleAggregationColumn ? keys[keys.length - 1] : reducer.id;
+        const computedPivotColumn = prepareColumn({
           pivotBy,
+          pivotColumn: true,
+          pivotTotalColumn: false,
+          pivotAggregator: reducer,
+          pivotAggregatorIndex: index,
+          pivotGroupKeys: keys,
+          pivotGroupKey: keys[keys.length - 1],
+          pivotIndex: keys.length - 1,
+          pivotByAtIndex: pivotByForColumn,
           sortable: false,
+          columnGroup: parentColumnGroupId,
+          header,
           valueGetter: ({ rowInfo }) => {
-            var _a, _b, _c;
-            const value = (_c = (_b = (_a = rowInfo.pivotValuesMap) == null ? void 0 : _a.get(keys)) == null ? void 0 : _b.reducerResults[0]) != null ? _c : null;
-            return value;
-          }
-        }, pivotByForColumn.column);
-        if (pivotByForColumn.column) {
-          if (typeof pivotByForColumn.column === "function") {
-            Object.assign(computedPivotColumn, pivotByForColumn.column({ column: computedPivotColumn }));
-          } else {
-            Object.assign(computedPivotColumn, pivotByForColumn.column);
+            var _a, _b;
+            return (_b = (_a = rowInfo.pivotValuesMap) == null ? void 0 : _a.get(keys)) == null ? void 0 : _b.reducerResults[reducer.id];
           }
+        });
+        const columnId = `${keys.join("/")}-${reducer.id}`;
+        columns.set(columnId, computedPivotColumn);
+      });
+    } else {
+      const colGroupId = keys.join("/");
+      const parentKeys = keys.slice(0, -1);
+      columnGroups.set(colGroupId, prepareColumnGroup({
+        columnGroup: parentKeys.length ? parentKeys.join("/") : void 0,
+        header: keys[keys.length - 1],
+        pivotBy,
+        pivotGroupKeys: keys,
+        pivotIndex: keys.length - 1,
+        pivotByAtIndex: pivotBy[keys.length - 1],
+        pivotGroupKey: keys[keys.length - 1]
+      }));
+      if (pivotTotalColumnPosition !== false) {
+        const pivotByForColumn = pivotBy[keys.length - 1];
+        let columnGroupId = parentKeys.length ? parentKeys.join("/") : void 0;
+        if (!isSingleAggregationColumn) {
+          let parentGroupForTotalsGroup = columnGroupId;
+          columnGroupId = `total:${keys.join("/")}`;
+          columnGroups.set(columnGroupId, prepareColumnGroup({
+            header: `${keys[keys.length - 1]} total`,
+            columnGroup: parentGroupForTotalsGroup,
+            pivotBy,
+            pivotTotalColumnGroup: true,
+            pivotGroupKeys: keys,
+            pivotIndex: keys.length - 1,
+            pivotByAtIndex: pivotByForColumn,
+            pivotGroupKey: keys[keys.length - 1]
+          }));
         }
-        columns.set(`${keys.join("/")}-total`, computedPivotColumn);
+        aggregationReducers.forEach((reducer, index) => {
+          const header = isSingleAggregationColumn ? `${keys[keys.length - 1]} total ` : `${reducer.id} total`;
+          const computedPivotColumn = prepareColumn({
+            columnGroup: columnGroupId,
+            header,
+            pivotAggregator: reducer,
+            pivotAggregatorIndex: index,
+            pivotColumn: true,
+            pivotTotalColumn: true,
+            pivotGroupKeys: keys,
+            pivotGroupKey: keys[keys.length - 1],
+            pivotByAtIndex: pivotByForColumn,
+            pivotIndex: keys.length - 1,
+            pivotBy,
+            sortable: false,
+            valueGetter: ({ rowInfo }) => {
+              var _a, _b;
+              return (_b = (_a = rowInfo.pivotValuesMap) == null ? void 0 : _a.get(keys)) == null ? void 0 : _b.reducerResults[reducer.id];
+            }
+          });
+          columns.set(`total:${keys.join("/")}-${reducer.id}`, computedPivotColumn);
+        });
       }
     }
     if (pivotTotalColumnPosition === "start" || pivotTotalColumnPosition === false) {
@@ -3381,9 +3451,12 @@ function getPivotColumnsAndColumnGroups(deepMap, pivotBy, pivotTotalColumnPositi
   if (columns.size === 1) {
     columns.set("single", {
       header: "Reduced",
+      pivotBy,
+      pivotColumn: true,
       valueGetter: ({ rowInfo }) => {
         var _a;
-        return (_a = rowInfo.reducerResults) == null ? void 0 : _a[0];
+        const key = Object.keys(rowInfo.reducerResults || {})[0];
+        return (_a = rowInfo.reducerResults) == null ? void 0 : _a[key];
       }
     });
   }
@@ -3407,7 +3480,14 @@ var haveDepsChanged = (state1, state2, deps) => {
   return false;
 };
 function toRowInfo(data, id, index) {
-  return { data, collapsed: true, id, indexInAll: index, indexInGroup: index };
+  return {
+    data,
+    collapsed: true,
+    id,
+    indexInAll: index,
+    indexInGroup: index,
+    isGroupRow: false
+  };
 }
 function concludeReducer(params) {
   var _a;
@@ -3419,17 +3499,18 @@ function concludeReducer(params) {
     "sortInfo"
   ]);
   const shouldSortAgain = shouldSort && (sortDepsChanged || !state.lastSortDataArray);
-  const groupBy = state.groupRowsBy;
+  const groupBy = state.groupBy;
   const pivotBy = state.pivotBy;
   const shouldGroup = groupBy.length || pivotBy;
   const groupsDepsChanged = haveDepsChanged(previousState, state, [
     "generateGroupRows",
     "originalDataArray",
-    "groupRowsBy",
+    "groupBy",
     "groupRowsState",
     "pivotBy",
     "aggregationReducers",
     "pivotTotalColumnPosition",
+    "showSeparatePivotColumnForSingleAggregation",
     "sortInfo"
   ]);
   const shouldGroupAgain = shouldGroup && (groupsDepsChanged || !state.lastGroupDataArray);
@@ -3455,13 +3536,20 @@ function concludeReducer(params) {
       }, dataArray);
       const flattenResult = enhancedFlatten({
         groupResult,
+        reducers: state.aggregationReducers,
         toPrimaryKey,
         groupRowsState: state.groupRowsState,
         generateGroupRows: state.generateGroupRows
       });
       rowInfoDataArray = flattenResult.data;
       state.groupDeepMap = groupResult.deepMap;
-      const pivotGroupsAndCols = pivotBy ? getPivotColumnsAndColumnGroups(groupResult.topLevelPivotColumns, pivotBy, (_a = state.pivotTotalColumnPosition) != null ? _a : "end") : void 0;
+      const pivotGroupsAndCols = pivotBy ? getPivotColumnsAndColumnGroups({
+        deepMap: groupResult.topLevelPivotColumns,
+        pivotBy,
+        pivotTotalColumnPosition: (_a = state.pivotTotalColumnPosition) != null ? _a : "end",
+        reducers: state.aggregationReducers,
+        showSeparatePivotColumnForSingleAggregation: state.showSeparatePivotColumnForSingleAggregation
+      }) : void 0;
       state.pivotColumns = pivotGroupsAndCols == null ? void 0 : pivotGroupsAndCols.columns;
       state.pivotColumnGroups = pivotGroupsAndCols == null ? void 0 : pivotGroupsAndCols.columnGroups;
     } else {
@@ -3548,49 +3636,49 @@ function useToggleGroupRow() {
 }
 
 // src/components/InfiniteTable/hooks/useColumnsWhen.ts
-function useGroupRowsMap(groupRowsBy) {
-  const groupRowsMap = useMemo5(() => {
-    return groupRowsBy.reduce((acc, groupBy, index) => {
-      acc.set(groupBy.field, {
-        groupBy,
+function useGroupByMap(groupBy) {
+  const groupByMap = useMemo5(() => {
+    return groupBy.reduce((acc, groupBy2, index) => {
+      acc.set(groupBy2.field, {
+        groupBy: groupBy2,
         groupIndex: index
       });
       return acc;
     }, new Map());
-  }, [groupRowsBy]);
-  return groupRowsMap;
+  }, [groupBy]);
+  return groupByMap;
 }
 function useColumnsWhen() {
   const {
-    componentState: { groupRowsBy },
+    componentState: { groupBy },
     componentActions: dataSourceActions
   } = useDataSourceContextValue();
   const {
     componentState: { groupRenderStrategy, pivotTotalColumnPosition }
   } = useComponentState();
-  const groupRowsMap = useGroupRowsMap(groupRowsBy);
-  useEffect10(() => {
+  const groupByMap = useGroupByMap(groupBy);
+  useEffect9(() => {
     dataSourceActions.generateGroupRows = groupRenderStrategy !== "inline";
   }, [groupRenderStrategy]);
-  useEffect10(() => {
+  useEffect9(() => {
     dataSourceActions.pivotTotalColumnPosition = pivotTotalColumnPosition;
   }, [pivotTotalColumnPosition]);
-  useColumnsWhenInlineGroupRenderStrategy(groupRowsMap);
+  useColumnsWhenInlineGroupRenderStrategy(groupByMap);
   useColumnsWhenPivoting();
   useColumnsWhenGrouping();
-  useHideEmptyGroupColumns(groupRowsMap);
+  useHideEmptyGroupColumns(groupByMap);
 }
-function useColumnsWhenInlineGroupRenderStrategy(groupRowsMap) {
+function useColumnsWhenInlineGroupRenderStrategy(groupByMap) {
   const toggleGroupRow = useToggleGroupRow();
   const {
     componentActions,
     componentState: { columns, groupRenderStrategy }
   } = useComponentState();
-  function computeColumnsWhenInlineGroupRenderStrategy(columns2, groupRowsMap2, groupRenderStrategy2, toggleGroupRow2) {
+  function computeColumnsWhenInlineGroupRenderStrategy(columns2, groupByMap2, groupRenderStrategy2, toggleGroupRow2) {
     const computedColumns = new Map();
     columns2.forEach((column, id) => {
       let base = {};
-      const groupByForColumn = groupRowsMap2.get(column.field);
+      const groupByForColumn = groupByMap2.get(column.field);
       if (groupByForColumn && groupRenderStrategy2 === "inline") {
         const { groupIndex } = groupByForColumn;
         const field = groupByForColumn.groupBy.field;
@@ -3635,9 +3723,9 @@ function useColumnsWhenInlineGroupRenderStrategy(groupRowsMap) {
     });
     return computedColumns.size === 0 ? void 0 : computedColumns;
   }
-  useEffect10(() => {
+  useEffect9(() => {
     const update = () => {
-      componentActions.columnsWhenInlineGroupRenderStrategy = computeColumnsWhenInlineGroupRenderStrategy(columns, groupRowsMap, groupRenderStrategy, toggleGroupRow);
+      componentActions.columnsWhenInlineGroupRenderStrategy = computeColumnsWhenInlineGroupRenderStrategy(columns, groupByMap, groupRenderStrategy, toggleGroupRow);
     };
     update();
     return interceptMap(columns, {
@@ -3645,11 +3733,11 @@ function useColumnsWhenInlineGroupRenderStrategy(groupRowsMap) {
       delete: update,
       clear: update
     });
-  }, [columns, groupRowsMap, groupRenderStrategy, toggleGroupRow]);
+  }, [columns, groupByMap, groupRenderStrategy, toggleGroupRow]);
 }
 function useColumnsWhenPivoting() {
   const {
-    componentState: { groupRowsBy, pivotBy }
+    componentState: { groupBy, pivotBy }
   } = useDataSourceContextValue();
   const {
     componentActions,
@@ -3661,13 +3749,13 @@ function useColumnsWhenPivoting() {
     }
   } = useComponentState();
   const toggleGroupRow = useToggleGroupRow();
-  useEffect10(() => {
+  useEffect9(() => {
     const computedPivotColumns = getComputedPivotColumnsFromDataSourcePivotColumns(pivotColumns, {
       pivotColumn,
       pivotRowLabelsColumn,
       pivotTotalColumnPosition,
       pivotBy,
-      groupRowsBy,
+      groupBy,
       toggleGroupRow
     });
     componentActions.computedPivotColumns = computedPivotColumns;
@@ -3675,14 +3763,14 @@ function useColumnsWhenPivoting() {
 }
 function useColumnsWhenGrouping() {
   const {
-    componentState: { groupRowsBy }
+    componentState: { groupBy }
   } = useDataSourceContextValue();
   const {
     componentActions,
     componentState: { columns, groupColumn, groupRenderStrategy, pivotColumns }
   } = useComponentState();
   const toggleGroupRow = useToggleGroupRow();
-  useEffect10(() => {
+  useEffect9(() => {
     if (pivotColumns) {
       return;
     }
@@ -3691,7 +3779,7 @@ function useColumnsWhenGrouping() {
         columns,
         groupColumn,
         groupRenderStrategy,
-        groupRowsBy,
+        groupBy,
         pivotColumns,
         toggleGroupRow
       });
@@ -3703,11 +3791,11 @@ function useColumnsWhenGrouping() {
       delete: update,
       clear: update
     });
-  }, [groupRowsBy, groupColumn, groupRenderStrategy, pivotColumns]);
+  }, [columns, groupBy, groupColumn, groupRenderStrategy, pivotColumns]);
 }
 function useHideEmptyGroupColumns(groupRowsMap) {
   const {
-    componentState: { groupRowsBy, groupRowsState },
+    componentState: { groupBy, groupRowsState },
     getState: getDataSourceState
   } = useDataSourceContextValue();
   const {
@@ -3719,11 +3807,11 @@ function useHideEmptyGroupColumns(groupRowsMap) {
       groupRenderStrategy
     }
   } = useComponentState();
-  useEffect10(() => {
-    if (groupRenderStrategy === "single-column") {
+  useEffect9(() => {
+    if (groupRenderStrategy !== "multi-column") {
       return;
     }
-    const groupsLength = groupRowsBy.length;
+    const groupsLength = groupBy.length;
     let expandedGroupsLevel = 0;
     const { dataArray } = getDataSourceState();
     const len = dataArray.length;
@@ -3739,15 +3827,15 @@ function useHideEmptyGroupColumns(groupRowsMap) {
     let updated = false;
     const columnVisibility = new Map(currentState.columnVisibility);
     const cols = computedColumns;
-    groupRowsBy.forEach(({ field }, index) => {
-      const colId = groupRenderStrategy === "multi-column" ? `group-by-${field}` : field;
-      const col = cols.get(colId);
+    groupBy.forEach(({ field, column: groupColumn }, index) => {
+      const colId = (groupColumn == null ? void 0 : groupColumn.id) || `group-by-${field}`;
+      let col = cols.get(colId);
       if (!col) {
         return;
       }
-      const shouldBeHidden = index > expandedGroupsLevel;
+      const shouldBeHidden = index > expandedGroupsLevel && hideEmptyGroupColumns;
       updated = true;
-      if (shouldBeHidden && hideEmptyGroupColumns) {
+      if (shouldBeHidden) {
         columnVisibility.set(colId, false);
       } else {
         columnVisibility.delete(colId);
@@ -3760,7 +3848,7 @@ function useHideEmptyGroupColumns(groupRowsMap) {
     getDataSourceState,
     groupRenderStrategy,
     generatedColumns,
-    groupRowsBy,
+    groupBy,
     groupRowsMap,
     hideEmptyGroupColumns ? groupRowsState : null,
     hideEmptyGroupColumns
@@ -3769,7 +3857,7 @@ function useHideEmptyGroupColumns(groupRowsMap) {
 function getColumnsWhenGrouping(params) {
   const {
     pivotColumns,
-    groupRowsBy,
+    groupBy,
     groupColumn,
     groupRenderStrategy,
     toggleGroupRow,
@@ -3783,10 +3871,10 @@ function getColumnsWhenGrouping(params) {
   }
   const computedColumns = new Map();
   if (groupRenderStrategy === "multi-column") {
-    groupRowsBy.forEach((groupByForColumn, groupIndexForColumn, arr) => {
+    groupBy.forEach((groupByForColumn, groupIndexForColumn, arr) => {
       const generatedGroupColumn = getColumnForGroupBy({
         groupByForColumn,
-        groupRowsBy,
+        groupBy,
         groupIndexForColumn,
         groupCount: arr.length,
         groupRenderStrategy
@@ -3795,8 +3883,8 @@ function getColumnsWhenGrouping(params) {
     });
   } else if (groupRenderStrategy === "single-column") {
     const singleGroupColumn = getSingleGroupColumn({
-      groupCount: groupRowsBy.length,
-      groupRowsBy,
+      groupCount: groupBy.length,
+      groupBy,
       groupRenderStrategy
     }, toggleGroupRow, groupColumn);
     computedColumns.set(singleGroupColumn.id || "group-by", singleGroupColumn);
@@ -3821,7 +3909,8 @@ function useComputed() {
     columnPinning,
     columnSizing,
     columnTypes,
-    bodySize
+    bodySize,
+    showSeparatePivotColumnForSingleAggregation
   } = componentState;
   useState5(() => {
     componentState.onRowHeightCSSVarChange.onChange((rowHeight) => {
@@ -3835,7 +3924,9 @@ function useComputed() {
       }
     });
   });
-  useColumnAggregations();
+  useEffect10(() => {
+    dataSourceActions.showSeparatePivotColumnForSingleAggregation = showSeparatePivotColumnForSingleAggregation;
+  }, [showSeparatePivotColumnForSingleAggregation]);
   const { multiSort } = dataSourceState;
   useColumnGroups();
   useColumnsWhen();
@@ -3994,11 +4085,11 @@ function VerticalScrollbarPlaceholderFn(props) {
 var VerticalScrollbarPlaceholder = memo2(VerticalScrollbarPlaceholderFn);
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/header.css.ts
-var import_createRuntimeFn2 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
+var import_createRuntimeFn3 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
 var CellCls = "_1eexc2a5 _16lm1iwj _16lm1iw10 _16lm1iw11 _16lm1iw2 _16lm1iw19 _16lm1iw1a";
 var HeaderCellProxy = "_12zfob10";
-var HeaderCellRecipe = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_12zfob1c", variantClassNames: { dragging: { true: "_12zfob1d", false: "_12zfob1e" }, first: { true: "_12zfob1f", false: "_12zfob1g" }, last: { true: "_12zfob1h", false: "_12zfob1i" }, groupByField: { true: "_12zfob1j", false: "_12zfob1k" }, firstInCategory: { true: "_12zfob1l", false: "_12zfob1m" }, lastInCategory: { true: "_12zfob1n", false: "_12zfob1o" }, pinned: { start: "_12zfob1p", end: "_12zfob1q", false: "_12zfob1r" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_12zfob1s"], [{ pinned: "end", firstInCategory: true }, "_12zfob1t"], [{ pinned: false, lastInCategory: true }, "_12zfob1u"]] });
-var HeaderClsRecipe = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_12zfob12 _16lm1iw10", variantClassNames: { pinned: { start: "_12zfob13", end: "_12zfob14", false: "_12zfob15" }, virtualized: { true: "_12zfob16", false: "_12zfob17" }, overflow: { true: "_12zfob18", false: "_12zfob19" } }, defaultVariants: {}, compoundVariants: [[{ overflow: true, pinned: "start" }, "_12zfob1a"], [{ overflow: true, pinned: "end" }, "_12zfob1b"]] });
+var HeaderCellRecipe = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "_12zfob1c", variantClassNames: { dragging: { true: "_12zfob1d", false: "_12zfob1e" }, first: { true: "_12zfob1f", false: "_12zfob1g" }, last: { true: "_12zfob1h", false: "_12zfob1i" }, groupByField: { true: "_12zfob1j", false: "_12zfob1k" }, firstInCategory: { true: "_12zfob1l", false: "_12zfob1m" }, lastInCategory: { true: "_12zfob1n", false: "_12zfob1o" }, pinned: { start: "_12zfob1p", end: "_12zfob1q", false: "_12zfob1r" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_12zfob1s"], [{ pinned: "end", firstInCategory: true }, "_12zfob1t"], [{ pinned: false, lastInCategory: true }, "_12zfob1u"]] });
+var HeaderClsRecipe = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "_12zfob12 _16lm1iw10", variantClassNames: { pinned: { start: "_12zfob13", end: "_12zfob14", false: "_12zfob15" }, virtualized: { true: "_12zfob16", false: "_12zfob17" }, overflow: { true: "_12zfob18", false: "_12zfob19" } }, defaultVariants: {}, compoundVariants: [[{ overflow: true, pinned: "start" }, "_12zfob1a"], [{ overflow: true, pinned: "end" }, "_12zfob1b"]] });
 var HeaderGroupCls = "_16lm1iwz _16lm1iwj";
 var HeaderGroup_Children = "_16lm1iwj _16lm1iw10 _16lm1iw12 _16lm1iwc";
 var HeaderGroup_Header = "_12zfob1x _16lm1iwj _16lm1iw10 _16lm1iw11";
@@ -4026,18 +4117,18 @@ import {
 } from "react";
 
 // src/components/InfiniteTable/hooks/useInfiniteTableState.ts
-import { useContext as useContext5 } from "react";
+import { useContext as useContext4 } from "react";
 var useInfiniteTableState = () => {
   const TableContext2 = getInfiniteTableContext();
-  const { componentState } = useContext5(TableContext2);
+  const { componentState } = useContext4(TableContext2);
   return componentState;
 };
 
 // src/components/InfiniteTable/components/cell.css.ts
-var import_createRuntimeFn3 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
+var import_createRuntimeFn4 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
 var CellCls2 = "_1eexc2a5 _16lm1iwj _16lm1iw10 _16lm1iw11 _16lm1iw2 _16lm1iw19 _16lm1iw1a";
 var CellClsVariants = { shifting: "_1eexc2a3", dragging: "_1eexc2a4" };
-var ColumnCellRecipe = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "_16lm1iw2 _16lm1iwo _16lm1iw7 _16lm1iwr", variantClassNames: { dragging: { false: "_1eexc2a7" }, first: { true: "_1eexc2a8", false: "_1eexc2a9" }, last: { true: "_1eexc2aa", false: "_1eexc2ab" }, groupByField: { true: "_1eexc2ac", false: "_1eexc2ad" }, firstInCategory: { true: "_1eexc2ae", false: "_1eexc2af" }, lastInCategory: { true: "_1eexc2ag", false: "_1eexc2ah" }, pinned: { start: "_1eexc2ai", end: "_1eexc2aj", false: "_1eexc2ak" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_1eexc2al"], [{ pinned: "end", firstInCategory: true }, "_1eexc2am"]] });
+var ColumnCellRecipe = (0, import_createRuntimeFn4.createRuntimeFn)({ defaultClassName: "_16lm1iw2 _16lm1iwo _16lm1iw7 _16lm1iwr", variantClassNames: { dragging: { false: "_1eexc2a7" }, first: { true: "_1eexc2a8", false: "_1eexc2a9" }, last: { true: "_1eexc2aa", false: "_1eexc2ab" }, groupByField: { true: "_1eexc2ac", false: "_1eexc2ad" }, firstInCategory: { true: "_1eexc2ae", false: "_1eexc2af" }, lastInCategory: { true: "_1eexc2ag", false: "_1eexc2ah" }, pinned: { start: "_1eexc2ai", end: "_1eexc2aj", false: "_1eexc2ak" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_1eexc2al"], [{ pinned: "end", firstInCategory: true }, "_1eexc2am"]] });
 var columnAlignCellStyle = { center: "_1eexc2a0", start: "_1eexc2a1", end: "_1eexc2a2" };
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableCell.tsx
@@ -5359,7 +5450,7 @@ import {
 import { useRef as useRef12, useEffect as useEffect17, useState as useState9 } from "react";
 
 // src/components/VirtualList/VirtualList.css.ts
-var VirtualListCls = "mlx2t0 _16lm1iw0";
+var VirtualListCls = "_16lm1iw1 _16lm1iw8 _16lm1iw0";
 var VirtualListClsOrientation = { horizontal: "mlx2t1", vertical: "mlx2t2" };
 var scrollTransformTargetCls = "mlx2t3";
 
@@ -5513,32 +5604,38 @@ function InfiniteTableColumnCellFn(props) {
   const groupRowInfo = null;
   let value = isGroupRow && groupBy && column.groupByField ? rowInfo.value : isColumnWithField(column) ? data == null ? void 0 : data[column.field] : null;
   if (column.valueGetter) {
-    value = column.valueGetter({
-      data,
-      rowInfo,
-      groupRowInfo
+    value = column.valueGetter(isGroupRow ? {
+      data: rowInfo.data,
+      rowInfo
+    } : {
+      data: rowInfo.data,
+      rowInfo
     });
   }
   const { componentState: computedDataSource } = useDataSourceContextValue();
-  const stylingRenderParam = {
-    value,
-    column,
+  const rest = rowInfo.isGroupRow ? {
+    rowInfo,
+    data: rowInfo.data
+  } : {
     rowInfo,
-    data
+    data: rowInfo.data
   };
+  const stylingRenderParam = __spreadValues({
+    value,
+    column
+  }, rest);
   let renderValue = value;
   if (column.render || column.renderValue) {
-    const renderParam = {
+    const renderParam = __spreadProps(__spreadValues({
       value,
       column,
-      rowInfo,
-      groupRowInfo,
-      data,
+      groupRowInfo
+    }, rest), {
       rowIndex,
       toggleGroupRow,
       toggleCurrentGroupRow: () => toggleGroupRow(rowInfo.groupKeys),
-      groupRowsBy: computedDataSource.groupRowsBy
-    };
+      groupBy: computedDataSource.groupBy
+    });
     if (column.render) {
       renderValue = column.render(renderParam);
     } else if (column.renderValue) {
@@ -5620,12 +5717,11 @@ function useRowDOMProps(props, rowProps, rowStyle, rowClassName, groupRenderStra
     domRefFromProps(node);
     domRef.current = node;
   }, []);
-  const rowPropsAndStyleArgs = {
-    data: rowInfo.data,
-    rowInfo,
+  const rest = rowInfo.isGroupRow ? { data: rowInfo.data, rowInfo } : { data: rowInfo.data, rowInfo };
+  const rowPropsAndStyleArgs = __spreadProps(__spreadValues({}, rest), {
     rowIndex,
-    groupRowsBy: rowInfo.groupBy
-  };
+    groupBy: rowInfo.groupBy
+  });
   if (typeof rowProps === "function") {
     rowProps = rowProps(rowPropsAndStyleArgs);
   }
@@ -5894,14 +5990,14 @@ function useUnpinnedRendering(params) {
 import { useCallback as useCallback13, useEffect as useEffect18, useRef as useRef15 } from "react";
 
 // src/components/InfiniteTable/InfiniteCls.css.ts
-var import_createRuntimeFn4 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
+var import_createRuntimeFn5 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
 var FooterCls = "_16lm1iw1";
 var InfiniteCls = "_1yeub2v0 _16lm1iw1 _16lm1iwj _16lm1iwz _16lm1iw0";
-var InfiniteClsRecipe = (0, import_createRuntimeFn4.createRuntimeFn)({ defaultClassName: "", variantClassNames: { focused: { true: "_1yeub2v2", false: "_1yeub2v3" }, focusedWithin: { true: "_1yeub2v4", false: "_1yeub2v5" }, hasPinnedStart: { true: "_1yeub2v6", false: "_1yeub2v7" }, hasPinnedEnd: { true: "_1yeub2v8", false: "_1yeub2v9" }, hasPinnedStartOverflow: { true: "_1yeub2va", false: "_1yeub2vb" }, hasPinnedEndOverflow: { true: "_1yeub2vc", false: "_1yeub2vd" } }, defaultVariants: {}, compoundVariants: [] });
+var InfiniteClsRecipe = (0, import_createRuntimeFn5.createRuntimeFn)({ defaultClassName: "", variantClassNames: { focused: { true: "_1yeub2v2", false: "_1yeub2v3" }, focusedWithin: { true: "_1yeub2v4", false: "_1yeub2v5" }, hasPinnedStart: { true: "_1yeub2v6", false: "_1yeub2v7" }, hasPinnedEnd: { true: "_1yeub2v8", false: "_1yeub2v9" }, hasPinnedStartOverflow: { true: "_1yeub2va", false: "_1yeub2vb" }, hasPinnedEndOverflow: { true: "_1yeub2vc", false: "_1yeub2vd" } }, defaultVariants: {}, compoundVariants: [] });
 var InfiniteClsScrolling = "_1yeub2v1";
 var InfiniteClsShiftingColumns = "_16lm1iwm";
 var PinnedRowsClsVariants = { pinnedStart: "_1yeub2ve", pinnedEnd: "_1yeub2vf", overflow: "_1yeub2vg" };
-var PinnedRowsContainerClsVariants = (0, import_createRuntimeFn4.createRuntimeFn)({ defaultClassName: "", variantClassNames: { pinned: { start: "_1yeub2vh", end: "_1yeub2vi", false: "_1yeub2vj" } }, defaultVariants: {}, compoundVariants: [] });
+var PinnedRowsContainerClsVariants = (0, import_createRuntimeFn5.createRuntimeFn)({ defaultClassName: "", variantClassNames: { pinned: { start: "_1yeub2vh", end: "_1yeub2vi", false: "_1yeub2vj" } }, defaultVariants: {}, compoundVariants: [] });
 
 // src/components/InfiniteTable/hooks/useOnContainerScroll.ts
 var DELAY = 200;
@@ -6866,7 +6962,6 @@ function useListRendering(param) {
         setColumnVisibility: (columnVisibility) => {
           componentActions.columnVisibility = columnVisibility;
         },
-        setColumnAggregations: (columnAggregations) => componentActions.columnAggregations = columnAggregations,
         getState,
         getDataSourceState
       };
@@ -7173,7 +7268,7 @@ var useLicense = (licenseKey = "") => {
   const valid = useMemo11(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.0.10"
+      version: "0.1.0"
     });
     if (!licenseKey && !valid2 && isInsideSandbox) {
       return true;