@infinite-table/infinite-react 0.2.4 → 0.2.8

package/index.d.ts

@@ -611,10 +611,9 @@ declare module "components/InfiniteTable/types/InfiniteTableColumn" {
         groupIcon: Renderable;
     };
     export type InfiniteTableColumnRenderValueParam<DATA_TYPE, COL_TYPE = InfiniteTableComputedColumn<DATA_TYPE>> = InfiniteTableColumnRenderParam<DATA_TYPE, COL_TYPE>;
-    export type InfiniteTableColumnRowspanFnParams<DATA_TYPE, COL_TYPE = InfiniteTableComputedColumn<DATA_TYPE>> = {
+    export type InfiniteTableColumnRowspanParam<DATA_TYPE, COL_TYPE = InfiniteTableComputedColumn<DATA_TYPE>> = {
         rowInfo: InfiniteTableRowInfo<DATA_TYPE>;
         data: DATA_TYPE | Partial<DATA_TYPE> | null;
-        groupRowInfo: InfiniteTableRowInfo<DATA_TYPE> | null;
         dataArray: InfiniteTableRowInfo<DATA_TYPE>[];
         rowIndex: number;
         column: COL_TYPE;
@@ -668,14 +667,16 @@ declare module "components/InfiniteTable/types/InfiniteTableColumn" {
         rowInfo: InfiniteTableRowInfoGroup<T>;
     };
     export type InfiniteTableColumnValueGetter<T, VALUE_GETTER_TYPE = Renderable> = (params: InfiniteTableColumnValueGetterParams<T>) => VALUE_GETTER_TYPE;
-    export type InfiniteTableColumnRowspanFn<T> = (params: InfiniteTableColumnRowspanFnParams<T>) => number;
+    export type InfiniteTableColumnRowspanFn<T> = (params: InfiniteTableColumnRowspanParam<T>) => number;
     export type InfiniteTableColumnComparer<T> = (a: T, b: T) => number;
     export type InfiniteTableBaseColumn<T> = {
         sortable?: boolean;
         draggable?: boolean;
         resizable?: boolean;
         comparer?: InfiniteTableColumnComparer<T>;
-        hiddenWhenGrouped?: boolean;
+        defaultHiddenWhenGroupedBy?: '*' | keyof T | {
+            [k in keyof Partial<T>]: true;
+        };
         align?: InfiniteTableColumnAlign;
         verticalAlign?: InfiniteTableColumnVerticalAlign;
         columnGroup?: string;
@@ -837,6 +838,7 @@ declare module "utils/groupAndPivot/index" {
         collapsedGroupsCount?: number;
         groupNesting?: number;
         groupKeys?: any[];
+        flatRowInfoList?: (InfiniteTableRowInfo<T> | InfiniteTableEnhancedGroupInfo<T>)[];
         parents?: InfiniteTableEnhancedGroupInfo<T>[];
         indexInParentGroups?: number[];
         indexInGroup: number;
@@ -850,6 +852,7 @@ declare module "utils/groupAndPivot/index" {
     export type InfiniteTableEnhancedGroupInfo<T> = InfiniteTableRowInfo<T> & {
         data: Partial<T> | null;
         groupData: T[];
+        flatRowInfoList: (InfiniteTableRowInfo<T> | InfiniteTableEnhancedGroupInfo<T>)[];
         value: any;
         isGroupRow: true;
         collapsedChildrenCount: number;
@@ -1136,6 +1139,7 @@ declare module "components/InfiniteTable/types/InfiniteTableProps" {
         defaultWidth?: number;
         defaultFlex?: number;
         defaultPinned?: InfiniteTableColumnPinnedValues;
+        defaultHiddenWhenGroupedBy?: InfiniteTableColumn<T>['defaultHiddenWhenGroupedBy'];
         header?: InfiniteTableColumn<T>['header'];
         comparer?: InfiniteTableColumn<T>['comparer'];
         draggable?: InfiniteTableColumn<T>['draggable'];
@@ -1418,6 +1422,7 @@ declare module "components/InfiniteTable/types/InfiniteTableState" {
         computedColumnGroups: InfiniteTablePropColumnGroupsMap;
         rowHeightCSSVar: string;
         headerHeightCSSVar: string;
+        controlledColumnVisibility: boolean;
     }
     export type InfiniteTableActions<T> = ComponentStateActions<InfiniteTableState<T>>;
     export interface InfiniteTableState<T> extends InfiniteTableMappedState<T>, InfiniteTableDerivedState<T>, InfiniteTableSetupState<T> {
@@ -1444,9 +1449,11 @@ declare module "components/InfiniteTable/types/InfiniteTableAction" {
     };
 }
 declare module "components/InfiniteTable/types/InfiniteTableComputedValues" {
+    import type { VirtualBrainOptions } from "components/VirtualBrain/index";
     import type { InfiniteTableComputedColumn } from "components/InfiniteTable/types/InfiniteTableColumn";
     import type { InfiniteTablePropColumnOrderNormalized, InfiniteTablePropColumnVisibility } from "components/InfiniteTable/types/InfiniteTableProps";
     export interface InfiniteTableComputedValues<T> {
+        rowSpan?: VirtualBrainOptions['itemSpan'];
         computedPinnedStartOverflow: boolean;
         computedPinnedEndOverflow: boolean;
         computedPinnedStartColumns: InfiniteTableComputedColumn<T>[];
@@ -1485,11 +1492,11 @@ declare module "components/InfiniteTable/types/index" {
     import type { InfiniteTableAction } from "components/InfiniteTable/types/InfiniteTableAction";
     import type { InfiniteTableActionType } from "components/InfiniteTable/types/InfiniteTableActionType";
     import type { InfiniteTableProps, InfiniteTableImperativeApi, InfiniteTablePropColumnOrder, InfiniteTablePropColumnVisibility, InfiniteTablePropColumnPinning, InfiniteTableColumnAggregator, InfiniteTableColumnGroup, InfiniteTablePropGroupRenderStrategy, InfiniteTablePropColumnGroups, InfiniteTablePropRowStyle, InfiniteTableRowStyleFn, InfiniteTableRowClassNameFn, InfiniteTablePropRowClassName, InfiniteTablePropColumns, InfiniteTablePropColumnsMap, InfiniteTablePropComponents, InfiniteTableGroupColumnFunction, InfiniteTableGroupColumnGetterOptions, InfiniteTablePropColumnSizingMap, InfiniteTablePropColumnSizing, InfiniteTablePropColumnTypes, InfiniteTablePropColumnTypesMap, InfiniteTableColumnSizingOptions, Scrollbars, InfiniteTableGroupColumnBase, InfiniteTablePropGroupColumn } from "components/InfiniteTable/types/InfiniteTableProps";
-    import type { InfiniteTableColumn, InfiniteTableColumnComparer, InfiniteTableComputedColumn, InfiniteTableColumnRenderParam, InfiniteTableColumnRenderValueParam } from "components/InfiniteTable/types/InfiniteTableColumn";
+    import type { InfiniteTableColumn, InfiniteTableColumnComparer, InfiniteTableComputedColumn, InfiniteTableColumnRenderParam, InfiniteTableColumnRenderValueParam, InfiniteTableColumnRowspanParam } from "components/InfiniteTable/types/InfiniteTableColumn";
     import type { InfiniteTableComputedValues } from "components/InfiniteTable/types/InfiniteTableComputedValues";
     import type { InfiniteTableContextValue } from "components/InfiniteTable/types/InfiniteTableContextValue";
     import type { InfiniteTableRowInfo } from "utils/groupAndPivot/index";
-    export type { Scrollbars, InfiniteTableColumnAggregator, InfiniteTableComputedValues, InfiniteTablePropColumns, InfiniteTablePropGroupColumn, InfiniteTablePropColumnsMap, InfiniteTableRowInfo, InfiniteTableGroupColumnFunction, InfiniteTableGroupColumnBase, InfiniteTablePropColumnOrder, InfiniteTablePropComponents, InfiniteTablePropColumnVisibility as InfiniteTablePropColumnVisibility, InfiniteTablePropColumnPinning, InfiniteTableColumnGroup, InfiniteTableColumn, InfiniteTableColumnComparer, InfiniteTableComputedColumn, InfiniteTableColumnRenderParam, InfiniteTableColumnRenderValueParam, InfiniteTableContextValue, InfiniteTablePropGroupRenderStrategy, InfiniteTablePropColumnGroups, InfiniteTablePropColumnSizing, InfiniteTablePropColumnSizingMap, InfiniteTableColumnSizingOptions, InfiniteTableState, InfiniteTableAction, InfiniteTableProps, InfiniteTablePropColumnTypes, InfiniteTablePropColumnTypesMap, InfiniteTableImperativeApi, InfiniteTableActionType, InfiniteTablePropRowStyle, InfiniteTablePropRowClassName, InfiniteTableRowStyleFn, InfiniteTableRowClassNameFn, InfiniteTableGroupColumnGetterOptions, };
+    export type { Scrollbars, InfiniteTableColumnAggregator, InfiniteTableComputedValues, InfiniteTableColumnRowspanParam, InfiniteTablePropColumns, InfiniteTablePropGroupColumn, InfiniteTablePropColumnsMap, InfiniteTableRowInfo, InfiniteTableGroupColumnFunction, InfiniteTableGroupColumnBase, InfiniteTablePropColumnOrder, InfiniteTablePropComponents, InfiniteTablePropColumnVisibility as InfiniteTablePropColumnVisibility, InfiniteTablePropColumnPinning, InfiniteTableColumnGroup, InfiniteTableColumn, InfiniteTableColumnComparer, InfiniteTableComputedColumn, InfiniteTableColumnRenderParam, InfiniteTableColumnRenderValueParam, InfiniteTableContextValue, InfiniteTablePropGroupRenderStrategy, InfiniteTablePropColumnGroups, InfiniteTablePropColumnSizing, InfiniteTablePropColumnSizingMap, InfiniteTableColumnSizingOptions, InfiniteTableState, InfiniteTableAction, InfiniteTableProps, InfiniteTablePropColumnTypes, InfiniteTablePropColumnTypesMap, InfiniteTableImperativeApi, InfiniteTableActionType, InfiniteTablePropRowStyle, InfiniteTablePropRowClassName, InfiniteTableRowStyleFn, InfiniteTableRowClassNameFn, InfiniteTableGroupColumnGetterOptions, };
 }
 declare module "components/InfiniteTable/InfiniteTableContext" {
     import { InfiniteTableContextValue } from "components/InfiniteTable/types/InfiniteTableContextValue";
@@ -1666,7 +1673,6 @@ declare module "components/InfiniteTable/utils/getComputedVisibleColumns" {
             index: number;
         };
     };
-    export const IS_GROUP_COLUMN_ID: (columnId: string) => boolean;
     export type GetComputedVisibleColumnsResult<T> = {
         computedRemainingSpace: number;
         computedPinnedStartColumnsWidth: number;
@@ -2529,7 +2535,7 @@ declare module "components/VirtualList/VirtualRowList" {
     export const VirtualRowList: (props: VirtualRowListProps & HTMLProps<HTMLDivElement>) => JSX.Element;
 }
 declare module "components/InfiniteTable/components/InfiniteTableRow/InfiniteTableRowTypes" {
-    import type { VirtualBrain } from "components/VirtualBrain/index";
+    import type { VirtualBrain, VirtualBrainOptions } from "components/VirtualBrain/index";
     import type { ScrollPosition } from "components/types/ScrollPosition";
     import type { InfiniteTableComputedColumn, InfiniteTableRowInfo } from "components/InfiniteTable/types/index";
     import { InfiniteTableToggleGroupRowFn } from "components/InfiniteTable/types/InfiniteTableColumn";
@@ -2544,6 +2550,7 @@ declare module "components/InfiniteTable/components/InfiniteTableRow/InfiniteTab
         getData: () => InfiniteTableRowInfo<T>[];
         toggleGroupRow: InfiniteTableToggleGroupRowFn;
         repaintId?: number | string;
+        rowSpan?: VirtualBrainOptions['itemSpan'];
         virtualizeColumns: boolean;
         showZebraRows?: boolean;
         showHoverRows?: boolean;
@@ -2603,7 +2610,7 @@ declare module "components/InfiniteTable/components/InfiniteTableRow/InfiniteTab
     export const TableRowUnvirtualized: typeof TableRowUnvirtualizedFn;
 }
 declare module "components/InfiniteTable/hooks/useUnpinnedRendering" {
-    import type { VirtualBrain } from "components/VirtualBrain/index";
+    import type { VirtualBrain, VirtualBrainOptions } from "components/VirtualBrain/index";
     import type { Size } from "components/types/Size";
     import type { InfiniteTableComputedColumn, InfiniteTableRowInfo } from "components/InfiniteTable/types/index";
     import { InfiniteTableState } from "components/InfiniteTable/types/InfiniteTableState";
@@ -2625,6 +2632,7 @@ declare module "components/InfiniteTable/hooks/useUnpinnedRendering" {
         computedUnpinnedColumnsWidth: number;
         computedPinnedStartWidth: number;
         computedPinnedEndWidth: number;
+        rowSpan?: VirtualBrainOptions['itemSpan'];
         getState: () => InfiniteTableState<T>;
     };
     export function useUnpinnedRendering<T>(params: UnpinnedRenderingParams<T>): JSX.Element | null;
@@ -2672,7 +2680,7 @@ declare module "components/VirtualList/RowListWithExternalScrolling" {
     export const RowListWithExternalScrolling: (props: RowListWithExternalScrollingListProps) => JSX.Element;
 }
 declare module "components/InfiniteTable/hooks/usePinnedRendering" {
-    import { VirtualBrain } from "components/VirtualBrain/index";
+    import { VirtualBrain, VirtualBrainOptions } from "components/VirtualBrain/index";
     import type { InfiniteTableComputedColumn, InfiniteTableRowInfo, Scrollbars } from "components/InfiniteTable/types/index";
     import type { Size } from "components/types/Size";
     import type { RenderRow } from "components/VirtualList/types";
@@ -2698,6 +2706,7 @@ declare module "components/InfiniteTable/hooks/usePinnedRendering" {
         toggleGroupRow: InfiniteTableToggleGroupRowFn;
         computedPinnedStartColumnsWidth: number;
         computedPinnedStartColumns: InfiniteTableComputedColumn<T>[];
+        rowSpan?: VirtualBrainOptions['itemSpan'];
     };
     export function usePinnedRenderingForSide<T>(side: 'start' | 'end', params: UsePinnedParams<T>): {
         renderRowPinned: RenderRow;

package/index.esm.js

@@ -856,6 +856,7 @@ var mapPropsToState = (params) => {
   });
   const computedColumns = state.columnsWhenGrouping || state.columnsWhenInlineGroupRenderStrategy || state.columns;
   return {
+    controlledColumnVisibility: !!props.columnVisibility,
     groupRenderStrategy,
     groupBy,
     computedColumns,
@@ -1389,6 +1390,7 @@ var getComputedVisibleColumns = ({
     const result2 = __spreadProps(__spreadValues({
       align: colType.align,
       verticalAlign: colType.verticalAlign,
+      defaultHiddenWhenGroupedBy: colType.defaultHiddenWhenGroupedBy,
       valueGetter: colType.valueGetter,
       renderValue: colType.renderValue,
       render: colType.render
@@ -1647,7 +1649,7 @@ var useComputedVisibleColumns = ({
 var sortAscending = (a, b) => a - b;
 
 // src/components/InfiniteTable/hooks/useComputed.ts
-import { useCallback as useCallback5, useEffect as useEffect10, useState as useState5 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect10, useMemo as useMemo6, useState as useState5 } from "react";
 
 // src/components/hooks/useComponentState.tsx
 import {
@@ -2855,6 +2857,7 @@ function getEnhancedGroupData(options, deepMapValue) {
     id: `${groupKeys}`,
     collapsed,
     parents,
+    flatRowInfoList: [],
     collapsedChildrenCount: 0,
     collapsedGroupsCount: 0,
     indexInParentGroups: options.indexInParentGroups,
@@ -2917,9 +2920,14 @@ function enhancedFlatten(param) {
     }
     if (collapsed) {
       parents.forEach((parent) => {
+        parent.flatRowInfoList.push(enhancedGroupData);
         parent.collapsedChildrenCount += enhancedGroupData.groupCount;
         parent.collapsedGroupsCount += 1;
       });
+    } else {
+      parents.forEach((parent) => {
+        parent.flatRowInfoList.push(enhancedGroupData);
+      });
     }
     indexInParentGroups.push(indexInGroup);
     parents.push(enhancedGroupData);
@@ -2928,7 +2936,7 @@ function enhancedFlatten(param) {
         if (!pivot) {
           const startIndex = result.length;
           result.push(...items.map((item, index) => {
-            return {
+            const rowInfo = {
               id: item ? toPrimaryKey(item) : `${groupKeys}-${index}`,
               data: item,
               isGroupRow: false,
@@ -2942,6 +2950,10 @@ function enhancedFlatten(param) {
               groupNesting,
               groupCount: enhancedGroupData.groupCount
             };
+            parents.forEach((parent) => {
+              parent.flatRowInfoList.push(rowInfo);
+            });
+            return rowInfo;
           }));
         }
       } else {
@@ -3971,7 +3983,7 @@ function concludeReducer(params) {
     state.groupDeepMap = void 0;
     state.pivotColumns = void 0;
     const arrayDifferentAfterSortStep = previousState.postSortDataArray != state.postSortDataArray;
-    if (arrayDifferentAfterSortStep) {
+    if (arrayDifferentAfterSortStep || groupsDepsChanged) {
       rowInfoDataArray = dataArray.map((data, index) => toRowInfo(data, data ? toPrimaryKey(data) : index, index));
     }
   }
@@ -4082,7 +4094,7 @@ function useColumnsWhen() {
   }, [pivotTotalColumnPosition]);
   useColumnsWhenInlineGroupRenderStrategy(groupByMap);
   const { toggleGroupRow } = useColumnsWhenGrouping();
-  useHideEmptyGroupColumns();
+  useHideColumns(groupByMap);
   return { toggleGroupRow };
 }
 function useColumnsWhenInlineGroupRenderStrategy(groupByMap) {
@@ -4204,9 +4216,10 @@ function useColumnsWhenGrouping() {
   ]);
   return { toggleGroupRow };
 }
-function useHideEmptyGroupColumns() {
+function useHideColumns(groupByMap) {
   const {
     componentState: {
+      dataArray,
       groupBy,
       groupRowsState,
       originalLazyGroupDataChangeDetect
@@ -4217,18 +4230,49 @@ function useHideEmptyGroupColumns() {
     getComponentState,
     componentActions,
     componentState: {
-      columnsWhenGrouping: generatedColumns,
+      columnTypes,
+      computedColumns,
       hideEmptyGroupColumns,
       groupRenderStrategy
     }
   } = useComponentState();
+  const prevHideEmptyGroupColumns = usePrevious(hideEmptyGroupColumns);
   useEffect9(() => {
     if (groupRenderStrategy !== "multi-column") {
       return;
     }
+    const currentState = getComponentState();
+    const computedGroupColumns = new Map();
+    computedColumns.forEach((column, colId) => {
+      if (typeof column.groupByField !== "string") {
+        return;
+      }
+      const { groupByField } = column;
+      const field = groupByField;
+      const groupInfoForColumn = groupByMap.get(field);
+      if (!groupInfoForColumn) {
+        return;
+      }
+      computedGroupColumns.set(colId, column);
+    });
+    if (!hideEmptyGroupColumns) {
+      if (prevHideEmptyGroupColumns) {
+        let updated2 = false;
+        const columnVisibility2 = __spreadValues({}, currentState.columnVisibility);
+        computedGroupColumns.forEach((_column, colId) => {
+          if (columnVisibility2[colId] === false) {
+            updated2 = true;
+            delete columnVisibility2[colId];
+          }
+        });
+        if (updated2) {
+          componentActions.columnVisibility = columnVisibility2;
+        }
+      }
+      return;
+    }
     const groupsLength = groupBy.length;
     let expandedGroupsLevel = 0;
-    const { dataArray } = getDataSourceState();
     const len = dataArray.length;
     for (let i = 0; i < len; i++) {
       const data = dataArray[i];
@@ -4237,23 +4281,24 @@ function useHideEmptyGroupColumns() {
         break;
       }
     }
-    const currentState = getComponentState();
-    const { computedColumns } = currentState;
     let updated = false;
     const columnVisibility = __spreadValues({}, currentState.columnVisibility);
-    const cols = computedColumns;
-    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;
-      }
+    computedGroupColumns.forEach((column, colId) => {
+      const { groupByField } = column;
+      const field = groupByField;
+      const groupInfoForColumn = groupByMap.get(field);
+      const index = groupInfoForColumn.groupIndex;
       const shouldBeHidden = index > expandedGroupsLevel && hideEmptyGroupColumns;
-      updated = true;
       if (shouldBeHidden) {
-        columnVisibility[colId] = false;
+        if (columnVisibility[colId] !== false) {
+          updated = true;
+          columnVisibility[colId] = false;
+        }
       } else {
-        delete columnVisibility[colId];
+        if (columnVisibility.hasOwnProperty(colId)) {
+          updated = true;
+          delete columnVisibility[colId];
+        }
       }
     });
     if (updated) {
@@ -4262,12 +4307,41 @@ function useHideEmptyGroupColumns() {
   }, [
     getDataSourceState,
     groupRenderStrategy,
-    generatedColumns,
     originalLazyGroupDataChangeDetect,
     groupBy,
+    groupByMap,
+    computedColumns,
+    hideEmptyGroupColumns ? dataArray : null,
     hideEmptyGroupColumns ? groupRowsState : null,
     hideEmptyGroupColumns
   ]);
+  useEffect9(() => {
+    const isGrouped = groupBy.length > 0;
+    const currentState = getComponentState();
+    const { controlledColumnVisibility, columnVisibility } = currentState;
+    if (controlledColumnVisibility) {
+      return;
+    }
+    const newColumnVisibility = __spreadValues({}, columnVisibility);
+    let updated = false;
+    computedColumns.forEach((col, id) => {
+      if (col.defaultHiddenWhenGroupedBy) {
+        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);
+        if (nowHidden !== shouldBeHidden) {
+          updated = true;
+          if (shouldBeHidden) {
+            newColumnVisibility[id] = false;
+          } else {
+            delete newColumnVisibility[id];
+          }
+        }
+      }
+    });
+    if (updated) {
+      componentActions.columnVisibility = newColumnVisibility;
+    }
+  }, [computedColumns, columnTypes, groupBy, groupByMap]);
 }
 function getColumnsWhenGrouping(params) {
   const {
@@ -4416,6 +4490,31 @@ function useComputed() {
     columnSizing,
     columnTypes
   });
+  const rowSpan = useMemo6(() => {
+    const colsWithRowspan = computedVisibleColumns.filter((col) => typeof col.rowspan === "function");
+    return colsWithRowspan.length ? ({ itemIndex }) => {
+      let maxSpan = 1;
+      const dataArray = getDataSourceState().dataArray;
+      const rowInfo = dataArray[itemIndex];
+      const data = rowInfo.data;
+      colsWithRowspan.forEach((column) => {
+        if (!column.rowspan) {
+          return;
+        }
+        const span = column.rowspan({
+          column,
+          data,
+          dataArray,
+          rowInfo,
+          rowIndex: itemIndex
+        });
+        if (span > maxSpan) {
+          maxSpan = span;
+        }
+      });
+      return maxSpan;
+    } : void 0;
+  }, [computedVisibleColumns]);
   const unpinnedColumnWidths = computedUnpinnedColumns.map((c) => c.computedWidth);
   let sortedUnpinnedColumnWidths = [...unpinnedColumnWidths].sort(sortAscending);
   let unpinnedColumnRenderCount = 0;
@@ -4442,6 +4541,7 @@ function useComputed() {
   const computedPinnedStartOverflow = computedPinnedStartWidth ? computedPinnedStartColumnsWidth > computedPinnedStartWidth : false;
   const computedPinnedEndOverflow = computedPinnedEndWidth ? computedPinnedEndColumnsWidth > computedPinnedEndWidth : false;
   return {
+    rowSpan,
     toggleGroupRow,
     computedPinnedStartOverflow,
     computedPinnedEndOverflow,
@@ -4633,7 +4733,7 @@ var InfiniteTableCell = memo3(InfiniteTableCellFn);
 var import_binary_search = __toModule(require_binary_search());
 import {
   useCallback as useCallback6,
-  useMemo as useMemo6,
+  useMemo as useMemo7,
   useRef as useRef7,
   useState as useState6
 } from "react";
@@ -4680,8 +4780,8 @@ var useColumnPointerEvents = ({
   const dragging = draggingDiff != null;
   const { componentActions, computed } = useInfiniteTable();
   const { computedColumnOrder } = computed;
-  const column = useMemo6(() => columns.get(columnId), [columnId, columns]);
-  const { columnIndex, columnWidth, columnsArray } = useMemo6(() => {
+  const column = useMemo7(() => columns.get(columnId), [columnId, columns]);
+  const { columnIndex, columnWidth, columnsArray } = useMemo7(() => {
     const columnsArray2 = Array.from(columns.values());
     return {
       columnsArray: columnsArray2,
@@ -5018,7 +5118,7 @@ function AvoidReactDiffFn(props) {
 var AvoidReactDiff = memo4(AvoidReactDiffFn);
 
 // src/components/RawList/useVirtualRenderer.ts
-import { useMemo as useMemo7 } from "react";
+import { useMemo as useMemo8 } from "react";
 
 // src/components/RawList/ReactVirtualRenderer.tsx
 import {
@@ -5334,7 +5434,7 @@ function createRenderer(brain) {
 function useVirtualRenderer({
   brain
 }) {
-  return useMemo7(() => {
+  return useMemo8(() => {
     return createRenderer(brain);
   }, [brain]);
 }
@@ -5426,7 +5526,7 @@ var InfiniteTableHeader = memo6(InfiniteTableHeaderFn);
 import {
   createElement as createElement17,
   memo as memo7,
-  useMemo as useMemo8,
+  useMemo as useMemo9,
   useRef as useRef10
 } from "react";
 
@@ -5640,7 +5740,7 @@ function InfiniteTableHeaderUnvirtualizedFn(props) {
   } = useInfiniteTable();
   const domRef = useRef10(null);
   const hasColumnGroups = computedColumnGroups.size > 0;
-  const columnHeaderGroups = useMemo8(() => {
+  const columnHeaderGroups = useMemo9(() => {
     return hasColumnGroups ? renderColumnHeaderGroups({
       columnGroups: computedColumnGroups,
       columnGroupsDepthsMap,
@@ -5877,7 +5977,7 @@ function SpacePlaceholderFn(props) {
 var SpacePlaceholder = memo8(SpacePlaceholderFn);
 
 // src/components/InfiniteTable/hooks/useListRendering.tsx
-import { useEffect as useEffect22, useMemo as useMemo11, useRef as useRef17 } from "react";
+import { useEffect as useEffect22, useMemo as useMemo12, useRef as useRef17 } from "react";
 
 // src/components/InfiniteTable/hooks/useUnpinnedRendering.tsx
 import {
@@ -6109,7 +6209,6 @@ function InfiniteTableColumnCellFn(props) {
       dataArray: getData(),
       column,
       rowInfo,
-      groupRowInfo,
       rowIndex,
       data: rowInfo.data
     });
@@ -6160,7 +6259,8 @@ function useRowDOMProps(props, rowProps, rowStyle, rowClassName, groupRenderStra
     showHoverRows = false,
     rowIndex,
     domRef: domRefFromProps,
-    rowInfo
+    rowInfo,
+    rowSpan
   } = props;
   const domRef = useRef13(null);
   const rowDOMRef = useCallback10((node) => {
@@ -6180,7 +6280,7 @@ function useRowDOMProps(props, rowProps, rowStyle, rowClassName, groupRenderStra
   if (rowStyle) {
     style = typeof rowStyle === "function" ? __spreadValues(__spreadValues({}, style), rowStyle(rowPropsAndStyleArgs)) : __spreadValues(__spreadValues({}, style), rowStyle);
   }
-  if (inlineGroupRoot) {
+  if (inlineGroupRoot || rowSpan) {
     style = style || {};
     style.zIndex = 2e6 - rowInfo.indexInAll;
   }
@@ -6367,6 +6467,7 @@ function useUnpinnedRendering(params) {
     computedPinnedStartWidth,
     computedPinnedEndWidth,
     computedUnpinnedColumns,
+    rowSpan,
     getState
   } = params;
   const { virtualizeColumns } = getState();
@@ -6380,6 +6481,7 @@ function useUnpinnedRendering(params) {
       showZebraRows,
       showHoverRows,
       getData,
+      rowSpan,
       toggleGroupRow,
       virtualizeColumns: shouldVirtualizeColumns,
       brain: null,
@@ -6396,6 +6498,7 @@ function useUnpinnedRendering(params) {
   }, [
     repaintId,
     rowHeight,
+    rowSpan,
     computedUnpinnedColumns,
     computedUnpinnedColumnsWidth,
     shouldVirtualizeColumns,
@@ -6561,7 +6664,7 @@ var useOnContainerScroll = ({
 // src/components/InfiniteTable/hooks/usePinnedRendering.tsx
 import {
   createElement as createElement28,
-  useMemo as useMemo9
+  useMemo as useMemo10
 } from "react";
 import { useCallback as useCallback15 } from "react";
 
@@ -6667,7 +6770,7 @@ function PinnedRowsContainer(props) {
     brain,
     renderRow
   } = props;
-  const style = useMemo9(() => {
+  const style = useMemo10(() => {
     const result = pinning === "end" ? {
       width: rowWidth,
       height,
@@ -6723,7 +6826,7 @@ function PinnedRowsContainer(props) {
   return /* @__PURE__ */ createElement28(RowListWithExternalScrolling, __spreadValues({}, rowListProps));
 }
 function useRenderPinnedRow(params) {
-  const { getData, getState, columnsWidth, columns, verticalBrain } = params;
+  const { getData, getState, columnsWidth, columns, rowSpan, verticalBrain } = params;
   const renderPinnedRow = useCallback15((rowParams) => {
     const dataArray = getData();
     const rowInfo = dataArray[rowParams.rowIndex];
@@ -6737,6 +6840,7 @@ function useRenderPinnedRow(params) {
       virtualizeColumns: false,
       verticalBrain,
       brain: null,
+      rowSpan,
       rowWidth: columnsWidth,
       columns
     }, rowParams);
@@ -6761,6 +6865,7 @@ function usePinnedRenderingForSide(side, params) {
     computedPinnedStartOverflow,
     pinnedStartScrollListener,
     pinnedEndScrollListener,
+    rowSpan,
     repaintId,
     toggleGroupRow,
     scrollbars: {
@@ -6779,6 +6884,7 @@ function usePinnedRenderingForSide(side, params) {
     getData,
     getState,
     toggleGroupRow,
+    rowSpan,
     verticalBrain: verticalVirtualBrain,
     columns,
     columnsWidth
@@ -6841,9 +6947,9 @@ function usePinnedStartRendering(params) {
 import { useEffect as useEffect21 } from "react";
 
 // src/components/hooks/useOnce.ts
-import { useMemo as useMemo10 } from "react";
+import { useMemo as useMemo11 } from "react";
 function useOnce(fn) {
-  const onceFn = useMemo10(() => {
+  const onceFn = useMemo11(() => {
     return once(fn);
   }, []);
   return onceFn();
@@ -7142,7 +7248,7 @@ var VirtualBrain = class extends Logger {
         this.computeCacheFor(lastSizeIndex);
         _prev = lastOffset;
         lastOffset = this.itemOffsetCache[lastSizeIndex];
-        if (_prev === lastOffset) {
+        if (_prev === lastOffset && _prev != 0) {
           return count - 1;
         }
       }
@@ -7334,6 +7440,10 @@ function useYourBrain(param) {
   }, []);
   horizontalVirtualBrain.update(computedUnpinnedColumns.length, columnSize);
   verticalVirtualBrain.update(dataArray.length, rowHeight, rowSpan);
+  if (true) {
+    globalThis.verticalVirtualBrain = verticalVirtualBrain;
+    globalThis.horizontalVirtualBrain = horizontalVirtualBrain;
+  }
   useEffect21(() => {
     verticalVirtualBrain.setAvailableSize({
       height: bodySize.height,
@@ -7365,7 +7475,7 @@ function useListRendering(param) {
     computedUnpinnedColumnsWidth,
     computedPinnedStartOverflow,
     computedPinnedEndOverflow,
-    computedVisibleColumns,
+    rowSpan,
     toggleGroupRow
   } = computed;
   const { componentState: dataSourceState, getState: getDataSourceState } = useDataSourceContextValue();
@@ -7384,32 +7494,6 @@ function useListRendering(param) {
     repaintIdRef.current++;
   }
   const repaintId = repaintIdRef.current;
-  const rowSpan = useMemo11(() => {
-    const colsWithRowspan = computedVisibleColumns.filter((col) => typeof col.rowspan === "function");
-    return colsWithRowspan.length ? ({ itemIndex }) => {
-      let maxSpan = 1;
-      const dataArray2 = getData();
-      const rowInfo = dataArray2[itemIndex];
-      const data = rowInfo.data;
-      colsWithRowspan.forEach((column) => {
-        if (!column.rowspan) {
-          return;
-        }
-        const span = column.rowspan({
-          column,
-          data,
-          dataArray: dataArray2,
-          groupRowInfo: null,
-          rowInfo,
-          rowIndex: itemIndex
-        });
-        if (span > maxSpan) {
-          maxSpan = span;
-        }
-      });
-      return maxSpan;
-    } : void 0;
-  }, [computedVisibleColumns]);
   const { horizontalVirtualBrain, verticalVirtualBrain } = useYourBrain({
     computedPinnedStartWidth: computed.computedPinnedStartWidth,
     computedPinnedEndWidth: computed.computedPinnedEndWidth,
@@ -7422,7 +7506,7 @@ function useListRendering(param) {
   const hasHorizontalScrollbar = computedUnpinnedColumnsWidth > bodySize.width - computedPinnedStartColumnsWidth - computedPinnedEndColumnsWidth;
   const reservedContentHeight = verticalVirtualBrain.getTotalSize() + (hasHorizontalScrollbar ? getScrollbarWidth() : 0);
   const hasVerticalScrollbar = bodySize.height > 0 && bodySize.height < reservedContentHeight;
-  const scrollbars = useMemo11(() => ({
+  const scrollbars = useMemo12(() => ({
     vertical: hasVerticalScrollbar,
     horizontal: hasHorizontalScrollbar
   }), [hasVerticalScrollbar, hasHorizontalScrollbar]);
@@ -7470,7 +7554,8 @@ function useListRendering(param) {
     rowHeight,
     verticalVirtualBrain,
     pinnedStartScrollListener,
-    pinnedEndScrollListener
+    pinnedEndScrollListener,
+    rowSpan
   };
   const centerRenderingParams = __spreadProps(__spreadValues({}, pinnedRenderingParams), {
     columnShifts,
@@ -7586,7 +7671,7 @@ var InfiniteTableLicenseFooter = forwardRef3(function InfiniteTableLicenseFooter
 });
 
 // src/components/InfiniteTable/hooks/useLicense/useLicense.ts
-import { useMemo as useMemo12 } from "react";
+import { useMemo as useMemo13 } from "react";
 
 // src/components/InfiniteTable/hooks/useLicense/crc32.ts
 var DEFAULT_ReversedPolynomial = 3988292384;
@@ -7736,10 +7821,10 @@ var origin = typeof window !== "undefined" ? window.location.origin : "";
 var [_fullUrl, protocol, sandboxUrl] = Array.from(SANDBOX_REGEX.exec(origin) || []);
 var isInsideSandbox = protocol === "https" && sandboxUrl === "sandpack.codesandbox.io";
 var useLicense = (licenseKey = "") => {
-  const valid = useMemo12(() => {
+  const valid = useMemo13(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.2.4"
+      version: "0.2.8"
     });
     if (!licenseKey && !valid2 && isInsideSandbox) {
       return true;

package/index.js

@@ -873,6 +873,7 @@ var mapPropsToState = (params) => {
   });
   const computedColumns = state.columnsWhenGrouping || state.columnsWhenInlineGroupRenderStrategy || state.columns;
   return {
+    controlledColumnVisibility: !!props.columnVisibility,
     groupRenderStrategy,
     groupBy,
     computedColumns,
@@ -1398,6 +1399,7 @@ var getComputedVisibleColumns = ({
     const result2 = __spreadProps(__spreadValues({
       align: colType.align,
       verticalAlign: colType.verticalAlign,
+      defaultHiddenWhenGroupedBy: colType.defaultHiddenWhenGroupedBy,
       valueGetter: colType.valueGetter,
       renderValue: colType.renderValue,
       render: colType.render
@@ -2841,6 +2843,7 @@ function getEnhancedGroupData(options, deepMapValue) {
     id: `${groupKeys}`,
     collapsed,
     parents,
+    flatRowInfoList: [],
     collapsedChildrenCount: 0,
     collapsedGroupsCount: 0,
     indexInParentGroups: options.indexInParentGroups,
@@ -2903,9 +2906,14 @@ function enhancedFlatten(param) {
     }
     if (collapsed) {
       parents.forEach((parent) => {
+        parent.flatRowInfoList.push(enhancedGroupData);
         parent.collapsedChildrenCount += enhancedGroupData.groupCount;
         parent.collapsedGroupsCount += 1;
       });
+    } else {
+      parents.forEach((parent) => {
+        parent.flatRowInfoList.push(enhancedGroupData);
+      });
     }
     indexInParentGroups.push(indexInGroup);
     parents.push(enhancedGroupData);
@@ -2914,7 +2922,7 @@ function enhancedFlatten(param) {
         if (!pivot) {
           const startIndex = result.length;
           result.push(...items.map((item, index) => {
-            return {
+            const rowInfo = {
               id: item ? toPrimaryKey(item) : `${groupKeys}-${index}`,
               data: item,
               isGroupRow: false,
@@ -2928,6 +2936,10 @@ function enhancedFlatten(param) {
               groupNesting,
               groupCount: enhancedGroupData.groupCount
             };
+            parents.forEach((parent) => {
+              parent.flatRowInfoList.push(rowInfo);
+            });
+            return rowInfo;
           }));
         }
       } else {
@@ -3957,7 +3969,7 @@ function concludeReducer(params) {
     state.groupDeepMap = void 0;
     state.pivotColumns = void 0;
     const arrayDifferentAfterSortStep = previousState.postSortDataArray != state.postSortDataArray;
-    if (arrayDifferentAfterSortStep) {
+    if (arrayDifferentAfterSortStep || groupsDepsChanged) {
       rowInfoDataArray = dataArray.map((data, index) => toRowInfo(data, data ? toPrimaryKey(data) : index, index));
     }
   }
@@ -4068,7 +4080,7 @@ function useColumnsWhen() {
   }, [pivotTotalColumnPosition]);
   useColumnsWhenInlineGroupRenderStrategy(groupByMap);
   const { toggleGroupRow } = useColumnsWhenGrouping();
-  useHideEmptyGroupColumns();
+  useHideColumns(groupByMap);
   return { toggleGroupRow };
 }
 function useColumnsWhenInlineGroupRenderStrategy(groupByMap) {
@@ -4190,9 +4202,10 @@ function useColumnsWhenGrouping() {
   ]);
   return { toggleGroupRow };
 }
-function useHideEmptyGroupColumns() {
+function useHideColumns(groupByMap) {
   const {
     componentState: {
+      dataArray,
       groupBy,
       groupRowsState,
       originalLazyGroupDataChangeDetect
@@ -4203,18 +4216,49 @@ function useHideEmptyGroupColumns() {
     getComponentState,
     componentActions,
     componentState: {
-      columnsWhenGrouping: generatedColumns,
+      columnTypes,
+      computedColumns,
       hideEmptyGroupColumns,
       groupRenderStrategy
     }
   } = useComponentState();
+  const prevHideEmptyGroupColumns = usePrevious(hideEmptyGroupColumns);
   (0, import_react17.useEffect)(() => {
     if (groupRenderStrategy !== "multi-column") {
       return;
     }
+    const currentState = getComponentState();
+    const computedGroupColumns = new Map();
+    computedColumns.forEach((column, colId) => {
+      if (typeof column.groupByField !== "string") {
+        return;
+      }
+      const { groupByField } = column;
+      const field = groupByField;
+      const groupInfoForColumn = groupByMap.get(field);
+      if (!groupInfoForColumn) {
+        return;
+      }
+      computedGroupColumns.set(colId, column);
+    });
+    if (!hideEmptyGroupColumns) {
+      if (prevHideEmptyGroupColumns) {
+        let updated2 = false;
+        const columnVisibility2 = __spreadValues({}, currentState.columnVisibility);
+        computedGroupColumns.forEach((_column, colId) => {
+          if (columnVisibility2[colId] === false) {
+            updated2 = true;
+            delete columnVisibility2[colId];
+          }
+        });
+        if (updated2) {
+          componentActions.columnVisibility = columnVisibility2;
+        }
+      }
+      return;
+    }
     const groupsLength = groupBy.length;
     let expandedGroupsLevel = 0;
-    const { dataArray } = getDataSourceState();
     const len = dataArray.length;
     for (let i = 0; i < len; i++) {
       const data = dataArray[i];
@@ -4223,23 +4267,24 @@ function useHideEmptyGroupColumns() {
         break;
       }
     }
-    const currentState = getComponentState();
-    const { computedColumns } = currentState;
     let updated = false;
     const columnVisibility = __spreadValues({}, currentState.columnVisibility);
-    const cols = computedColumns;
-    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;
-      }
+    computedGroupColumns.forEach((column, colId) => {
+      const { groupByField } = column;
+      const field = groupByField;
+      const groupInfoForColumn = groupByMap.get(field);
+      const index = groupInfoForColumn.groupIndex;
       const shouldBeHidden = index > expandedGroupsLevel && hideEmptyGroupColumns;
-      updated = true;
       if (shouldBeHidden) {
-        columnVisibility[colId] = false;
+        if (columnVisibility[colId] !== false) {
+          updated = true;
+          columnVisibility[colId] = false;
+        }
       } else {
-        delete columnVisibility[colId];
+        if (columnVisibility.hasOwnProperty(colId)) {
+          updated = true;
+          delete columnVisibility[colId];
+        }
       }
     });
     if (updated) {
@@ -4248,12 +4293,41 @@ function useHideEmptyGroupColumns() {
   }, [
     getDataSourceState,
     groupRenderStrategy,
-    generatedColumns,
     originalLazyGroupDataChangeDetect,
     groupBy,
+    groupByMap,
+    computedColumns,
+    hideEmptyGroupColumns ? dataArray : null,
     hideEmptyGroupColumns ? groupRowsState : null,
     hideEmptyGroupColumns
   ]);
+  (0, import_react17.useEffect)(() => {
+    const isGrouped = groupBy.length > 0;
+    const currentState = getComponentState();
+    const { controlledColumnVisibility, columnVisibility } = currentState;
+    if (controlledColumnVisibility) {
+      return;
+    }
+    const newColumnVisibility = __spreadValues({}, columnVisibility);
+    let updated = false;
+    computedColumns.forEach((col, id) => {
+      if (col.defaultHiddenWhenGroupedBy) {
+        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);
+        if (nowHidden !== shouldBeHidden) {
+          updated = true;
+          if (shouldBeHidden) {
+            newColumnVisibility[id] = false;
+          } else {
+            delete newColumnVisibility[id];
+          }
+        }
+      }
+    });
+    if (updated) {
+      componentActions.columnVisibility = newColumnVisibility;
+    }
+  }, [computedColumns, columnTypes, groupBy, groupByMap]);
 }
 function getColumnsWhenGrouping(params) {
   const {
@@ -4402,6 +4476,31 @@ function useComputed() {
     columnSizing,
     columnTypes
   });
+  const rowSpan = (0, import_react18.useMemo)(() => {
+    const colsWithRowspan = computedVisibleColumns.filter((col) => typeof col.rowspan === "function");
+    return colsWithRowspan.length ? ({ itemIndex }) => {
+      let maxSpan = 1;
+      const dataArray = getDataSourceState().dataArray;
+      const rowInfo = dataArray[itemIndex];
+      const data = rowInfo.data;
+      colsWithRowspan.forEach((column) => {
+        if (!column.rowspan) {
+          return;
+        }
+        const span = column.rowspan({
+          column,
+          data,
+          dataArray,
+          rowInfo,
+          rowIndex: itemIndex
+        });
+        if (span > maxSpan) {
+          maxSpan = span;
+        }
+      });
+      return maxSpan;
+    } : void 0;
+  }, [computedVisibleColumns]);
   const unpinnedColumnWidths = computedUnpinnedColumns.map((c) => c.computedWidth);
   let sortedUnpinnedColumnWidths = [...unpinnedColumnWidths].sort(sortAscending);
   let unpinnedColumnRenderCount = 0;
@@ -4428,6 +4527,7 @@ function useComputed() {
   const computedPinnedStartOverflow = computedPinnedStartWidth ? computedPinnedStartColumnsWidth > computedPinnedStartWidth : false;
   const computedPinnedEndOverflow = computedPinnedEndWidth ? computedPinnedEndColumnsWidth > computedPinnedEndWidth : false;
   return {
+    rowSpan,
     toggleGroupRow,
     computedPinnedStartOverflow,
     computedPinnedEndOverflow,
@@ -6032,7 +6132,6 @@ function InfiniteTableColumnCellFn(props) {
       dataArray: getData(),
       column,
       rowInfo,
-      groupRowInfo,
       rowIndex,
       data: rowInfo.data
     });
@@ -6080,7 +6179,8 @@ function useRowDOMProps(props, rowProps, rowStyle, rowClassName, groupRenderStra
     showHoverRows = false,
     rowIndex,
     domRef: domRefFromProps,
-    rowInfo
+    rowInfo,
+    rowSpan
   } = props;
   const domRef = (0, import_react31.useRef)(null);
   const rowDOMRef = (0, import_react31.useCallback)((node) => {
@@ -6100,7 +6200,7 @@ function useRowDOMProps(props, rowProps, rowStyle, rowClassName, groupRenderStra
   if (rowStyle) {
     style = typeof rowStyle === "function" ? __spreadValues(__spreadValues({}, style), rowStyle(rowPropsAndStyleArgs)) : __spreadValues(__spreadValues({}, style), rowStyle);
   }
-  if (inlineGroupRoot) {
+  if (inlineGroupRoot || rowSpan) {
     style = style || {};
     style.zIndex = 2e6 - rowInfo.indexInAll;
   }
@@ -6284,6 +6384,7 @@ function useUnpinnedRendering(params) {
     computedPinnedStartWidth,
     computedPinnedEndWidth,
     computedUnpinnedColumns,
+    rowSpan,
     getState
   } = params;
   const { virtualizeColumns } = getState();
@@ -6297,6 +6398,7 @@ function useUnpinnedRendering(params) {
       showZebraRows,
       showHoverRows,
       getData,
+      rowSpan,
       toggleGroupRow,
       virtualizeColumns: shouldVirtualizeColumns,
       brain: null,
@@ -6313,6 +6415,7 @@ function useUnpinnedRendering(params) {
   }, [
     repaintId,
     rowHeight,
+    rowSpan,
     computedUnpinnedColumns,
     computedUnpinnedColumnsWidth,
     shouldVirtualizeColumns,
@@ -6635,7 +6738,7 @@ function PinnedRowsContainer(props) {
   return /* @__PURE__ */ React30.createElement(RowListWithExternalScrolling, __spreadValues({}, rowListProps));
 }
 function useRenderPinnedRow(params) {
-  const { getData, getState, columnsWidth, columns, verticalBrain } = params;
+  const { getData, getState, columnsWidth, columns, rowSpan, verticalBrain } = params;
   const renderPinnedRow = (0, import_react37.useCallback)((rowParams) => {
     const dataArray = getData();
     const rowInfo = dataArray[rowParams.rowIndex];
@@ -6649,6 +6752,7 @@ function useRenderPinnedRow(params) {
       virtualizeColumns: false,
       verticalBrain,
       brain: null,
+      rowSpan,
       rowWidth: columnsWidth,
       columns
     }, rowParams);
@@ -6673,6 +6777,7 @@ function usePinnedRenderingForSide(side, params) {
     computedPinnedStartOverflow,
     pinnedStartScrollListener,
     pinnedEndScrollListener,
+    rowSpan,
     repaintId,
     toggleGroupRow,
     scrollbars: {
@@ -6691,6 +6796,7 @@ function usePinnedRenderingForSide(side, params) {
     getData,
     getState,
     toggleGroupRow,
+    rowSpan,
     verticalBrain: verticalVirtualBrain,
     columns,
     columnsWidth
@@ -7054,7 +7160,7 @@ var VirtualBrain = class extends Logger {
         this.computeCacheFor(lastSizeIndex);
         _prev = lastOffset;
         lastOffset = this.itemOffsetCache[lastSizeIndex];
-        if (_prev === lastOffset) {
+        if (_prev === lastOffset && _prev != 0) {
           return count - 1;
         }
       }
@@ -7246,6 +7352,10 @@ function useYourBrain(param) {
   }, []);
   horizontalVirtualBrain.update(computedUnpinnedColumns.length, columnSize);
   verticalVirtualBrain.update(dataArray.length, rowHeight, rowSpan);
+  if (true) {
+    globalThis.verticalVirtualBrain = verticalVirtualBrain;
+    globalThis.horizontalVirtualBrain = horizontalVirtualBrain;
+  }
   (0, import_react40.useEffect)(() => {
     verticalVirtualBrain.setAvailableSize({
       height: bodySize.height,
@@ -7277,7 +7387,7 @@ function useListRendering(param) {
     computedUnpinnedColumnsWidth,
     computedPinnedStartOverflow,
     computedPinnedEndOverflow,
-    computedVisibleColumns,
+    rowSpan,
     toggleGroupRow
   } = computed;
   const { componentState: dataSourceState, getState: getDataSourceState } = useDataSourceContextValue();
@@ -7296,32 +7406,6 @@ function useListRendering(param) {
     repaintIdRef.current++;
   }
   const repaintId = repaintIdRef.current;
-  const rowSpan = (0, import_react41.useMemo)(() => {
-    const colsWithRowspan = computedVisibleColumns.filter((col) => typeof col.rowspan === "function");
-    return colsWithRowspan.length ? ({ itemIndex }) => {
-      let maxSpan = 1;
-      const dataArray2 = getData();
-      const rowInfo = dataArray2[itemIndex];
-      const data = rowInfo.data;
-      colsWithRowspan.forEach((column) => {
-        if (!column.rowspan) {
-          return;
-        }
-        const span = column.rowspan({
-          column,
-          data,
-          dataArray: dataArray2,
-          groupRowInfo: null,
-          rowInfo,
-          rowIndex: itemIndex
-        });
-        if (span > maxSpan) {
-          maxSpan = span;
-        }
-      });
-      return maxSpan;
-    } : void 0;
-  }, [computedVisibleColumns]);
   const { horizontalVirtualBrain, verticalVirtualBrain } = useYourBrain({
     computedPinnedStartWidth: computed.computedPinnedStartWidth,
     computedPinnedEndWidth: computed.computedPinnedEndWidth,
@@ -7382,7 +7466,8 @@ function useListRendering(param) {
     rowHeight,
     verticalVirtualBrain,
     pinnedStartScrollListener,
-    pinnedEndScrollListener
+    pinnedEndScrollListener,
+    rowSpan
   };
   const centerRenderingParams = __spreadProps(__spreadValues({}, pinnedRenderingParams), {
     columnShifts,
@@ -7646,7 +7731,7 @@ var useLicense = (licenseKey = "") => {
   const valid = (0, import_react43.useMemo)(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.2.4"
+      version: "0.2.8"
     });
     if (!licenseKey && !valid2 && isInsideSandbox) {
       return true;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@infinite-table/infinite-react",
   "description": "Infinite Table for React",
-  "version": "0.2.4",
+  "version": "0.2.8",
   "main": "index.js",
   "module": "index.esm.js",
   "typings": "index.d.ts",
@@ -14,5 +14,5 @@
   },
   "license": "Commercial & Open Source",
   "//": "will be updated at build time",
-  "publishedAt": 1644430025786
+  "publishedAt": 1645485108085
 }