@infinite-table/infinite-react 0.3.10 → 0.3.11

package/index.d.ts

@@ -505,6 +505,7 @@ declare type InfiniteTablePropPivotGrandTotalColumnPosition = InfiniteTablePropP
 interface InfiniteTableMappedState<T> {
     scrollTopKey: InfiniteTableProps<T>['scrollTopKey'];
     viewportReservedWidth: InfiniteTableProps<T>['viewportReservedWidth'];
+    resizableColumns: InfiniteTableProps<T>['resizableColumns'];
     groupColumn: InfiniteTableProps<T>['groupColumn'];
     headerOptions: NonUndefined<InfiniteTableProps<T>['headerOptions']>;
     keyboardNavigation: NonUndefined<InfiniteTableProps<T>['keyboardNavigation']>;
@@ -620,6 +621,7 @@ declare type InfiniteTableColumnType<T> = {
     resizable?: InfiniteTableColumn<T>['resizable'];
     align?: InfiniteTableColumn<T>['align'];
     verticalAlign?: InfiniteTableColumn<T>['verticalAlign'];
+    columnGroup?: string;
     cssEllipsis?: boolean;
     headerCssEllipsis?: boolean;
     field?: keyof T;
@@ -1031,6 +1033,9 @@ declare type InfiniteTableComputedColumnBase<T> = {
     computedSortType: string;
     computedDataType: string;
     computedWidth: number;
+    computedFlex: number | null;
+    computedMinWidth: number | null;
+    computedMaxWidth: number | null;
     computedOffset: number;
     computedPinningOffset: number;
     computedAbsoluteOffset: number;
@@ -1047,6 +1052,7 @@ declare type InfiniteTableComputedColumnBase<T> = {
     computedFilterValue: DataSourceFilterValueItem<T> | null;
     computedPinned: InfiniteTableColumnPinnedValues;
     computedDraggable: boolean;
+    computedResizable: boolean;
     computedFirstInCategory: boolean;
     computedLastInCategory: boolean;
     computedFirst: boolean;

package/index.esm.js

@@ -672,7 +672,7 @@ var Logger = class {
   constructor(channelName) {
     this.debug = emptyLogFn;
     this.error = emptyLogFn;
-    if (true) {
+    if (false) {
       this.debug = dbg(channelName);
       this.error = err(channelName);
     }
@@ -892,8 +892,8 @@ function SpacePlaceholderFn(props) {
   };
   return /* @__PURE__ */ createElement3("div", {
     "data-count": count,
-    "data-placeholder-width": true ? width : void 0,
-    "data-placeholder-height": true ? height : void 0,
+    "data-placeholder-width": false ? width : void 0,
+    "data-placeholder-height": false ? height : void 0,
     "data-name": "SpacePlaceholder",
     style
   });
@@ -1174,7 +1174,7 @@ var MatrixBrain = class extends Logger {
       if (colWidthDefined) {
         this.colWidth = colWidth;
       }
-      if (true) {
+      if (false) {
         if (widthChanged) {
           this.debug("New available width %d (size is %d,%d)", this.width, this.width, this.height);
         }
@@ -1254,12 +1254,18 @@ var MatrixBrain = class extends Logger {
       }
     };
     this.notifyScrollStart = () => {
+      if (this.destroyed) {
+        return;
+      }
       const fns = this.onScrollStartFns;
       for (let i = 0, len = fns.length; i < len; i++) {
         fns[i]();
       }
     };
     this.notifyScrollStop = () => {
+      if (this.destroyed) {
+        return;
+      }
       const fns = this.onScrollStopFns;
       const scrollPos = this.scrollPosition;
       const range = this.getRenderRange();
@@ -1282,37 +1288,61 @@ var MatrixBrain = class extends Logger {
       }
     };
     this.notifyAvailableSizeChange = () => {
+      if (this.destroyed) {
+        return;
+      }
       const fns = this.onAvailableSizeChangeFns;
       const range = this.getAvailableSize();
       for (let i = 0, len = fns.length; i < len; i++) {
         raf2(() => {
+          if (this.destroyed) {
+            return;
+          }
           fns[i](range);
         });
       }
     };
     this.notifyRenderRangeChange = () => {
+      if (this.destroyed) {
+        return;
+      }
       const fns = this.onRenderRangeChangeFns;
       const range = this.getRenderRange();
       for (let i = 0, len = fns.length; i < len; i++) {
         raf2(() => {
+          if (this.destroyed) {
+            return;
+          }
           fns[i](range);
         });
       }
     };
     this.notifyVerticalRenderRangeChange = () => {
+      if (this.destroyed) {
+        return;
+      }
       const fns = this.onVerticalRenderRangeChangeFns;
       const range = this.verticalRenderRange;
       for (let i = 0, len = fns.length; i < len; i++) {
         raf2(() => {
+          if (this.destroyed) {
+            return;
+          }
           fns[i]([range.startIndex, range.endIndex]);
         });
       }
     };
     this.notifyHorizontalRenderRangeChange = () => {
+      if (this.destroyed) {
+        return;
+      }
       const fns = this.onHorizontalRenderRangeChangeFns;
       const range = this.horizontalRenderRange;
       for (let i = 0, len = fns.length; i < len; i++) {
         raf2(() => {
+          if (this.destroyed) {
+            return;
+          }
           fns[i]([range.startIndex, range.endIndex]);
         });
       }
@@ -1668,7 +1698,7 @@ var MatrixBrain = class extends Logger {
           if (cache[i] === void 0) {
             cell[direction === "horizontal" ? "colIndex" : "rowIndex"] = i;
             let spanValue = itemSpan(cell);
-            if (spanValue < 1) {
+            if (false) {
               this.debug(`${direction === "horizontal" ? "colspan" : "rowspan"} cannot be less than 1 - got %d for index %d`, spanValue, i);
             }
             cache[i] = i;
@@ -1971,7 +2001,7 @@ var MatrixBrain = class extends Logger {
     }
     this.width = width;
     this.height = height;
-    if (true) {
+    if (false) {
       this.debug("New available size: width %d, height %d", this.width, this.height);
     }
     this.notifyAvailableSizeChange();
@@ -1989,6 +2019,9 @@ var MatrixBrain = class extends Logger {
     return totalSize.width - this.width;
   }
   notifyScrollChange() {
+    if (this.destroyed) {
+      return;
+    }
     const { scrollPosition } = this;
     const fns = this.onScrollFns;
     for (let i = 0, len = fns.length; i < len; i++) {
@@ -2005,6 +2038,9 @@ var MatrixBrain = class extends Logger {
     return direction === "horizontal" ? this.getFixedEndColsWidth() : this.getFixedEndRowsHeight();
   }
   notifyRenderCountChange() {
+    if (this.destroyed) {
+      return;
+    }
     const { horizontalRenderCount, verticalRenderCount } = this;
     const renderCount = {
       horizontal: horizontalRenderCount,
@@ -2013,6 +2049,9 @@ var MatrixBrain = class extends Logger {
     const fns = this.onRenderCountChangeFns;
     for (let i = 0, len = fns.length; i < len; i++) {
       raf2(() => {
+        if (this.destroyed) {
+          return;
+        }
         fns[i](renderCount);
       });
     }
@@ -2438,7 +2477,7 @@ var MappedCells = class extends Logger {
       return elementIndex != null ? elementIndex : null;
     };
     this.renderCellAtElement = (rowIndex, colIndex, elementIndex, renderNode) => {
-      if (true) {
+      if (false) {
         this.debug(`Render cell ${rowIndex},${colIndex} at element ${elementIndex}`);
       }
       const key = [rowIndex, colIndex];
@@ -2704,7 +2743,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
         return [];
       }
       const { start, end } = range;
-      if (true) {
+      if (false) {
         this.debug(`Render range ${start}-${end}. Force ${force}`);
       }
       const { mappedCells } = this;
@@ -2723,7 +2762,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
           if (this.updaters[elementIndex]) {
             this.updaters[elementIndex].destroy();
           }
-          if (true) {
+          if (false) {
             this.debug(`Discard element ${elementIndex}`);
           }
         });
@@ -2775,7 +2814,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
             }
             const elementIndex = cellRendered ? mappedCells.getElementIndexForCell(row, col) : mappedCells.getElementFromListForColumn(elementsOutsideItemRange, col);
             if (elementIndex == null) {
-              if (true) {
+              if (false) {
                 this.error(`Cannot find element to render cell ${row}:${col}`);
               }
               continue;
@@ -2794,7 +2833,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
         }
         const elementIndex = elementsOutsideItemRange.pop();
         if (elementIndex == null) {
-          if (true) {
+          if (false) {
             this.error(`Cannot find element to render cell ${rowIndex}-${colIndex}`);
           }
           return;
@@ -2993,7 +3032,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
       const itemElement = this.itemDOMElements[elementIndex];
       const cell = this.mappedCells.getRenderedCellAtElement(elementIndex);
       if (cell == null) {
-        if (true) {
+        if (false) {
           this.error(`Cannot find item for element ${elementIndex}`);
         }
         return;
@@ -3006,7 +3045,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
       const { x, y } = itemPosition;
       if (itemElement) {
         this.updateHoverClassNamesForRow(rowIndex);
-        if (true) {
+        if (false) {
           itemElement.dataset.rowIndex = rowIndex;
           itemElement.dataset.colIndex = colIndex;
         }
@@ -3015,7 +3054,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
           itemElement.style.willChange = "transform";
           itemElement.style.backfaceVisibility = "hidden";
           const hidden = options ? options.hidden : !!this.isCellCovered(rowIndex, colIndex);
-          itemElement.style.zIndex = hidden ? "-1" : "auto";
+          itemElement.style.zIndex = hidden ? "-1" : itemElement.dataset.zIndex || "auto";
         } else {
           itemElement.style.display = "";
           itemElement.style.left = `${x}px`;
@@ -3074,19 +3113,19 @@ var ReactHeadlessTableRenderer = class extends Logger {
         node.style.transform = `translate3d(${coords.x}px, ${fixedEndRowsOffsets[rowIndex]}px, 0)`;
       }
       function adjustColStartRowStart(_rowIndex, _colIndex, node, { x, y }, scrollPosition2) {
-        node.style.zIndex = `10000`;
+        node.style.zIndex = `1000000`;
         node.style.transform = `translate3d(${x + scrollPosition2.scrollLeft}px, ${y + scrollPosition2.scrollTop}px, 0)`;
       }
       function adjustColStartRowEnd(_rowIndex, _colIndex, node, { x }, scrollPosition2) {
-        node.style.zIndex = `20000`;
+        node.style.zIndex = `2000000`;
         node.style.transform = `translate3d(${x + scrollPosition2.scrollLeft}px, ${fixedEndRowsOffsets[_rowIndex]}px, 0)`;
       }
       function adjustColEndRowStart(_rowIndex, colIndex, node, coords) {
-        node.style.zIndex = `30000`;
+        node.style.zIndex = `3000000`;
         node.style.transform = `translate3d(${fixedEndColsOffsets[colIndex]}px, ${coords.y + scrollPosition.scrollTop}px, 0)`;
       }
       function adjustColEndRowEnd(rowIndex, colIndex, node) {
-        node.style.zIndex = `40000`;
+        node.style.zIndex = `4000000`;
         node.style.transform = `translate3d(${fixedEndColsOffsets[colIndex]}px, ${fixedEndRowsOffsets[rowIndex]}px, 0)`;
       }
       if (fixedColsStart || fixedColsEnd) {
@@ -3230,7 +3269,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
       return;
     }
     this.mappedCells.renderCellAtElement(rowIndex, colIndex, elementIndex, renderedNode);
-    if (true) {
+    if (false) {
       this.debug(`Render cell ${rowIndex},${colIndex} at element ${elementIndex}`);
     }
     itemUpdater(renderedNode);
@@ -4524,7 +4563,11 @@ function InfiniteTableHeaderCell(props) {
   };
   const domRef = useRef12(null);
   const {
-    computed: { computedRemainingSpace, showColumnFilters },
+    computed: {
+      computedRemainingSpace,
+      showColumnFilters,
+      computedVisibleColumns
+    },
     componentState: { portalDOMRef, columnHeaderHeight, filterEditors }
   } = useInfiniteTable();
   const {
@@ -4631,6 +4674,7 @@ function InfiniteTableHeaderCell(props) {
   ]);
   const filterType = column.computedFilterType;
   const FilterEditor = filterEditors[filterType] || defaultFilterEditors[filterType] || StringFilterEditor;
+  const resizeHandle = null;
   return /* @__PURE__ */ createElement15(ContextProvider, {
     value: renderParam
   }, /* @__PURE__ */ createElement15(InfiniteTableCell, {
@@ -4639,6 +4683,7 @@ function InfiniteTableHeaderCell(props) {
     column,
     "data-name": `HeaderCell`,
     "data-column-id": column.id,
+    "data-z-index": computedVisibleColumns.length * 10 - column.computedVisibleIndex * 10,
     style,
     width,
     onPointerDown,
@@ -4647,7 +4692,7 @@ function InfiniteTableHeaderCell(props) {
     contentStyle: showColumnFilters ? { height: height / 2 } : void 0,
     className: join(InfiniteTableHeaderCellClassName, userSelect.none, column.computedSortable ? cursor.pointer : "", useCellClassName(column, [InfiniteTableHeaderCellClassName, InfiniteTableCellClassName], HeaderCellRecipe, { dragging, zebra: false, rowActive: false }), CellCls),
     cssEllipsis: (_e = (_d = column.headerCssEllipsis) != null ? _d : column.cssEllipsis) != null ? _e : true,
-    afterChildren: showColumnFilters ? column.computedFilterable ? /* @__PURE__ */ createElement15(InfiniteTableColumnHeaderFilter, {
+    afterChildren: /* @__PURE__ */ createElement15(Fragment2, null, showColumnFilters ? column.computedFilterable ? /* @__PURE__ */ createElement15(InfiniteTableColumnHeaderFilter, {
       filterEditor: FilterEditor,
       filterTypes,
       onChange: debouncedOnFilterValueChange,
@@ -4655,7 +4700,7 @@ function InfiniteTableHeaderCell(props) {
       columnLabel: column.field || column.name || column.id,
       columnFilterValue: column.computedFilterValue,
       columnHeaderHeight
-    }) : /* @__PURE__ */ createElement15(InfiniteTableColumnHeaderFilterEmpty, null) : null,
+    }) : /* @__PURE__ */ createElement15(InfiniteTableColumnHeaderFilterEmpty, null) : null, resizeHandle),
     renderChildren
   }), draggingProxy);
 }
@@ -5716,7 +5761,7 @@ function computeColumnGroupsDepths(columnGroups) {
     while (parentGroupId) {
       const parent = columnGroups.get(parentGroupId);
       if (!parent) {
-        if (true) {
+        if (false) {
           console.warn(`Cannot find column group ${parentGroupId}`);
         }
         break;
@@ -5833,7 +5878,7 @@ var debug4 = dbg("useColumnSizeFn");
 function useColumnSizeFn(columns) {
   const columnSize = useCallback13((index) => {
     const column = columns[index];
-    if (!column) {
+    if (false) {
       debug4("cannot find column at index", index, columns);
     }
     return column ? column.computedWidth : 0;
@@ -7950,7 +7995,7 @@ function concludeReducer(params) {
   }
   state.dataArray = rowInfoDataArray;
   state.reducedAt = now;
-  if (true) {
+  if (false) {
     globalThis.state = state;
   }
   return state;
@@ -7988,7 +8033,7 @@ function DataSourceCmp({ children }) {
     componentActions,
     getState
   };
-  if (true) {
+  if (false) {
     globalThis.getDataSourceState = getState;
   }
   useLoadData();
@@ -8439,10 +8484,14 @@ var computeFlex = (params) => {
   let totalFixedSize = 0;
   let totalFlex = 0;
   let totalFlexCount = 0;
+  const minSizes = [];
+  const maxSizes = [];
   items.forEach((item, i) => {
     var _a, _b, _c, _d, _e, _f;
     let maxSize = (_b = (_a = item.maxSize) != null ? _a : defaultMaxSize) != null ? _b : void 0;
     let minSize = (_d = (_c = item.minSize) != null ? _c : defaultMinSize) != null ? _d : void 0;
+    minSizes.push(minSize);
+    maxSizes.push(maxSize);
     if (item.size != null) {
       if (maxSize != null && item.size > maxSize) {
         item.size = maxSize;
@@ -8552,6 +8601,8 @@ var computeFlex = (params) => {
   return {
     items: resultItems,
     flexSizes,
+    minSizes,
+    maxSizes,
     computedSizes,
     remainingSize: Math.round(availableSize - totalTakenSize)
   };
@@ -8624,6 +8675,7 @@ var getComputedVisibleColumns = ({
   setSortInfo,
   multiSort,
   viewportReservedWidth,
+  resizableColumns,
   draggableColumns,
   columnOrder,
   columnPinning,
@@ -8708,7 +8760,7 @@ var getComputedVisibleColumns = ({
       };
     })
   });
-  const { computedSizes } = flexResult;
+  const { computedSizes, flexSizes, minSizes, maxSizes } = flexResult;
   const computedPinnedStartColumns = [];
   const computedPinnedEndColumns = [];
   const computedUnpinnedColumns = [];
@@ -8736,7 +8788,7 @@ var getComputedVisibleColumns = ({
   });
   const firstPinnedEndAbsoluteOffset = bodySize.width - totalPinnedEndWidth;
   columnsArray.forEach((c, i) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
     const id = visibleColumnOrder[i];
     const nextColumnId = visibleColumnOrder[i + 1];
     const colType = getColumnComputedType(c, columnTypes);
@@ -8747,6 +8799,9 @@ var getComputedVisibleColumns = ({
     const computedSortedDesc = computedSorted && !computedSortedAsc;
     const computedSortIndex = (_c = sortingInfo == null ? void 0 : sortingInfo.index) != null ? _c : -1;
     const computedWidth = computedSizes[i];
+    const computedFlex = flexSizes[i] || null;
+    const computedMinWidth = minSizes[i] || null;
+    const computedMaxWidth = maxSizes[i] || null;
     const computedPinned = getComputedPinned(id, columnPinning);
     const computedLast = i === visibleColumnOrder.length - 1;
     const computedPinningOffset = computedPinned === "start" ? computedPinnedStartColumnsWidth : computedPinned === "end" ? computedPinnedEndColumnsWidth : computedOffset - computedPinnedStartColumnsWidth;
@@ -8780,8 +8835,13 @@ var getComputedVisibleColumns = ({
       render: colType.render,
       style: colType.style,
       components: colType.components,
+      columnGroup: colType.columnGroup,
       field
     }, c), {
+      computedResizable: (_s = (_r = (_q = c.resizable) != null ? _q : colType.resizable) != null ? _r : resizableColumns) != null ? _s : true,
+      computedMinWidth,
+      computedMaxWidth,
+      computedFlex,
       computedDataType,
       computedSortType,
       computedFilterType,
@@ -8803,7 +8863,7 @@ var getComputedVisibleColumns = ({
       computedSortedDesc,
       computedVisibleIndex: i,
       computedPinned,
-      computedDraggable: (_r = (_q = c.draggable) != null ? _q : draggableColumns) != null ? _r : true,
+      computedDraggable: (_u = (_t = c.draggable) != null ? _t : draggableColumns) != null ? _u : true,
       computedFirstInCategory,
       computedLastInCategory,
       computedFirst: i === 0,
@@ -8853,7 +8913,7 @@ var getComputedVisibleColumns = ({
         setSortInfo(finalSortInfo);
       },
       id,
-      header: (_u = (_t = (_s = c.header) != null ? _s : colType.header) != null ? _t : c.name) != null ? _u : c.field
+      header: (_x = (_w = (_v = c.header) != null ? _v : colType.header) != null ? _w : c.name) != null ? _x : c.field
     });
     computedOffset += computedWidth;
     computedVisibleColumnsMap.set(result2.id, result2);
@@ -8929,6 +8989,7 @@ var useComputedVisibleColumns = ({
   pinnedEndMaxWidth,
   pinnedStartMaxWidth,
   viewportReservedWidth,
+  resizableColumns,
   columnVisibility,
   columnVisibilityAssumeVisible,
   columnSizing
@@ -8960,6 +9021,7 @@ var useComputedVisibleColumns = ({
       columnCssEllipsis,
       columnHeaderCssEllipsis,
       viewportReservedWidth,
+      resizableColumns,
       filterValue,
       sortable,
       sortInfo,
@@ -9117,6 +9179,7 @@ function useComputed() {
     pinnedEndMaxWidth: componentState.pinnedEndMaxWidth,
     bodySize,
     viewportReservedWidth: componentState.viewportReservedWidth,
+    resizableColumns: componentState.resizableColumns,
     sortable: componentState.sortable,
     draggableColumns: componentState.draggableColumns,
     sortInfo: (_a = dataSourceState.sortInfo) != null ? _a : void 0,
@@ -9405,7 +9468,7 @@ var useLicense = (licenseKey = "") => {
   const valid = useMemo12(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.3.10"
+      version: "0.3.11"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -9628,14 +9691,14 @@ function initSetupState2() {
       scrollTop: 0
     });
   });
-  if (true) {
+  if (false) {
     globalThis.brain = brain;
   }
   const { renderer, onRenderUpdater } = createRenderer2(brain);
   brain.onAvailableSizeChange((size) => {
     headerBrain.setAvailableSize({ width: size.width });
   });
-  if (true) {
+  if (false) {
     globalThis.renderer = renderer;
   }
   return {
@@ -9701,6 +9764,7 @@ var forwardProps3 = (setupState) => {
     scrollStopDelay: (scrollStopDelay) => scrollStopDelay != null ? scrollStopDelay : 250,
     filterEditors: (filterEditors) => __spreadValues(__spreadValues({}, defaultFilterEditors), filterEditors),
     viewportReservedWidth: (viewportReservedWidth) => viewportReservedWidth != null ? viewportReservedWidth : 0,
+    resizableColumns: (resizableColumns) => resizableColumns != null ? resizableColumns : true,
     columnMinWidth: (columnMinWidth) => columnMinWidth != null ? columnMinWidth : 30,
     columnMaxWidth: (columnMaxWidth) => columnMaxWidth != null ? columnMaxWidth : 2e3,
     columnDefaultWidth: (columnDefaultWidth) => columnDefaultWidth != null ? columnDefaultWidth : 200,
@@ -9919,7 +9983,7 @@ function InfiniteTableContextProvider() {
   const computed = useComputed();
   const getComputed = useLatest(computed);
   const getState = useLatest(componentState);
-  if (true) {
+  if (false) {
     globalThis.getState = getState;
     globalThis.getComputed = getComputed;
   }

package/index.js

@@ -694,7 +694,7 @@ var Logger = class {
   constructor(channelName) {
     this.debug = emptyLogFn;
     this.error = emptyLogFn;
-    if (true) {
+    if (false) {
       this.debug = dbg(channelName);
       this.error = err(channelName);
     }
@@ -892,8 +892,8 @@ function SpacePlaceholderFn(props) {
   };
   return /* @__PURE__ */ React5.createElement("div", {
     "data-count": count,
-    "data-placeholder-width": true ? width : void 0,
-    "data-placeholder-height": true ? height : void 0,
+    "data-placeholder-width": false ? width : void 0,
+    "data-placeholder-height": false ? height : void 0,
     "data-name": "SpacePlaceholder",
     style
   });
@@ -1166,7 +1166,7 @@ var MatrixBrain = class extends Logger {
       if (colWidthDefined) {
         this.colWidth = colWidth;
       }
-      if (true) {
+      if (false) {
         if (widthChanged) {
           this.debug("New available width %d (size is %d,%d)", this.width, this.width, this.height);
         }
@@ -1246,12 +1246,18 @@ var MatrixBrain = class extends Logger {
       }
     };
     this.notifyScrollStart = () => {
+      if (this.destroyed) {
+        return;
+      }
       const fns = this.onScrollStartFns;
       for (let i = 0, len = fns.length; i < len; i++) {
         fns[i]();
       }
     };
     this.notifyScrollStop = () => {
+      if (this.destroyed) {
+        return;
+      }
       const fns = this.onScrollStopFns;
       const scrollPos = this.scrollPosition;
       const range = this.getRenderRange();
@@ -1274,37 +1280,61 @@ var MatrixBrain = class extends Logger {
       }
     };
     this.notifyAvailableSizeChange = () => {
+      if (this.destroyed) {
+        return;
+      }
       const fns = this.onAvailableSizeChangeFns;
       const range = this.getAvailableSize();
       for (let i = 0, len = fns.length; i < len; i++) {
         raf2(() => {
+          if (this.destroyed) {
+            return;
+          }
           fns[i](range);
         });
       }
     };
     this.notifyRenderRangeChange = () => {
+      if (this.destroyed) {
+        return;
+      }
       const fns = this.onRenderRangeChangeFns;
       const range = this.getRenderRange();
       for (let i = 0, len = fns.length; i < len; i++) {
         raf2(() => {
+          if (this.destroyed) {
+            return;
+          }
           fns[i](range);
         });
       }
     };
     this.notifyVerticalRenderRangeChange = () => {
+      if (this.destroyed) {
+        return;
+      }
       const fns = this.onVerticalRenderRangeChangeFns;
       const range = this.verticalRenderRange;
       for (let i = 0, len = fns.length; i < len; i++) {
         raf2(() => {
+          if (this.destroyed) {
+            return;
+          }
           fns[i]([range.startIndex, range.endIndex]);
         });
       }
     };
     this.notifyHorizontalRenderRangeChange = () => {
+      if (this.destroyed) {
+        return;
+      }
       const fns = this.onHorizontalRenderRangeChangeFns;
       const range = this.horizontalRenderRange;
       for (let i = 0, len = fns.length; i < len; i++) {
         raf2(() => {
+          if (this.destroyed) {
+            return;
+          }
           fns[i]([range.startIndex, range.endIndex]);
         });
       }
@@ -1660,7 +1690,7 @@ var MatrixBrain = class extends Logger {
           if (cache[i] === void 0) {
             cell[direction === "horizontal" ? "colIndex" : "rowIndex"] = i;
             let spanValue = itemSpan(cell);
-            if (spanValue < 1) {
+            if (false) {
               this.debug(`${direction === "horizontal" ? "colspan" : "rowspan"} cannot be less than 1 - got %d for index %d`, spanValue, i);
             }
             cache[i] = i;
@@ -1963,7 +1993,7 @@ var MatrixBrain = class extends Logger {
     }
     this.width = width;
     this.height = height;
-    if (true) {
+    if (false) {
       this.debug("New available size: width %d, height %d", this.width, this.height);
     }
     this.notifyAvailableSizeChange();
@@ -1981,6 +2011,9 @@ var MatrixBrain = class extends Logger {
     return totalSize.width - this.width;
   }
   notifyScrollChange() {
+    if (this.destroyed) {
+      return;
+    }
     const { scrollPosition } = this;
     const fns = this.onScrollFns;
     for (let i = 0, len = fns.length; i < len; i++) {
@@ -1997,6 +2030,9 @@ var MatrixBrain = class extends Logger {
     return direction === "horizontal" ? this.getFixedEndColsWidth() : this.getFixedEndRowsHeight();
   }
   notifyRenderCountChange() {
+    if (this.destroyed) {
+      return;
+    }
     const { horizontalRenderCount, verticalRenderCount } = this;
     const renderCount = {
       horizontal: horizontalRenderCount,
@@ -2005,6 +2041,9 @@ var MatrixBrain = class extends Logger {
     const fns = this.onRenderCountChangeFns;
     for (let i = 0, len = fns.length; i < len; i++) {
       raf2(() => {
+        if (this.destroyed) {
+          return;
+        }
         fns[i](renderCount);
       });
     }
@@ -2430,7 +2469,7 @@ var MappedCells = class extends Logger {
       return elementIndex != null ? elementIndex : null;
     };
     this.renderCellAtElement = (rowIndex, colIndex, elementIndex, renderNode) => {
-      if (true) {
+      if (false) {
         this.debug(`Render cell ${rowIndex},${colIndex} at element ${elementIndex}`);
       }
       const key = [rowIndex, colIndex];
@@ -2696,7 +2735,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
         return [];
       }
       const { start, end } = range;
-      if (true) {
+      if (false) {
         this.debug(`Render range ${start}-${end}. Force ${force}`);
       }
       const { mappedCells } = this;
@@ -2715,7 +2754,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
           if (this.updaters[elementIndex]) {
             this.updaters[elementIndex].destroy();
           }
-          if (true) {
+          if (false) {
             this.debug(`Discard element ${elementIndex}`);
           }
         });
@@ -2767,7 +2806,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
             }
             const elementIndex = cellRendered ? mappedCells.getElementIndexForCell(row, col) : mappedCells.getElementFromListForColumn(elementsOutsideItemRange, col);
             if (elementIndex == null) {
-              if (true) {
+              if (false) {
                 this.error(`Cannot find element to render cell ${row}:${col}`);
               }
               continue;
@@ -2786,7 +2825,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
         }
         const elementIndex = elementsOutsideItemRange.pop();
         if (elementIndex == null) {
-          if (true) {
+          if (false) {
             this.error(`Cannot find element to render cell ${rowIndex}-${colIndex}`);
           }
           return;
@@ -2985,7 +3024,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
       const itemElement = this.itemDOMElements[elementIndex];
       const cell = this.mappedCells.getRenderedCellAtElement(elementIndex);
       if (cell == null) {
-        if (true) {
+        if (false) {
           this.error(`Cannot find item for element ${elementIndex}`);
         }
         return;
@@ -2998,7 +3037,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
       const { x, y } = itemPosition;
       if (itemElement) {
         this.updateHoverClassNamesForRow(rowIndex);
-        if (true) {
+        if (false) {
           itemElement.dataset.rowIndex = rowIndex;
           itemElement.dataset.colIndex = colIndex;
         }
@@ -3007,7 +3046,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
           itemElement.style.willChange = "transform";
           itemElement.style.backfaceVisibility = "hidden";
           const hidden = options ? options.hidden : !!this.isCellCovered(rowIndex, colIndex);
-          itemElement.style.zIndex = hidden ? "-1" : "auto";
+          itemElement.style.zIndex = hidden ? "-1" : itemElement.dataset.zIndex || "auto";
         } else {
           itemElement.style.display = "";
           itemElement.style.left = `${x}px`;
@@ -3066,19 +3105,19 @@ var ReactHeadlessTableRenderer = class extends Logger {
         node.style.transform = `translate3d(${coords.x}px, ${fixedEndRowsOffsets[rowIndex]}px, 0)`;
       }
       function adjustColStartRowStart(_rowIndex, _colIndex, node, { x, y }, scrollPosition2) {
-        node.style.zIndex = `10000`;
+        node.style.zIndex = `1000000`;
         node.style.transform = `translate3d(${x + scrollPosition2.scrollLeft}px, ${y + scrollPosition2.scrollTop}px, 0)`;
       }
       function adjustColStartRowEnd(_rowIndex, _colIndex, node, { x }, scrollPosition2) {
-        node.style.zIndex = `20000`;
+        node.style.zIndex = `2000000`;
         node.style.transform = `translate3d(${x + scrollPosition2.scrollLeft}px, ${fixedEndRowsOffsets[_rowIndex]}px, 0)`;
       }
       function adjustColEndRowStart(_rowIndex, colIndex, node, coords) {
-        node.style.zIndex = `30000`;
+        node.style.zIndex = `3000000`;
         node.style.transform = `translate3d(${fixedEndColsOffsets[colIndex]}px, ${coords.y + scrollPosition.scrollTop}px, 0)`;
       }
       function adjustColEndRowEnd(rowIndex, colIndex, node) {
-        node.style.zIndex = `40000`;
+        node.style.zIndex = `4000000`;
         node.style.transform = `translate3d(${fixedEndColsOffsets[colIndex]}px, ${fixedEndRowsOffsets[rowIndex]}px, 0)`;
       }
       if (fixedColsStart || fixedColsEnd) {
@@ -3222,7 +3261,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
       return;
     }
     this.mappedCells.renderCellAtElement(rowIndex, colIndex, elementIndex, renderedNode);
-    if (true) {
+    if (false) {
       this.debug(`Render cell ${rowIndex},${colIndex} at element ${elementIndex}`);
     }
     itemUpdater(renderedNode);
@@ -4475,7 +4514,11 @@ function InfiniteTableHeaderCell(props) {
   };
   const domRef = (0, import_react22.useRef)(null);
   const {
-    computed: { computedRemainingSpace, showColumnFilters },
+    computed: {
+      computedRemainingSpace,
+      showColumnFilters,
+      computedVisibleColumns
+    },
     componentState: { portalDOMRef, columnHeaderHeight, filterEditors }
   } = useInfiniteTable();
   const {
@@ -4582,6 +4625,7 @@ function InfiniteTableHeaderCell(props) {
   ]);
   const filterType = column.computedFilterType;
   const FilterEditor = filterEditors[filterType] || defaultFilterEditors[filterType] || StringFilterEditor;
+  const resizeHandle = null;
   return /* @__PURE__ */ React20.createElement(ContextProvider, {
     value: renderParam
   }, /* @__PURE__ */ React20.createElement(InfiniteTableCell, {
@@ -4590,6 +4634,7 @@ function InfiniteTableHeaderCell(props) {
     column,
     "data-name": `HeaderCell`,
     "data-column-id": column.id,
+    "data-z-index": computedVisibleColumns.length * 10 - column.computedVisibleIndex * 10,
     style,
     width,
     onPointerDown,
@@ -4598,7 +4643,7 @@ function InfiniteTableHeaderCell(props) {
     contentStyle: showColumnFilters ? { height: height / 2 } : void 0,
     className: join(InfiniteTableHeaderCellClassName, userSelect.none, column.computedSortable ? cursor.pointer : "", useCellClassName(column, [InfiniteTableHeaderCellClassName, InfiniteTableCellClassName], HeaderCellRecipe, { dragging, zebra: false, rowActive: false }), CellCls),
     cssEllipsis: (_e = (_d = column.headerCssEllipsis) != null ? _d : column.cssEllipsis) != null ? _e : true,
-    afterChildren: showColumnFilters ? column.computedFilterable ? /* @__PURE__ */ React20.createElement(InfiniteTableColumnHeaderFilter, {
+    afterChildren: /* @__PURE__ */ React20.createElement(React20.Fragment, null, showColumnFilters ? column.computedFilterable ? /* @__PURE__ */ React20.createElement(InfiniteTableColumnHeaderFilter, {
       filterEditor: FilterEditor,
       filterTypes,
       onChange: debouncedOnFilterValueChange,
@@ -4606,7 +4651,7 @@ function InfiniteTableHeaderCell(props) {
       columnLabel: column.field || column.name || column.id,
       columnFilterValue: column.computedFilterValue,
       columnHeaderHeight
-    }) : /* @__PURE__ */ React20.createElement(InfiniteTableColumnHeaderFilterEmpty, null) : null,
+    }) : /* @__PURE__ */ React20.createElement(InfiniteTableColumnHeaderFilterEmpty, null) : null, resizeHandle),
     renderChildren
   }), draggingProxy);
 }
@@ -5642,7 +5687,7 @@ function computeColumnGroupsDepths(columnGroups) {
     while (parentGroupId) {
       const parent = columnGroups.get(parentGroupId);
       if (!parent) {
-        if (true) {
+        if (false) {
           console.warn(`Cannot find column group ${parentGroupId}`);
         }
         break;
@@ -5759,7 +5804,7 @@ var debug4 = dbg("useColumnSizeFn");
 function useColumnSizeFn(columns) {
   const columnSize = (0, import_react32.useCallback)((index) => {
     const column = columns[index];
-    if (!column) {
+    if (false) {
       debug4("cannot find column at index", index, columns);
     }
     return column ? column.computedWidth : 0;
@@ -7866,7 +7911,7 @@ function concludeReducer(params) {
   }
   state.dataArray = rowInfoDataArray;
   state.reducedAt = now;
-  if (true) {
+  if (false) {
     globalThis.state = state;
   }
   return state;
@@ -7904,7 +7949,7 @@ function DataSourceCmp({ children }) {
     componentActions,
     getState
   };
-  if (true) {
+  if (false) {
     globalThis.getDataSourceState = getState;
   }
   useLoadData();
@@ -8355,10 +8400,14 @@ var computeFlex = (params) => {
   let totalFixedSize = 0;
   let totalFlex = 0;
   let totalFlexCount = 0;
+  const minSizes = [];
+  const maxSizes = [];
   items.forEach((item, i) => {
     var _a, _b, _c, _d, _e, _f;
     let maxSize = (_b = (_a = item.maxSize) != null ? _a : defaultMaxSize) != null ? _b : void 0;
     let minSize = (_d = (_c = item.minSize) != null ? _c : defaultMinSize) != null ? _d : void 0;
+    minSizes.push(minSize);
+    maxSizes.push(maxSize);
     if (item.size != null) {
       if (maxSize != null && item.size > maxSize) {
         item.size = maxSize;
@@ -8468,6 +8517,8 @@ var computeFlex = (params) => {
   return {
     items: resultItems,
     flexSizes,
+    minSizes,
+    maxSizes,
     computedSizes,
     remainingSize: Math.round(availableSize - totalTakenSize)
   };
@@ -8540,6 +8591,7 @@ var getComputedVisibleColumns = ({
   setSortInfo,
   multiSort,
   viewportReservedWidth,
+  resizableColumns,
   draggableColumns,
   columnOrder,
   columnPinning,
@@ -8624,7 +8676,7 @@ var getComputedVisibleColumns = ({
       };
     })
   });
-  const { computedSizes } = flexResult;
+  const { computedSizes, flexSizes, minSizes, maxSizes } = flexResult;
   const computedPinnedStartColumns = [];
   const computedPinnedEndColumns = [];
   const computedUnpinnedColumns = [];
@@ -8652,7 +8704,7 @@ var getComputedVisibleColumns = ({
   });
   const firstPinnedEndAbsoluteOffset = bodySize.width - totalPinnedEndWidth;
   columnsArray.forEach((c, i) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
     const id = visibleColumnOrder[i];
     const nextColumnId = visibleColumnOrder[i + 1];
     const colType = getColumnComputedType(c, columnTypes);
@@ -8663,6 +8715,9 @@ var getComputedVisibleColumns = ({
     const computedSortedDesc = computedSorted && !computedSortedAsc;
     const computedSortIndex = (_c = sortingInfo == null ? void 0 : sortingInfo.index) != null ? _c : -1;
     const computedWidth = computedSizes[i];
+    const computedFlex = flexSizes[i] || null;
+    const computedMinWidth = minSizes[i] || null;
+    const computedMaxWidth = maxSizes[i] || null;
     const computedPinned = getComputedPinned(id, columnPinning);
     const computedLast = i === visibleColumnOrder.length - 1;
     const computedPinningOffset = computedPinned === "start" ? computedPinnedStartColumnsWidth : computedPinned === "end" ? computedPinnedEndColumnsWidth : computedOffset - computedPinnedStartColumnsWidth;
@@ -8696,8 +8751,13 @@ var getComputedVisibleColumns = ({
       render: colType.render,
       style: colType.style,
       components: colType.components,
+      columnGroup: colType.columnGroup,
       field
     }, c), {
+      computedResizable: (_s = (_r = (_q = c.resizable) != null ? _q : colType.resizable) != null ? _r : resizableColumns) != null ? _s : true,
+      computedMinWidth,
+      computedMaxWidth,
+      computedFlex,
       computedDataType,
       computedSortType,
       computedFilterType,
@@ -8719,7 +8779,7 @@ var getComputedVisibleColumns = ({
       computedSortedDesc,
       computedVisibleIndex: i,
       computedPinned,
-      computedDraggable: (_r = (_q = c.draggable) != null ? _q : draggableColumns) != null ? _r : true,
+      computedDraggable: (_u = (_t = c.draggable) != null ? _t : draggableColumns) != null ? _u : true,
       computedFirstInCategory,
       computedLastInCategory,
       computedFirst: i === 0,
@@ -8769,7 +8829,7 @@ var getComputedVisibleColumns = ({
         setSortInfo(finalSortInfo);
       },
       id,
-      header: (_u = (_t = (_s = c.header) != null ? _s : colType.header) != null ? _t : c.name) != null ? _u : c.field
+      header: (_x = (_w = (_v = c.header) != null ? _v : colType.header) != null ? _w : c.name) != null ? _x : c.field
     });
     computedOffset += computedWidth;
     computedVisibleColumnsMap.set(result2.id, result2);
@@ -8845,6 +8905,7 @@ var useComputedVisibleColumns = ({
   pinnedEndMaxWidth,
   pinnedStartMaxWidth,
   viewportReservedWidth,
+  resizableColumns,
   columnVisibility,
   columnVisibilityAssumeVisible,
   columnSizing
@@ -8876,6 +8937,7 @@ var useComputedVisibleColumns = ({
       columnCssEllipsis,
       columnHeaderCssEllipsis,
       viewportReservedWidth,
+      resizableColumns,
       filterValue,
       sortable,
       sortInfo,
@@ -9033,6 +9095,7 @@ function useComputed() {
     pinnedEndMaxWidth: componentState.pinnedEndMaxWidth,
     bodySize,
     viewportReservedWidth: componentState.viewportReservedWidth,
+    resizableColumns: componentState.resizableColumns,
     sortable: componentState.sortable,
     draggableColumns: componentState.draggableColumns,
     sortInfo: (_a = dataSourceState.sortInfo) != null ? _a : void 0,
@@ -9321,7 +9384,7 @@ var useLicense = (licenseKey = "") => {
   const valid = (0, import_react43.useMemo)(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.3.10"
+      version: "0.3.11"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -9544,14 +9607,14 @@ function initSetupState2() {
       scrollTop: 0
     });
   });
-  if (true) {
+  if (false) {
     globalThis.brain = brain;
   }
   const { renderer, onRenderUpdater } = createRenderer2(brain);
   brain.onAvailableSizeChange((size) => {
     headerBrain.setAvailableSize({ width: size.width });
   });
-  if (true) {
+  if (false) {
     globalThis.renderer = renderer;
   }
   return {
@@ -9617,6 +9680,7 @@ var forwardProps3 = (setupState) => {
     scrollStopDelay: (scrollStopDelay) => scrollStopDelay != null ? scrollStopDelay : 250,
     filterEditors: (filterEditors) => __spreadValues(__spreadValues({}, defaultFilterEditors), filterEditors),
     viewportReservedWidth: (viewportReservedWidth) => viewportReservedWidth != null ? viewportReservedWidth : 0,
+    resizableColumns: (resizableColumns) => resizableColumns != null ? resizableColumns : true,
     columnMinWidth: (columnMinWidth) => columnMinWidth != null ? columnMinWidth : 30,
     columnMaxWidth: (columnMaxWidth) => columnMaxWidth != null ? columnMaxWidth : 2e3,
     columnDefaultWidth: (columnDefaultWidth) => columnDefaultWidth != null ? columnDefaultWidth : 200,
@@ -9835,7 +9899,7 @@ function InfiniteTableContextProvider() {
   const computed = useComputed();
   const getComputed = useLatest(computed);
   const getState = useLatest(componentState);
-  if (true) {
+  if (false) {
     globalThis.getState = getState;
     globalThis.getComputed = getComputed;
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@infinite-table/infinite-react",
   "description": "Infinite Table for React",
-  "version": "0.3.10",
+  "version": "0.3.11",
   "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": 1654638457164
+  "publishedAt": 1654702620822
 }