@bit.rhplus/ui.grid-layout 0.0.5 → 0.0.6

package/useGridLayout.js

@@ -19,7 +19,7 @@ import { debounce } from 'lodash';
  * @param {string} [config.filterName] - Název filtru (volitelné)
  * @param {boolean} [config.enabled=true] - Zapnout/vypnout layout management
  * @param {boolean} [config.autoSave=true] - Automatické ukládání při změnách
- * @param {number} [config.autoSaveDelay=2000] - Zpoždění auto-save v ms
+ * @param {number} [config.autoSaveDelay=500] - Zpoždění auto-save v ms
  * @param {Array} config.columnDefs - AG-Grid column definitions
  * @param {string} [config.accessToken] - Přístupový token
  * @param {boolean} [config.waitForSavedFields=false] - Skrýt columnDefs dokud nejsou načtena savedFields
@@ -35,7 +35,7 @@ export const useGridLayout = ({
   filterName,
   enabled = true,
   autoSave = true,
-  autoSaveDelay = 2000,
+  autoSaveDelay = 500,
   columnDefs = [],
   accessToken,
   waitForSavedFields = false, // Nový prop pro odložené zobrazení columnDefs
@@ -61,6 +61,8 @@ export const useGridLayout = ({
   // Refs pro AG-Grid API
   const gridApiRef = useRef(null);
   const columnApiRef = useRef(null);
+  // Ref mapa pro ukládání aktuálních šířek sloupců (fieldId -> šířka)
+  const columnWidthRefsMap = useRef(new Map());
 
   // State
   const [isInitialized, setIsInitialized] = useState(false);
@@ -72,18 +74,8 @@ export const useGridLayout = ({
   const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
   const [isColumnEditorOpen, setIsColumnEditorOpen] = useState(false);
   const [lastKnownColumnState, setLastKnownColumnState] = useState(null);
-  // Místo version counter použijeme stabilnější mechanismus pro tracking změn
-  const [lastColumnDefsHash, setLastColumnDefsHash] = useState('');
+  const [columnWidthsVersion, setColumnWidthsVersion] = useState(0); // Pro trigger preTransformedColumnDefs
 
-  // Utility funkce pro generování hash z columnDefs
-  const generateColumnDefsHash = useCallback((colDefs) => {
-    if (!Array.isArray(colDefs)) return '';
-    
-    // Vytvoříme hash z klíčových vlastností které ovlivňují rendering
-    return colDefs.map(col => 
-      `${col.field || col.colId}:${col.width || 'auto'}:${col.hide ? 'hidden' : 'visible'}:${col.headerName || ''}`
-    ).join('|');
-  }, []);
 
 
   // Grid Layout API hook
@@ -124,123 +116,6 @@ export const useGridLayout = ({
     }
   );
 
-  // // Bezpečné aktualizování lastKnownColumnState při otevření editoru
-  // useEffect(() => {
-  //   if (isColumnEditorOpen && columnApiRef.current && typeof columnApiRef.current.getColumnState === 'function') {
-  //     try {
-  //       const currentState = columnApiRef.current.getColumnState();
-  //       if (Array.isArray(currentState) && currentState.length > 0) {
-  //         // Aktualizujeme lastKnownColumnState po otevření editoru
-  //         const validColumnDefs = Array.isArray(columnDefs) ? columnDefs : [];
-  //         const formattedState = currentState.map((columnStateItem, index) => {
-  //           const colDef = validColumnDefs.find(cd => cd.field === columnStateItem.colId) || {};
-  //           const savedField = savedFields?.records?.find(sf => sf.fieldName === columnStateItem.colId);
-
-  //           return {
-  //             id: columnStateItem.colId,
-  //             field: columnStateItem.colId,
-  //             headerName: savedField?.headerName || colDef.headerName || columnStateItem.colId,
-  //             originalHeaderName: colDef.headerName || columnStateItem.colId,
-  //             width: columnStateItem.width || colDef.width || 100,
-  //             originalWidth: colDef.width || 100,
-  //             visible: !columnStateItem.hide,
-  //             order: index
-  //           };
-  //         });
-
-  //         setLastKnownColumnState(formattedState);
-  //         console.log('[GridLayout] Updated lastKnownColumnState after opening editor');
-  //       }
-  //     } catch (error) {
-  //       console.error('[GridLayout] Error updating column state after opening editor:', error);
-  //     }
-  //   }
-  // }, [isColumnEditorOpen, columnDefs, savedFields, columnApiRef]);
-
-  // MutationObserver pro sledování změn v DOM a okamžitou aktualizaci headerName
-  // useEffect(() => {
-  //   if (!savedFields?.records || !isInitialized || !enabled) return;
-
-  //   // Reference na observer pro cleanup
-  //   let observer = null;
-
-  //   try {
-  //     console.log('[GridLayout] Setting up MutationObserver for header changes');
-
-  //     // Funkce pro aktualizaci headerName
-  //     const updateHeaderNames = () => {
-  //       try {
-  //         // Vytvoříme mapu fieldName -> headerName z API dat
-  //         const headerNameMap = new Map();
-  //         savedFields.records.forEach(field => {
-  //           if (field.fieldName && field.headerName) {
-  //             headerNameMap.set(field.fieldName, field.headerName);
-  //           }
-  //         });
-
-  //         // Najdeme všechny hlavičky sloupců v DOM
-  //         const headerCells = document.querySelectorAll('.ag-header-cell');
-
-  //         // Aktualizujeme texty hlaviček
-  //         headerCells.forEach(headerCell => {
-  //           try {
-  //             // Získáme ID sloupce z DOM atributů
-  //             const colId = headerCell.getAttribute('col-id');
-  //             if (colId && headerNameMap.has(colId)) {
-  //               // Najdeme element s textem hlavičky
-  //               const headerTextEl = headerCell.querySelector('.ag-header-cell-text');
-  //               if (headerTextEl) {
-  //                 const newHeaderName = headerNameMap.get(colId);
-  //                 const currentText = headerTextEl.textContent;
-  //                 if (currentText !== newHeaderName) {
-  //                   console.log(`[GridLayout] MutationObserver update: Column '${colId}' header from '${currentText}' to '${newHeaderName}'`);
-  //                   headerTextEl.textContent = newHeaderName;
-  //                 }
-  //               }
-  //             }
-  //           } catch (cellError) {
-  //             // Tiché selhání - nechceme, aby MutationObserver padal
-  //           }
-  //         });
-  //       } catch (error) {
-  //         // Tiché selhání - nechceme, aby MutationObserver padal
-  //       }
-  //     };
-
-  //     // Najdeme element hlavičky
-  //     const headerElement = document.querySelector('.ag-header');
-  //     if (headerElement) {
-  //       // Vytvoříme observer, který bude sledovat změny v hlavičce
-  //       observer = new MutationObserver((mutations) => {
-  //         // Detekovali jsme změnu v DOM hlavičky, aktualizujeme headerName
-  //         updateHeaderNames();
-  //       });
-
-  //       // Začneme sledovat změny v hlavičce
-  //       observer.observe(headerElement, {
-  //         childList: true, // sledujeme přidání/odebírání elementů
-  //         subtree: true,    // sledujeme změny i v potomcích
-  //         characterData: true, // sledujeme změny textu
-  //         attributeFilter: ['col-id', 'class'] // sledujeme změny těchto atributů
-  //       });
-
-  //       console.log('[GridLayout] MutationObserver set up successfully');
-  //     } else {
-  //       console.log('[GridLayout] Header element not found for MutationObserver');
-  //     }
-  //   } catch (error) {
-  //     console.error('[GridLayout] Error setting up MutationObserver:', error);
-  //   }
-
-  //   // Cleanup - odpojit observer při unmount
-  //   return () => {
-  //     if (observer) {
-  //       observer.disconnect();
-  //       console.log('[GridLayout] MutationObserver disconnected');
-  //     }
-  //   };
-  // }, [savedFields, isInitialized, enabled]);
-
   /**
    * Error handler
    */
@@ -263,45 +138,39 @@ export const useGridLayout = ({
   // Reference pro ukládání stavu sloupců bez state update v render cyklu
   const stableCurrentColumnsRef = useRef(null);
 
-  // Aktualizujeme ref hodnoty
+  // Jednoduchá aktualizace ref hodnot - BEZ aktualizace columnDefs
   useEffect(() => {
-    let updatedColumnDefs = columnDefs;
-
-    // Pro columnDefs zachováváme aktualizované šířky pokud už existují
-    if (stableColumnDefsRef.current && Array.isArray(stableColumnDefsRef.current) && Array.isArray(columnDefs)) {
-      // Vytvoříme mapu existujících šířek
-      const existingWidthsMap = new Map();
-      stableColumnDefsRef.current.forEach(colDef => {
-        const fieldId = colDef.field || colDef.colId;
-        if (fieldId && colDef.width) {
-          existingWidthsMap.set(fieldId, colDef.width);
-        }
-      });
-
-      // Aktualizujeme columnDefs s existujícími šířkami
-      updatedColumnDefs = columnDefs.map(colDef => {
-        const fieldId = colDef.field || colDef.colId;
-        if (fieldId && existingWidthsMap.has(fieldId)) {
-          return {
-            ...colDef,
-            width: existingWidthsMap.get(fieldId)
-          };
-        }
-        return colDef;
-      });
-    }
-    
-    // Zkontrolujeme zda se columnDefs skutečně změnily pomocí hash
-    const newHash = generateColumnDefsHash(updatedColumnDefs);
-    if (newHash !== lastColumnDefsHash) {
-      stableColumnDefsRef.current = updatedColumnDefs;
-      setLastColumnDefsHash(newHash);
+    // Při změně columnDefs vyčistíme columnWidthRefsMap a přeneseme existující šířky
+    if (columnDefs !== stableColumnDefsRef.current) {
+      const newWidthMap = new Map();
+      
+      // Zachováme šířky pro sloupce, které stále existují
+      if (Array.isArray(columnDefs)) {
+        columnDefs.forEach(colDef => {
+          const fieldId = colDef.field || colDef.colId;
+          if (fieldId) {
+            // Zkusíme najít existující šířku v ref map
+            const existingWidth = columnWidthRefsMap.current.get(fieldId);
+            if (existingWidth !== undefined) {
+              newWidthMap.set(fieldId, existingWidth);
+            } else if (colDef.width) {
+              // Použijeme šířku z nového columnDef
+              newWidthMap.set(fieldId, colDef.width);
+            }
+          }
+        });
+      }
+      
+      columnWidthRefsMap.current = newWidthMap;
+      console.log('[GridLayout] Cleanup columnWidthRefsMap při změně columnDefs:', Object.fromEntries(newWidthMap));
+      setColumnWidthsVersion(prev => prev + 1); // Trigger preTransformedColumnDefs přepočet
     }
-    
+
+    stableColumnDefsRef.current = columnDefs;
     stableGridLayoutApiRef.current = gridLayoutApi;
     stableOnLayoutSavedRef.current = onLayoutSaved;
     stableHandleErrorRef.current = handleError;
-  });
+  }, [columnDefs, gridLayoutApi, onLayoutSaved, handleError]);
 
   // Efekt pro bezpečnou aktualizaci lastKnownColumnState z ref
   // useEffect(() => {
@@ -317,8 +186,6 @@ export const useGridLayout = ({
    * Uloží současný stav sloupců do API
    */
   const saveCurrentLayout = useCallback(async () => {
-
-
     if (!enabled || !gridApiRef.current) {
       return;
     }
@@ -628,6 +495,16 @@ export const useGridLayout = ({
         );
 
         if (columnState && columnState.length > 0) {
+          // Při prvotním načítání inicializujeme ref mapu s API šířkami
+          if (!isInitialized) {
+            columnState.forEach(colState => {
+              if (colState.colId && colState.width) {
+                columnWidthRefsMap.current.set(colState.colId, colState.width);
+              }
+            });
+            console.log('[GridLayout] Inicializace columnWidthRefsMap z API:', Object.fromEntries(columnWidthRefsMap.current));
+          }
+          
           // Pokud je waitForSavedFields true, columnDefs jsou už pre-transformované,
           // takže aplikujeme jen width a hide vlastnosti bez delay pro pořadí
           const applyFunction = () => {
@@ -637,32 +514,29 @@ export const useGridLayout = ({
               try {
                 const applyOrderEnabled = !waitForSavedFields; // Při waitForSavedFields už je pořadí v columnDefs
 
-                // Při prvotním načtení (isInitialized=false) používáme přímo columnState z API
-                // Při následných aplikováních zachováváme aktuální šířky z gridu
-                let adjustedColumnState = columnState;
-                
-                if (isInitialized) {
-                  // Pouze pokud už je grid inicializován, zachováváme současné šířky
-                  const currentColumnState = gridApiRef.current?.getColumnState?.() || [];
-                  const currentWidthMap = new Map();
-                  currentColumnState.forEach(colState => {
-                    if (colState.colId && colState.width) {
-                      currentWidthMap.set(colState.colId, colState.width);
-                    }
-                  });
+                // Upravíme columnState s aktuálními šířkami z ref map
+                // POUZE pokud ref mapa obsahuje hodnoty (tj. uživatel už manipuloval s šířkami)
+                // Při prvotním načítání z API zachováme API šířky
+                let adjustedColumnState = columnState.map(colState => {
+                  // Zkontrolujeme, zda máme ref hodnotu pro tento sloupec
+                  const refWidth = columnWidthRefsMap.current.get(colState.colId);
+                  // Použijeme ref hodnotu POUZE pokud existuje A není to prvotní načítání
+                  if (refWidth !== undefined && isInitialized) {
+                    return {
+                      ...colState,
+                      width: refWidth
+                    };
+                  }
+                  // Při prvotním načítání nebo pokud nemáme ref hodnotu, zachováme API šířku
+                  return colState;
+                });
 
-                  // Upravíme columnState tak, aby zachoval aktuální šířky pokud existují
-                  adjustedColumnState = columnState.map(colState => {
-                    const currentWidth = currentWidthMap.get(colState.colId);
-                    if (currentWidth && currentWidth !== colState.width) {
-                      return {
-                        ...colState,
-                        width: currentWidth
-                      };
-                    }
-                    return colState;
-                  });
-                }
+                console.log('[GridLayout] Aplikování column state s ref šířkami:', { 
+                  columnStateLength: adjustedColumnState?.length, 
+                  applyOrderEnabled,
+                  firstColumnWidth: adjustedColumnState?.[0]?.width,
+                  refWidthsCount: columnWidthRefsMap.current.size
+                });
 
                 result = applyColumnStateApi.applyColumnState({
                   state: adjustedColumnState,
@@ -675,6 +549,8 @@ export const useGridLayout = ({
                   },
                 });
 
+                console.log('[GridLayout] Column state aplikován úspěšně');
+
                 // Explicitně aktualizujeme headerName pro každý sloupec, protože AG-Grid
                 // nepodporuje nastavení headerName přes applyColumnState
                 if (
@@ -740,8 +616,13 @@ export const useGridLayout = ({
                         // Pro jistotu zkontrolujeme, zda byly změny aplikovány
                         setTimeout(() => {
                           try {
-                            const afterUpdateColDefs =
-                              gridApiRef.current.getColumnDefs();
+                            const afterUpdateColDefs = gridApiRef.current.getColumnDefs();
+                            const afterUpdateColumnState = gridApiRef.current.getColumnState?.() || [];
+                            
+                            console.log('[GridLayout] Po aplikování - kontrola šířek:', {
+                              columnCount: afterUpdateColumnState.length,
+                              widths: afterUpdateColumnState.map(col => ({ field: col.colId, width: col.width }))
+                            });
                             
                             // DOM operace dokončeny, můžeme ukončit loading
                             setIsApplyingLayout(false);
@@ -909,42 +790,27 @@ export const useGridLayout = ({
 
     setHasUnsavedChanges(true);
 
-    // Aktualizujeme šířky sloupců v columnDefs před uložením
+    // Okamžitě uložit aktuální šířky sloupců do ref map (podobně jako v handleColumnResized)
     try {
       if (gridApiRef.current && typeof gridApiRef.current.getColumnState === 'function') {
         const currentColumnState = gridApiRef.current.getColumnState();
         
         if (currentColumnState && Array.isArray(currentColumnState)) {
-          // Aktualizujeme šířky v původních columnDefs
-          const widthUpdatesMap = new Map();
+          // Uložit šířky do ref map pro každý sloupec
           currentColumnState.forEach(colState => {
             if (colState.colId && colState.width) {
-              widthUpdatesMap.set(colState.colId, colState.width);
+              columnWidthRefsMap.current.set(colState.colId, colState.width);
             }
           });
           
-          // Aktualizujeme stableColumnDefsRef s novými šířkami
-          if (stableColumnDefsRef.current && Array.isArray(stableColumnDefsRef.current)) {
-            const updatedColumnDefs = stableColumnDefsRef.current.map(colDef => {
-              const fieldId = colDef.field || colDef.colId;
-              if (fieldId && widthUpdatesMap.has(fieldId)) {
-                return {
-                  ...colDef,
-                  width: widthUpdatesMap.get(fieldId)
-                };
-              }
-              return colDef;
-            });
-            stableColumnDefsRef.current = updatedColumnDefs;
-            // Hash se aktualizuje automaticky v hlavním useEffect
-          }
+          console.log('[GridLayout] Updated columnWidthRefsMap in dragStopped:', Object.fromEntries(columnWidthRefsMap.current));
+          setColumnWidthsVersion(prev => prev + 1); // Trigger preTransformedColumnDefs přepočet
         }
       }
     } catch (error) {
-      console.error('[GridLayout] Error updating columnDefs widths in handleDragStopped:', error);
+      console.error('[GridLayout] Error updating columnWidthRefsMap in handleDragStopped:', error);
     }
 
-
     // Pokud ještě není inicializované, přidáme akci do pending
     if (!isInitialized && autoSave) {
       setPendingActions((prev) => [
@@ -954,50 +820,66 @@ export const useGridLayout = ({
       return;
     }
 
-    // Normální proces pokud je vše inicializované
     if (autoSave && debouncedSave) {
       debouncedSave();
-    } else {
     }
   }, [enabled, isGridReady, isInitialized, autoSave, debouncedSave]);
 
+  // Handler pro PRŮBĚŽNÉ resize - ukládá šířky během resize operace
+  const handleColumnResizing = useCallback(() => {
+    if (!enabled || !isGridReady) return;
+
+    // Okamžitě uložit aktuální šířky sloupců do ref map BĚHEM resize operace
+    try {
+      if (gridApiRef.current && typeof gridApiRef.current.getColumnState === 'function') {
+        const currentColumnState = gridApiRef.current.getColumnState();
+        
+        if (currentColumnState && Array.isArray(currentColumnState)) {
+          // Uložit šířky do ref map pro každý sloupec
+          currentColumnState.forEach(colState => {
+            if (colState.colId && colState.width) {
+              columnWidthRefsMap.current.set(colState.colId, colState.width);
+            }
+          });
+          
+          // Log pouze při výrazných změnách pro omezení logů
+          if (Math.random() < 0.1) { // 10% šance na log
+            console.log('[GridLayout] Updating columnWidthRefsMap during resize:', Object.fromEntries(columnWidthRefsMap.current));
+          }
+          setColumnWidthsVersion(prev => prev + 1); // Trigger preTransformedColumnDefs přepočet
+        }
+      }
+    } catch (error) {
+      console.error('[GridLayout] Error updating columnWidthRefsMap in handleColumnResizing:', error);
+    }
+
+    // NEPOUŽÍVÁME setHasUnsavedChanges zde - to až v handleColumnResized
+  }, [enabled, isGridReady]);
+
+  // Handler pro DOKONČENÍ resize - spouští auto-save
   const handleColumnResized = useCallback(() => {
     if (!enabled || !isGridReady) return;
     setHasUnsavedChanges(true);
 
-    // Aktualizujeme šířky sloupců v columnDefs při resize
+    // Ještě jednou uložit aktuální šířky sloupců do ref map (pro jistotu)
     try {
       if (gridApiRef.current && typeof gridApiRef.current.getColumnState === 'function') {
         const currentColumnState = gridApiRef.current.getColumnState();
         
         if (currentColumnState && Array.isArray(currentColumnState)) {
-          // Aktualizujeme šířky v původních columnDefs
-          const widthUpdatesMap = new Map();
+          // Uložit šířky do ref map pro každý sloupec
           currentColumnState.forEach(colState => {
             if (colState.colId && colState.width) {
-              widthUpdatesMap.set(colState.colId, colState.width);
+              columnWidthRefsMap.current.set(colState.colId, colState.width);
             }
           });
           
-          // Aktualizujeme stableColumnDefsRef s novými šířkami
-          if (stableColumnDefsRef.current && Array.isArray(stableColumnDefsRef.current)) {
-            const updatedColumnDefs = stableColumnDefsRef.current.map(colDef => {
-              const fieldId = colDef.field || colDef.colId;
-              if (fieldId && widthUpdatesMap.has(fieldId)) {
-                return {
-                  ...colDef,
-                  width: widthUpdatesMap.get(fieldId)
-                };
-              }
-              return colDef;
-            });
-            stableColumnDefsRef.current = updatedColumnDefs;
-            // Hash se aktualizuje automaticky v hlavním useEffect
-          }
+          console.log('[GridLayout] Final columnWidthRefsMap after resize:', Object.fromEntries(columnWidthRefsMap.current));
+          setColumnWidthsVersion(prev => prev + 1); // Trigger preTransformedColumnDefs přepočet
         }
       }
     } catch (error) {
-      console.error('[GridLayout] Error updating columnDefs widths in handleColumnResized:', error);
+      console.error('[GridLayout] Error updating columnWidthRefsMap in handleColumnResized:', error);
     }
 
     if (autoSave && isInitialized && debouncedSave) {
@@ -1048,166 +930,21 @@ export const useGridLayout = ({
    */
   useEffect(() => {
     // Aplikujeme layout pokud:
-    // 1. Máme savedFields z API
-    // 2. Grid je ready (má API reference)  
+    // 1. Máme savedFields z API (i když prázdné - první zobrazení modulu)
+    // 2. Grid je ready (má API references)  
     // 3. Ještě jsme neinicializovali layout
-    if (savedFields?.records && savedFields.records.length > 0 && gridApiRef.current && !isInitialized) {
-      applySavedLayout();
+    if (savedFields?.records !== undefined && gridApiRef.current && !isInitialized) {
+      if (savedFields.records.length > 0) {
+        applySavedLayout();
+      } else {
+        // Pro prázdné savedFields jen nastavíme inicializaci
+        setIsInitialized(true);
+        setIsGridReady(true);
+      }
     }
   }, [savedFields?.records, isInitialized, applySavedLayout]);
 
-  /**
-   * Původní zakomentovaný effect pro aplikování layoutu když se načtou data
-   */
-  // useEffect(() => {
-  //   if (savedFields?.records && columnApiRef.current && !isInitialized) {
-  //     console.log('[GridLayout] Layout will be applied from effect');
-  //     applySavedLayout();
-  //   } else if (savedFields?.records && columnApiRef.current && isInitialized) {
-  //     // Pokud je již inicializován, ale přišla nová data, aktualizujeme jen DOM (ne celý layout)
-  //     console.log('[GridLayout] Already initialized, but received new data - updating headers directly');
-
-  //     // Počkáme moment, než se nová data zpracují, a pak aktualizujeme headerName
-  //     setTimeout(() => {
-  //       try {
-  //         // Vytvoříme mapu fieldName -> headerName z API dat
-  //         const headerNameMap = new Map();
-  //         savedFields.records.forEach(field => {
-  //           if (field.fieldName && field.headerName) {
-  //             headerNameMap.set(field.fieldName, field.headerName);
-  //             console.log(`[GridLayout] Update after reload: '${field.fieldName}' -> '${field.headerName}'`);
-  //           }
-  //         });
-
-  //         // Najdeme všechny hlavičky sloupců v DOM
-  //         const headerCells = document.querySelectorAll('.ag-header-cell');
-  //         console.log('[GridLayout] Found header cells after reload:', headerCells.length);
-
-  //         // Aktualizujeme texty hlaviček
-  //         headerCells.forEach(headerCell => {
-  //           try {
-  //             // Získáme ID sloupce z DOM atributů
-  //             const colId = headerCell.getAttribute('col-id');
-  //             if (colId && headerNameMap.has(colId)) {
-  //               // Najdeme element s textem hlavičky
-  //               const headerTextEl = headerCell.querySelector('.ag-header-cell-text');
-  //               if (headerTextEl) {
-  //                 const newHeaderName = headerNameMap.get(colId);
-  //                 const currentText = headerTextEl.textContent;
-  //                 console.log(`[GridLayout] DOM update after reload: Column '${colId}' header from '${currentText}' to '${newHeaderName}'`);
-  //                 headerTextEl.textContent = newHeaderName;
-  //               }
-  //             }
-  //           } catch (cellError) {
-  //             console.error('[GridLayout] Error updating header cell after reload:', cellError);
-  //           }
-  //         });
-
-  //         // Zkusíme vynutit překreslení hlavičky
-  //         if (typeof gridApiRef.current.refreshHeader === 'function') {
-  //           console.log('[GridLayout] Forcing header refresh after reload');
-  //           gridApiRef.current.refreshHeader();
-  //         }
-  //       } catch (error) {
-  //         console.error('[GridLayout] Error updating headers after reload:', error);
-  //       }
-  //     }, 200);
-  //   }
-  // }, [savedFields, applySavedLayout, isInitialized, columnApiRef]);
-
-  /**
-   * Alternativní metoda pro aktualizaci headerName po inicializaci gridu
-   */
-  // useEffect(() => {
-  //   // Pokud již proběhla inicializace a máme uložená data z API
-  //   if (isInitialized && savedFields?.records && gridApiRef.current) {
-  //     console.log('[GridLayout] Attempting alternative header update after initialization');
-
-  //     // Zkusíme použít metodu columnDefHeaderNameChanged, pokud je dostupná
-  //     try {
-  //       if (typeof gridApiRef.current.columnDefHeaderNameChanged === 'function') {
-  //         console.log('[GridLayout] Trying columnDefHeaderNameChanged method');
-
-  //         // Vytvoříme mapu fieldName -> headerName z API dat
-  //         const headerNameMap = new Map();
-  //         savedFields.records.forEach(field => {
-  //           if (field.fieldName && field.headerName) {
-  //             headerNameMap.set(field.fieldName, field.headerName);
-  //           }
-  //         });
-
-  //         // Získáme aktuální definice sloupců
-  //         const currentColumnDefs = gridApiRef.current.getColumnDefs();
-  //         if (currentColumnDefs && Array.isArray(currentColumnDefs)) {
-  //           currentColumnDefs.forEach(colDef => {
-  //             if (colDef.field && headerNameMap.has(colDef.field)) {
-  //               const newHeaderName = headerNameMap.get(colDef.field);
-  //               if (colDef.headerName !== newHeaderName) {
-  //                 console.log(`[GridLayout] Using columnDefHeaderNameChanged for '${colDef.field}': '${colDef.headerName}' -> '${newHeaderName}'`);
-  //                 colDef.headerName = newHeaderName;
-  //                 gridApiRef.current.columnDefHeaderNameChanged(colDef);
-  //               }
-  //             }
-  //           });
-  //         }
-  //       }
-  //     } catch (error) {
-  //       console.error('[GridLayout] Error using columnDefHeaderNameChanged:', error);
-  //     }
-
-  //     // Počkáme chvíli, aby se grid stihl plně vyrenderovat
-  //     setTimeout(() => {
-  //       try {
-  //         // Získáme aktuální definice sloupců z gridu
-  //         const currentColDefs = gridApiRef.current.getColumnDefs ? gridApiRef.current.getColumnDefs() : null;
-
-  //         if (currentColDefs && Array.isArray(currentColDefs)) {
-  //           // Vytvoříme mapu fieldName -> headerName z API dat
-  //           const headerNameMap = new Map();
-  //           savedFields.records.forEach(field => {
-  //             if (field.fieldName && field.headerName) {
-  //               headerNameMap.set(field.fieldName, field.headerName);
-  //             }
-  //           });
-
-  //           // Zkontrolujeme, zda je třeba aktualizovat nějaké headery
-  //           let needsUpdate = false;
-  //           const updatedColDefs = currentColDefs.map(colDef => {
-  //             const fieldName = colDef.field;
-  //             if (fieldName && headerNameMap.has(fieldName)) {
-  //               const newHeaderName = headerNameMap.get(fieldName);
-  //               if (colDef.headerName !== newHeaderName) {
-  //                 needsUpdate = true;
-  //                 console.log(`[GridLayout] Alternative update: Column '${fieldName}' header from '${colDef.headerName}' to '${newHeaderName}'`);
-  //                 return {
-  //                   ...colDef,
-  //                   headerName: newHeaderName
-  //                 };
-  //               }
-  //             }
-  //             return colDef;
-  //           });
-
-  //           if (needsUpdate && typeof gridApiRef.current.setColumnDefs === 'function') {
-  //             console.log('[GridLayout] Applying alternative column header update');
-  //             gridApiRef.current.setColumnDefs(updatedColDefs);
-
-  //             // Zkusíme vynutit překreslení hlavičky
-  //             setTimeout(() => {
-  //               if (typeof gridApiRef.current.refreshHeader === 'function') {
-  //                 console.log('[GridLayout] Forcing header refresh');
-  //                 gridApiRef.current.refreshHeader();
-  //               }
-  //             }, 50);
-  //           }
-  //         }
-  //       } catch (error) {
-  //         console.error('[GridLayout] Error in alternative header update:', error);
-  //       }
-  //     }, 300);
-  //   }
-  // }, [isInitialized, savedFields, gridApiRef]);
-
+  
   /**
    * Effect pro error handling
    */
@@ -1589,7 +1326,7 @@ export const useGridLayout = ({
   // DŮLEŽITÉ: Toto useMemo nyní obsahuje i AgGridColumns transformaci pro eliminaci circular dependency
   const preTransformedColumnDefs = useMemo(() => {
     // Použijeme aktualizované columnDefs ze stableColumnDefsRef pokud existují
-    const columnDefsToUse = stableColumnDefsRef.current || columnDefs;
+    const columnDefsToUse = stableColumnDefsRef.current; // || columnDefs; //HLO
     
     let baseColumnDefs = columnDefsToUse;
 
@@ -1637,7 +1374,7 @@ export const useGridLayout = ({
             const fieldId = colDef.field || colDef.colId;
             const columnStateItem = columnStateMap.get(fieldId);
             
-            // Aplikujeme pouze headerName a hide z API (width se aplikuje až v applySavedLayout)
+            // Aplikujeme headerName, hide i width z API pro waitForSavedFields režim
             if (fieldId && (headerNameMap.has(fieldId) || columnStateItem)) {
               return {
                 ...colDef,
@@ -1645,7 +1382,8 @@ export const useGridLayout = ({
                 ...(headerNameMap.has(fieldId) && { headerName: headerNameMap.get(fieldId) }),
                 // Aplikujeme hide hodnotu z columnState (z API show hodnoty)
                 ...(columnStateItem && { hide: columnStateItem.hide }),
-                // Width se neaplikuje zde - aplikuje se až v applySavedLayout pro eliminaci konfliktu s resize
+                // Aplikujeme také width pro konzistentní zobrazení
+                ...(columnStateItem && columnStateItem.width && { width: columnStateItem.width }),
               };
             }
             return colDef;
@@ -1664,7 +1402,23 @@ export const useGridLayout = ({
       }
     }
 
-    return baseColumnDefs;
+    // Aplikujeme ref šířky jako poslední krok POUZE pokud už byla provedena inicializace
+    // Při prvotním načítání zachováváme API šířky (které jsou už v baseColumnDefs pro waitForSavedFields)
+    const finalColumnDefs = baseColumnDefs.map(colDef => {
+      const fieldId = colDef.field || colDef.colId;
+      const refWidth = columnWidthRefsMap.current.get(fieldId);
+      
+      // Použijeme ref šířku POUZE pokud už je grid inicializovaný (uživatel manipuloval s šířkami)
+      if (refWidth !== undefined && isInitialized) {
+        return {
+          ...colDef,
+          width: refWidth
+        };
+      }
+      return colDef;
+    });
+
+    return finalColumnDefs;
 
     // // Replikujeme AgGridColumns logiku pro všechny column definitions:
     // const processedColumns = baseColumnDefs?.map((column) => {
@@ -1687,62 +1441,9 @@ export const useGridLayout = ({
     // }) || [];
 
     // return processedColumns;
-  }, [waitForSavedFields, savedFields?.records, columnDefs, gridLayoutApi, lastColumnDefsHash]);
-
-  /**
-   * Handler pro změnu zobrazených dat - aktualizace headerName
-   */
-  const handleRowDataChanged = useCallback(
-    (params) => {
-      // if (!enabled || !savedFields?.records || !isInitialized) return;
-      // console.log('[GridLayout] Row data changed - ensuring header names stay updated');
-      // // Počkáme chvíli, až se vše vyrenderuje, a pak aktualizujeme headerName
-      // setTimeout(() => {
-      //   try {
-      //     // Vytvoříme mapu fieldName -> headerName z API dat
-      //     const headerNameMap = new Map();
-      //     savedFields.records.forEach(field => {
-      //       if (field.fieldName && field.headerName) {
-      //         headerNameMap.set(field.fieldName, field.headerName);
-      //       }
-      //     });
-      //     // Najdeme všechny hlavičky sloupců v DOM
-      //     const headerCells = document.querySelectorAll('.ag-header-cell');
-      //     console.log('[GridLayout] Found header cells after data change:', headerCells.length);
-      //     // Aktualizujeme texty hlaviček
-      //     headerCells.forEach(headerCell => {
-      //       try {
-      //         // Získáme ID sloupce z DOM atributů
-      //         const colId = headerCell.getAttribute('col-id');
-      //         if (colId && headerNameMap.has(colId)) {
-      //           // Najdeme element s textem hlavičky
-      //           const headerTextEl = headerCell.querySelector('.ag-header-cell-text');
-      //           if (headerTextEl) {
-      //             const newHeaderName = headerNameMap.get(colId);
-      //             const currentText = headerTextEl.textContent;
-      //             if (currentText !== newHeaderName) {
-      //               console.log(`[GridLayout] Data change update: Column '${colId}' header from '${currentText}' to '${newHeaderName}'`);
-      //               headerTextEl.textContent = newHeaderName;
-      //             }
-      //           }
-      //         }
-      //       } catch (cellError) {
-      //         console.error('[GridLayout] Error updating header cell after data change:', cellError);
-      //       }
-      //     });
-      //     // Zkusíme vynutit překreslení hlavičky
-      //     if (typeof gridApiRef.current.refreshHeader === 'function') {
-      //       console.log('[GridLayout] Forcing header refresh after data change');
-      //       gridApiRef.current.refreshHeader();
-      //     }
-      //   } catch (error) {
-      //     console.error('[GridLayout] Error updating headers after data change:', error);
-      //   }
-      // }, 100);
-    },
-    [enabled, savedFields, isInitialized]
-  );
+  }, [waitForSavedFields, savedFields?.records, columnDefs, gridLayoutApi, columnWidthsVersion, isInitialized]);
 
+  console.log("rerender");
   return {
     // State
     isLoading: isLoading || isFieldsLoading,
@@ -1759,10 +1460,11 @@ export const useGridLayout = ({
     onGridReady: handleGridReady,
     onColumnMoved: handleColumnMoved,
     onDragStopped: handleDragStopped, // Nový handler pro konec drag operace
+    onColumnResizing: handleColumnResizing, // NOVÝ handler pro průběžné resize
     onColumnResized: handleColumnResized,
     onColumnVisible: handleColumnVisible,
     onColumnPinned: handleColumnPinned,
-    onRowDataChanged: handleRowDataChanged, // Nový handler pro změnu dat
+    // onRowDataChanged: handleRowDataChanged, // Nový handler pro změnu dat
 
     // Manual actions
     saveLayout,