@alaarab/ogrid-react-material 2.0.13 → 2.0.15

package/dist/esm/DataGridTable/DataGridTable.js

@@ -187,7 +187,7 @@ function GridRowInner(props) {
 const GridRow = React.memo(GridRowInner, areGridRowPropsEqual);
 function DataGridTableInner(props) {
     const o = useDataGridTableOrchestration({ props });
-    const { wrapperRef, tableContainerRef, lastMouseShiftRef, interaction, pinning, handleResizeStart, getColumnWidth, isReorderDragging, dropIndicatorX, handleHeaderMouseDown, virtualScrollEnabled, visibleRange, items, getRowId, emptyState, freezeRows, freezeCols, suppressHorizontalScroll, isLoading, loadingMessage, ariaLabel, ariaLabelledBy, columnReorder, density, rowNumberOffset, headerRows, allowOverflowX, fitToContent, editCallbacks, interactionHandlers, cellDescriptorInputRef, pendingEditorValueRef, popoverAnchorElRef, handleSingleRowClick, handlePasteVoid, visibleCols, hasCheckboxCol, hasRowNumbersCol, colOffset, minTableWidth, columnSizingOverrides, selectedRowIds, handleRowCheckboxChange, handleSelectAll, allSelected, someSelected, editingCell, setPopoverAnchorEl, cancelPopoverEdit, setActiveCell, selectionRange, hasCellSelection, handleGridKeyDown, handleFillHandleMouseDown, handleCopy, handleCut, cutRange, copyRange, canUndo, canRedo, onUndo, onRedo, isDragging, menuPosition, closeContextMenu, headerFilterInput, statusBarConfig, showEmptyInGrid, onCellError, } = o;
+    const { wrapperRef, tableContainerRef, lastMouseShiftRef, interaction, pinning, handleResizeStart, getColumnWidth, isReorderDragging, dropIndicatorX, handleHeaderMouseDown, virtualScrollEnabled, visibleRange, items, getRowId, emptyState, freezeRows, freezeCols, suppressHorizontalScroll, isLoading, loadingMessage, ariaLabel, ariaLabelledBy, columnReorder, density, rowNumberOffset, headerRows, allowOverflowX, fitToContent, editCallbacks, interactionHandlers, cellDescriptorInputRef, pendingEditorValueRef, popoverAnchorElRef, handleSingleRowClick, handlePasteVoid, visibleCols, hasCheckboxCol, hasRowNumbersCol, colOffset, minTableWidth, columnSizingOverrides, measuredColumnWidths, selectedRowIds, handleRowCheckboxChange, handleSelectAll, allSelected, someSelected, editingCell, setPopoverAnchorEl, cancelPopoverEdit, setActiveCell, selectionRange, hasCellSelection, handleGridKeyDown, handleFillHandleMouseDown, handleCopy, handleCut, cutRange, copyRange, canUndo, canRedo, onUndo, onRedo, isDragging, menuPosition, closeContextMenu, headerFilterInput, statusBarConfig, showEmptyInGrid, onCellError, } = o;
     // Density-aware cell padding
     const densityPadding = useMemo(() => getDensityPadding(density), [density]);
     const _cellSx = useMemo(() => ({ ...CELL_CONTENT_BASE_SX, ...densityPadding }), [densityPadding]);
@@ -206,8 +206,13 @@ function DataGridTableInner(props) {
                 ? { ...baseTdSx, right: pinning.rightOffsets[col.columnId] }
                 : baseTdSx;
         const hasResizeOverride = !!columnSizingOverrides[col.columnId];
-        return { col, tdSx, minWidth: hasResizeOverride ? columnWidth : (col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH), width: columnWidth, maxWidth: columnWidth };
-    }), [visibleCols, freezeCols, getColumnWidth, columnSizingOverrides, pinning.pinnedColumns, pinning.leftOffsets, pinning.rightOffsets]);
+        // Use previously-measured DOM width as a minWidth floor to prevent columns
+        // from shrinking when new data loads (e.g. server-side pagination).
+        const measuredW = measuredColumnWidths[col.columnId];
+        const baseMinWidth = col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
+        const effectiveMinWidth = hasResizeOverride ? columnWidth : Math.max(baseMinWidth, measuredW ?? 0);
+        return { col, tdSx, minWidth: effectiveMinWidth, width: columnWidth, maxWidth: columnWidth };
+    }), [visibleCols, freezeCols, getColumnWidth, columnSizingOverrides, measuredColumnWidths, pinning.pinnedColumns, pinning.leftOffsets, pinning.rightOffsets]);
     // Wrapper sx (depends on dynamic values — memoize to avoid recreation)
     const wrapperSx = useMemo(() => ({
         position: 'relative',
@@ -313,7 +318,7 @@ function DataGridTableInner(props) {
                                                                     sx: {
                                                                         ...headerSx,
                                                                         ...headerCellSx,
-                                                                        minWidth: col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH,
+                                                                        minWidth: Math.max(col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH, measuredColumnWidths[col.columnId] ?? 0),
                                                                         width: columnWidth,
                                                                         maxWidth: columnWidth,
                                                                         ...(columnReorder ? { cursor: isReorderDragging ? 'grabbing' : 'grab' } : {}),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-react-material",
-  "version": "2.0.13",
+  "version": "2.0.15",
   "description": "OGrid React Material implementation – MUI Table–based data grid with sorting, filtering, pagination, column chooser, spreadsheet selection, and CSV export.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -39,7 +39,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-react": "2.0.13"
+    "@alaarab/ogrid-react": "2.0.15"
   },
   "peerDependencies": {
     "@emotion/react": "^11.0.0",