@bit.rhplus/ui.grid-layout 0.0.2 → 0.0.4

package/dist/useGridLayout.js

@@ -25,10 +25,12 @@ import { debounce } from 'lodash';
  * @returns {Object} Grid layout management interface
  */
 export const useGridLayout = ({ userKey, applicationName, gridName, filterName, enabled = true, autoSave = true, autoSaveDelay = 2000, columnDefs = [], accessToken, waitForSavedFields = false, // Nový prop pro odložené zobrazení columnDefs
-onLayoutLoaded, onLayoutSaved, onError }) => {
+onLayoutLoaded, onLayoutSaved, onError, }) => {
     // Validace columnDefs - musí být array
-    if (columnDefs !== undefined && columnDefs !== null && !Array.isArray(columnDefs)) {
-        console.error('useGridLayout: columnDefs musí být array, získán:', typeof columnDefs, columnDefs);
+    if (columnDefs !== undefined &&
+        columnDefs !== null &&
+        !Array.isArray(columnDefs)) {
+        console.error('[GridLayout] columnDefs is not an array:', typeof columnDefs, columnDefs);
         throw new Error('useGridLayout: columnDefs musí být array');
     }
     // Refs pro AG-Grid API
@@ -36,142 +38,601 @@ onLayoutLoaded, onLayoutSaved, onError }) => {
     const columnApiRef = useRef(null);
     // State
     const [isInitialized, setIsInitialized] = useState(false);
+    const [isGridReady, setIsGridReady] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
     const [isSaving, setIsSaving] = useState(false);
     const [error, setError] = useState(null);
     const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
     const [isColumnEditorOpen, setIsColumnEditorOpen] = useState(false);
+    const [lastKnownColumnState, setLastKnownColumnState] = useState(null);
+    const [columnDefsVersion, setColumnDefsVersion] = useState(0); // Pro tracking změn v stableColumnDefsRef
     // Grid Layout API hook
     const gridLayoutApi = useGridLayoutApi({
         userKey,
         applicationName,
         gridName,
         filterName,
-        accessToken
+        accessToken,
     });
     // Query pro načtení saved layoutu
-    const { data: savedFields, isLoading: isFieldsLoading, error: fieldsError, refetch: refetchFields } = gridLayoutApi.useUserFields((columnDefs || []).map((colDef, index) => ({
-        name: colDef.field || `column_${index}`,
-        displayName: colDef.headerName || colDef.field || `Column ${index + 1}`,
+    const { data: savedFields, isLoading: isFieldsLoading, error: fieldsError, refetch: refetchFields, } = gridLayoutApi.useUserFields((columnDefs || []).map((colDef, index) => ({
+        name: colDef.field || colDef.colId || `column_${index}`,
+        displayName: colDef.headerName ||
+            colDef.field ||
+            colDef.colId ||
+            `Column ${index + 1}`,
         dataType: colDef.type || 'string',
         isVisible: !colDef.hide,
         width: colDef.width || 100,
-        order: index
-    })), { enabled: enabled && !!userKey && !!gridName && Array.isArray(columnDefs) && columnDefs.length > 0 });
+        order: index,
+    })), {
+        enabled: enabled &&
+            !!userKey &&
+            !!gridName &&
+            Array.isArray(columnDefs) &&
+            columnDefs.length > 0,
+    });
+    // // 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
      */
     const handleError = useCallback((error, context = '') => {
-        console.error(`Grid Layout Error ${context}:`, error);
+        // Removed console.error for production
         setError(error);
         if (onError) {
             onError(error, context);
         }
     }, [onError]);
+    // Stabilní reference pro debouncedSave
+    const stableColumnDefsRef = useRef(columnDefs);
+    const stableGridLayoutApiRef = useRef(gridLayoutApi);
+    const stableOnLayoutSavedRef = useRef(onLayoutSaved);
+    const stableHandleErrorRef = useRef(handleError);
+    // Reference pro ukládání stavu sloupců bez state update v render cyklu
+    const stableCurrentColumnsRef = useRef(null);
+    // Aktualizujeme ref hodnoty
+    useEffect(() => {
+        // 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
+            const mergedColumnDefs = columnDefs.map(colDef => {
+                const fieldId = colDef.field || colDef.colId;
+                if (fieldId && existingWidthsMap.has(fieldId)) {
+                    return {
+                        ...colDef,
+                        width: existingWidthsMap.get(fieldId)
+                    };
+                }
+                return colDef;
+            });
+            stableColumnDefsRef.current = mergedColumnDefs;
+            setColumnDefsVersion(prev => prev + 1); // Trigger useMemo přepočet
+        }
+        else {
+            // První nastavení nebo pokud nejsou dostupné předchozí data
+            stableColumnDefsRef.current = columnDefs;
+        }
+        stableGridLayoutApiRef.current = gridLayoutApi;
+        stableOnLayoutSavedRef.current = onLayoutSaved;
+        stableHandleErrorRef.current = handleError;
+    });
+    // Efekt pro bezpečnou aktualizaci lastKnownColumnState z ref
+    // useEffect(() => {
+    //   if (stableCurrentColumnsRef.current) {
+    //     setLastKnownColumnState(stableCurrentColumnsRef.current);
+    //     console.log('[GridLayout] Updated lastKnownColumnState from ref');
+    //     // Vymazat po použití
+    //     stableCurrentColumnsRef.current = null;
+    //   }
+    // }, [stableCurrentColumnsRef.current]);
     /**
      * Uloží současný stav sloupců do API
      */
     const saveCurrentLayout = useCallback(async () => {
-        if (!enabled || !gridApiRef.current || !columnApiRef.current)
+        if (!enabled || !gridApiRef.current) {
             return;
+        }
         try {
             setIsSaving(true);
             setError(null);
-            // Získáme současný column state z AG-Grid
-            const columnState = columnApiRef.current.getColumnState();
+            // Získáme současný column state z AG-Grid s fallbackem pro AG Grid v31+
+            let columnState = null;
+            if (gridApiRef.current &&
+                typeof gridApiRef.current.getColumnState === 'function') {
+                // AG Grid v31+ - getColumnState je přímo v main API
+                try {
+                    columnState = gridApiRef.current.getColumnState();
+                    // Získáme aktuální headerName hodnoty z DOM pro každý sloupec
+                    if (columnState && Array.isArray(columnState)) {
+                        columnState = columnState.map(colState => {
+                            // Pokusíme se získat aktuální headerName z DOM
+                            try {
+                                const headerCell = document.querySelector(`[col-id="${colState.colId}"]`);
+                                if (headerCell) {
+                                    const headerTextEl = headerCell.querySelector('.ag-header-cell-text');
+                                    if (headerTextEl && headerTextEl.textContent) {
+                                        return {
+                                            ...colState,
+                                            headerName: headerTextEl.textContent
+                                        };
+                                    }
+                                }
+                            }
+                            catch (headerError) {
+                                console.log(`[GridLayout] Could not get headerName from DOM for ${colState.colId}`);
+                            }
+                            return colState;
+                        });
+                    }
+                    // Pokud getColumnState vrátí undefined, grid je v nekonzistentním stavu
+                    // Zkusíme alternativní metodu přes getColumnDefs()
+                    if (columnState === undefined || columnState === null) {
+                        console.warn('[GridLayout] getColumnState returned undefined/null, trying getColumnDefs() alternative');
+                        console.warn('[GridLayout] Full gridApiRef.current object:', gridApiRef.current);
+                        console.warn('[GridLayout] Available methods on gridApiRef.current:', gridApiRef.current
+                            ? Object.getOwnPropertyNames(gridApiRef.current).filter((name) => typeof gridApiRef.current[name] === 'function')
+                            : 'NO_GRID_API');
+                        try {
+                            // Alternativní přístup: použijeme getColumnDefs() a vytvoříme fake column state
+                            const columnDefs = gridApiRef.current.getColumnDefs();
+                            if (columnDefs &&
+                                Array.isArray(columnDefs) &&
+                                columnDefs.length > 0) {
+                                // Vytvoříme column state z column defs
+                                columnState = columnDefs.map((colDef, index) => {
+                                    // Zkusíme získat aktuální šířku sloupce z DOM
+                                    let currentWidth = colDef.width || 100;
+                                    try {
+                                        const fieldId = colDef.field || colDef.colId;
+                                        const headerElement = document.querySelector(`[col-id="${fieldId}"]`);
+                                        if (headerElement && headerElement.offsetWidth) {
+                                            currentWidth = headerElement.offsetWidth;
+                                        }
+                                    }
+                                    catch (domError) {
+                                        console.log('[GridLayout] Could not get width from DOM for', colDef.field);
+                                    }
+                                    return {
+                                        colId: colDef.field || colDef.colId,
+                                        hide: colDef.hide || false,
+                                        width: currentWidth,
+                                        headerName: colDef.headerName, // Přidáme aktuální headerName
+                                        sort: null, // Nebudeme zachovávat sort při této fallback metodě
+                                        sortIndex: null,
+                                    };
+                                });
+                            }
+                            else {
+                                console.error('[GridLayout] getColumnDefs() also failed or returned empty array');
+                                const cachedColumnDefs = stableColumnDefsRef.current;
+                                if (cachedColumnDefs &&
+                                    Array.isArray(cachedColumnDefs) &&
+                                    cachedColumnDefs.length > 0) {
+                                    columnState = cachedColumnDefs.map((colDef, index) => {
+                                        // Použijeme cached definice
+                                        let currentWidth = colDef.width || 100;
+                                        return {
+                                            colId: colDef.field || colDef.colId,
+                                            hide: colDef.hide || false,
+                                            width: currentWidth,
+                                            headerName: colDef.headerName, // Přidáme aktuální headerName
+                                            sort: null,
+                                            sortIndex: null,
+                                        };
+                                    });
+                                }
+                                else {
+                                    console.error('[GridLayout] All fallback methods failed - no column data available');
+                                    return;
+                                }
+                            }
+                        }
+                        catch (columnDefError) {
+                            console.error('[GridLayout] getColumnDefs() alternative failed:', columnDefError);
+                            return;
+                        }
+                    }
+                }
+                catch (error) {
+                    console.error('[GridLayout] Error calling gridApiRef.current.getColumnState():', error);
+                    return;
+                }
+            }
+            else if (columnApiRef.current &&
+                typeof columnApiRef.current.getColumnState === 'function') {
+                // Starší verze AG Grid - getColumnState je v columnApi
+                try {
+                    columnState = columnApiRef.current.getColumnState();
+                    // Získáme aktuální headerName hodnoty z DOM pro každý sloupec
+                    if (columnState && Array.isArray(columnState)) {
+                        columnState = columnState.map(colState => {
+                            // Pokusíme se získat aktuální headerName z DOM
+                            try {
+                                const headerCell = document.querySelector(`[col-id="${colState.colId}"]`);
+                                if (headerCell) {
+                                    const headerTextEl = headerCell.querySelector('.ag-header-cell-text');
+                                    if (headerTextEl && headerTextEl.textContent) {
+                                        return {
+                                            ...colState,
+                                            headerName: headerTextEl.textContent
+                                        };
+                                    }
+                                }
+                            }
+                            catch (headerError) {
+                                console.log(`[GridLayout] Could not get headerName from DOM for ${colState.colId}`);
+                            }
+                            return colState;
+                        });
+                    }
+                }
+                catch (error) {
+                    console.error('[GridLayout] Error calling columnApiRef.current.getColumnState():', error);
+                    return;
+                }
+            }
+            else {
+                console.warn('[GridLayout] getColumnState method not available for saving layout');
+                console.warn('[GridLayout] Debug info:', {
+                    gridApiRef: gridApiRef.current,
+                    columnApiRef: columnApiRef.current,
+                    gridApiRefKeys: gridApiRef.current
+                        ? Object.keys(gridApiRef.current)
+                        : 'undefined',
+                    columnApiRefKeys: columnApiRef.current
+                        ? Object.keys(columnApiRef.current)
+                        : 'undefined',
+                });
+                return;
+            }
+            // Kontrola validity columnDefs a použití fallback pokud je potřeba
+            let columnDefsToUse = stableColumnDefsRef.current;
+            if (!columnDefsToUse ||
+                !Array.isArray(columnDefsToUse) ||
+                columnDefsToUse.length === 0) {
+                console.warn('[GridLayout] stableColumnDefsRef is empty, using fallback from stableCurrentColumnsRef');
+                if (stableCurrentColumnsRef.current &&
+                    Array.isArray(stableCurrentColumnsRef.current)) {
+                    // Převedeme cached sloupce zpět na columnDefs format
+                    columnDefsToUse = stableCurrentColumnsRef.current.map((col) => ({
+                        field: col.field,
+                        headerName: col.headerName || col.field,
+                        width: col.width || 100,
+                        hide: !col.visible,
+                    }));
+                }
+                else {
+                    console.error('[GridLayout] No valid columnDefs available for saving');
+                    return;
+                }
+            }
             // Transformujeme na Grid API format
-            const fields = gridLayoutApi.transformColumnStateToFields(columnState, columnDefs);
+            const fields = stableGridLayoutApiRef.current.transformColumnStateToFields(columnState, columnDefsToUse);
             // Uložíme do API
-            const result = await gridLayoutApi.saveGridLayout(fields);
-            if (result.success) {
-                setHasUnsavedChanges(false);
-                if (onLayoutSaved) {
-                    onLayoutSaved(fields, columnState);
+            const result = stableGridLayoutApiRef.current
+                .saveGridLayout(fields)
+                .then((result) => {
+                if (result.success) {
+                    setHasUnsavedChanges(false);
+                    if (stableOnLayoutSavedRef.current) {
+                        stableOnLayoutSavedRef.current(fields, columnState);
+                    }
                 }
-            }
+            })
+                .catch((error) => {
+                stableHandleErrorRef.current(error, 'při ukládání layoutu');
+            });
         }
         catch (error) {
-            handleError(error, 'při ukládání layoutu');
+            stableHandleErrorRef.current(error, 'při ukládání layoutu');
         }
         finally {
             setIsSaving(false);
         }
-    }, [enabled, columnDefs, gridLayoutApi, onLayoutSaved, handleError]);
+    }, [enabled]);
     /**
      * Debounced auto-save pro předcházení častým voláním API
      */
-    const debouncedSave = useMemo(() => debounce(saveCurrentLayout, autoSaveDelay), [saveCurrentLayout, autoSaveDelay]);
+    const debouncedSave = useMemo(() => {
+        const debouncedFn = debounce((...args) => {
+            return saveCurrentLayout(...args);
+        }, autoSaveDelay);
+        return debouncedFn;
+    }, [saveCurrentLayout, autoSaveDelay]);
     /**
      * Aplikuje saved layout na AG-Grid
+     * @param {boolean} forceApply - Vynucené aplikování ignorující isInitialized stav
      */
-    const applySavedLayout = useCallback(() => {
-        if (!savedFields?.records || !columnApiRef.current || isInitialized)
+    const applySavedLayout = useCallback((forceApply = false) => {
+        // Ověříme dostupnost API a inicializaci
+        if (!savedFields?.records ||
+            savedFields.records.length === 0 ||
+            (!forceApply && isInitialized)) {
+            return;
+        }
+        // Ověříme dostupnost applyColumnState metody (AG Grid v31+ má ji v main API)
+        let applyColumnStateApi = null;
+        if (gridApiRef.current &&
+            typeof gridApiRef.current.applyColumnState === 'function') {
+            applyColumnStateApi = gridApiRef.current;
+        }
+        else if (columnApiRef.current &&
+            typeof columnApiRef.current.applyColumnState === 'function') {
+            applyColumnStateApi = columnApiRef.current;
+        }
+        if (!applyColumnStateApi) {
+            console.warn('[GridLayout] applyColumnState method not available');
             return;
+        }
         try {
             setIsLoading(true);
             // Transformujeme Grid API fields na AG-Grid column state
-            const columnState = gridLayoutApi.transformFieldsToColumnState(savedFields.records, columnDefs);
-            console.log("🚀 ~ useGridLayout ~ columnState:", savedFields.records, columnDefs, columnState);
+            // Použijeme stableColumnDefsRef.current místo columnDefs pro zachování aktuálních šířek
+            const columnDefsToUse = stableColumnDefsRef.current || columnDefs;
+            const columnState = gridLayoutApi.transformFieldsToColumnState(savedFields.records, columnDefsToUse);
             if (columnState && columnState.length > 0) {
-                // Pokud je waitForSavedFields true, columnDefs jsou už pre-transformované, 
+                // Pokud je waitForSavedFields true, columnDefs jsou už pre-transformované,
                 // takže aplikujeme jen width a hide vlastnosti bez delay pro pořadí
                 const applyFunction = () => {
                     try {
-                        console.log("🎯 Applying column state with delay:", {
-                            columnState,
-                            columnCount: columnState.length,
-                            columnIds: columnState.map(c => c.colId),
-                            hasOrder: true // pořadí je v poli implicitně
-                        });
-                        // Debug info o columnApiRef
-                        console.log("🔍 columnApiRef debug:", {
-                            hasColumnApiRef: !!columnApiRef.current,
-                            columnApiType: typeof columnApiRef.current,
-                            columnApiMethods: columnApiRef.current ? Object.getOwnPropertyNames(columnApiRef.current).filter(name => typeof columnApiRef.current[name] === 'function') : [],
-                            hasApplyColumnState: columnApiRef.current && typeof columnApiRef.current.applyColumnState === 'function'
-                        });
-                        // Ověření, že columnApi podporuje applyColumnState
-                        if (!columnApiRef.current) {
-                            throw new Error('columnApiRef.current is null or undefined');
-                        }
-                        if (typeof columnApiRef.current.applyColumnState !== 'function') {
-                            throw new Error(`applyColumnState is not a function. Available methods: ${Object.getOwnPropertyNames(columnApiRef.current).filter(name => typeof columnApiRef.current[name] === 'function').join(', ')}`);
-                        }
-                        console.log("test2");
-                        // Aplikujeme column state na AG-Grid 
+                        // Aplikujeme column state na AG-Grid
                         let result;
                         try {
                             const applyOrderEnabled = !waitForSavedFields; // Při waitForSavedFields už je pořadí v columnDefs
-                            result = columnApiRef.current.applyColumnState({
-                                state: columnState,
+                            // Získáme aktuální stav sloupců před aplikováním
+                            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 tak, aby zachoval aktuální šířky pokud existují
+                            const adjustedColumnState = columnState.map(colState => {
+                                const currentWidth = currentWidthMap.get(colState.colId);
+                                if (currentWidth && currentWidth !== colState.width) {
+                                    return {
+                                        ...colState,
+                                        width: currentWidth
+                                    };
+                                }
+                                return colState;
+                            });
+                            result = applyColumnStateApi.applyColumnState({
+                                state: adjustedColumnState,
                                 applyOrder: applyOrderEnabled, // Pořadí jen když není waitForSavedFields
                                 defaultState: {
                                     sort: null, // Reset sorting na všech sloupcích
-                                    sortIndex: null, // Reset sort index 
+                                    sortIndex: null, // Reset sort index
                                     pivot: null, // Reset pivot
-                                    rowGroup: null // Reset row grouping
-                                }
+                                    rowGroup: null, // Reset row grouping
+                                },
                             });
-                            console.log("test2.5 - applyColumnState executed");
+                            // Explicitně aktualizujeme headerName pro každý sloupec, protože AG-Grid
+                            // nepodporuje nastavení headerName přes applyColumnState
+                            if (savedFields.records &&
+                                Array.isArray(savedFields.records) &&
+                                gridApiRef.current) {
+                                // Nejprve zkusíme použít refreshHeader funkci, pokud je dostupná
+                                try {
+                                    if (typeof gridApiRef.current.refreshHeader === 'function') {
+                                        gridApiRef.current.refreshHeader();
+                                    }
+                                }
+                                catch (refreshError) {
+                                    console.error('[GridLayout] Error in refreshHeader:', refreshError);
+                                }
+                                // Získáme aktuální definice sloupců z gridu
+                                let currentColDefs;
+                                try {
+                                    currentColDefs = gridApiRef.current.getColumnDefs
+                                        ? gridApiRef.current.getColumnDefs()
+                                        : null;
+                                }
+                                catch (error) {
+                                    console.error('[GridLayout] Error getting column definitions:', error);
+                                    currentColDefs = 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);
+                                        }
+                                    });
+                                    // Aktualizujeme headerName pro každý sloupec
+                                    const updatedColDefs = currentColDefs.map((colDef) => {
+                                        const fieldName = colDef.field;
+                                        if (fieldName && headerNameMap.has(fieldName)) {
+                                            const newHeaderName = headerNameMap.get(fieldName);
+                                            // Vytvoříme novou kopii definice sloupce s aktualizovaným headerName
+                                            return {
+                                                ...colDef,
+                                                headerName: newHeaderName,
+                                            };
+                                        }
+                                        return colDef;
+                                    });
+                                    // Aplikujeme aktualizované definice sloupců zpět do gridu
+                                    try {
+                                        if (typeof gridApiRef.current.setColumnDefs === 'function') {
+                                            gridApiRef.current.setColumnDefs(updatedColDefs);
+                                            // Pro jistotu zkontrolujeme, zda byly změny aplikovány
+                                            setTimeout(() => {
+                                                try {
+                                                    const afterUpdateColDefs = gridApiRef.current.getColumnDefs();
+                                                }
+                                                catch (checkError) {
+                                                    console.error('[GridLayout] Error checking updated columns:', checkError);
+                                                }
+                                            }, 100);
+                                        }
+                                        else {
+                                            // Alternativní řešení - přímá manipulace s DOM
+                                            // Počkáme, až se grid vyrenderuje
+                                            setTimeout(() => {
+                                                try {
+                                                    // Vytvoříme mapu pro rychlou identifikaci
+                                                    const headerUpdates = new Map();
+                                                    updatedColDefs.forEach((colDef) => {
+                                                        if (colDef.field && colDef.headerName) {
+                                                            headerUpdates.set(colDef.field, colDef.headerName);
+                                                        }
+                                                    });
+                                                    // Najdeme všechny hlavičky sloupců pomocí DOM
+                                                    const headerCells = document.querySelectorAll('.ag-header-cell');
+                                                    headerCells.forEach((headerCell) => {
+                                                        try {
+                                                            // Získáme ID sloupce z DOM atributů
+                                                            const colId = headerCell.getAttribute('col-id');
+                                                            if (colId && headerUpdates.has(colId)) {
+                                                                // Najdeme element s textem hlavičky
+                                                                const headerTextEl = headerCell.querySelector('.ag-header-cell-text');
+                                                                if (headerTextEl) {
+                                                                    const newHeaderName = headerUpdates.get(colId);
+                                                                    const currentText = headerTextEl.textContent;
+                                                                    headerTextEl.textContent = newHeaderName;
+                                                                }
+                                                            }
+                                                        }
+                                                        catch (cellError) {
+                                                            console.error('[GridLayout] Error updating header cell:', cellError);
+                                                        }
+                                                    });
+                                                }
+                                                catch (domError) {
+                                                    console.error('[GridLayout] Error in DOM manipulation:', domError);
+                                                }
+                                            }, 200);
+                                        }
+                                    }
+                                    catch (setError) {
+                                        console.error('[GridLayout] Error applying column definitions:', setError);
+                                    }
+                                }
+                            }
                         }
                         catch (applyError) {
-                            console.error("❌ Error during applyColumnState:", applyError);
                             throw applyError;
                         }
-                        console.log("✅ Column state applied successfully:", {
-                            result,
-                            appliedColumns: columnState.length
-                        });
-                        // Ověření, že se sloupce skutečně přeuspořádaly
-                        const newColumnState = columnApiRef.current.getColumnState();
-                        console.log("🚀 ~ test3:", newColumnState);
-                        console.log("🔍 Current column state after apply:", newColumnState.map(c => c.colId));
                         if (onLayoutLoaded) {
                             onLayoutLoaded(savedFields.records, columnState);
                         }
                     }
                     catch (delayedError) {
-                        console.error("❌ Error applying column state:", delayedError);
+                        // Removed console.error for production
                         handleError(delayedError, 'při delayed aplikování layoutu');
                     }
                 };
@@ -190,72 +651,328 @@ onLayoutLoaded, onLayoutSaved, onError }) => {
         }
         finally {
             setIsInitialized(true);
+            setIsGridReady(true); // Obnovíme také isGridReady pro event handlery
             setIsLoading(false);
         }
-    }, [savedFields, gridLayoutApi, isInitialized, onLayoutLoaded, handleError, columnDefs, waitForSavedFields]);
+    }, [
+        savedFields,
+        gridLayoutApi,
+        isInitialized,
+        onLayoutLoaded,
+        handleError,
+        columnDefs,
+        waitForSavedFields,
+    ]);
+    /**
+     * Odložené akce pro případ rychlé interakce před dokončením inicializace
+     */
+    const [pendingActions, setPendingActions] = useState([]);
+    // Effect pro zpracování pending actions po dokončení inicializace
+    useEffect(() => {
+        if (isInitialized && pendingActions.length > 0) {
+            // Zpracujeme pending akce s krátkým delay
+            setTimeout(() => {
+                pendingActions.forEach((action) => {
+                    switch (action.type) {
+                        case 'dragStopped':
+                            if (autoSave && debouncedSave) {
+                                debouncedSave();
+                            }
+                            break;
+                    }
+                });
+                setPendingActions([]);
+            }, 100);
+        }
+    }, [isInitialized, pendingActions, autoSave, debouncedSave]);
     /**
      * Event handlers pro AG-Grid
      */
     const handleColumnMoved = useCallback(() => {
-        if (!enabled || !isInitialized)
+        if (!enabled || !isGridReady) {
             return;
+        }
         setHasUnsavedChanges(true);
         // Neukládáme při každém pohybu - čekáme na onDragStopped
-    }, [enabled, isInitialized]);
+    }, [enabled, isGridReady]);
     const handleDragStopped = useCallback(() => {
-        if (!enabled || !isInitialized)
+        if (!enabled || !isGridReady) {
             return;
+        }
         setHasUnsavedChanges(true);
-        if (autoSave) {
-            console.log("🎯 Drag stopped - spouštím debounced save");
+        // Aktualizujeme šířky sloupců v columnDefs před uložením
+        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();
+                    currentColumnState.forEach(colState => {
+                        if (colState.colId && colState.width) {
+                            widthUpdatesMap.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;
+                        setColumnDefsVersion(prev => prev + 1); // Trigger useMemo přepočet
+                    }
+                }
+            }
+        }
+        catch (error) {
+            console.error('[GridLayout] Error updating columnDefs widths in handleDragStopped:', error);
+        }
+        // Pokud ještě není inicializované, přidáme akci do pending
+        if (!isInitialized && autoSave) {
+            setPendingActions((prev) => [
+                ...prev,
+                { type: 'dragStopped', timestamp: Date.now() },
+            ]);
+            return;
+        }
+        // Normální proces pokud je vše inicializované
+        if (autoSave && debouncedSave) {
             debouncedSave();
         }
-    }, [enabled, isInitialized, autoSave, debouncedSave]);
+        else {
+        }
+    }, [enabled, isGridReady, isInitialized, autoSave, debouncedSave]);
     const handleColumnResized = useCallback(() => {
-        if (!enabled || !isInitialized)
+        if (!enabled || !isGridReady)
             return;
         setHasUnsavedChanges(true);
-        if (autoSave) {
+        // Aktualizujeme šířky sloupců v columnDefs při resize
+        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();
+                    currentColumnState.forEach(colState => {
+                        if (colState.colId && colState.width) {
+                            widthUpdatesMap.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;
+                        setColumnDefsVersion(prev => prev + 1); // Trigger useMemo přepočet
+                    }
+                }
+            }
+        }
+        catch (error) {
+            console.error('[GridLayout] Error updating columnDefs widths in handleColumnResized:', error);
+        }
+        if (autoSave && isInitialized && debouncedSave) {
             debouncedSave();
         }
-    }, [enabled, isInitialized, autoSave, debouncedSave]);
+    }, [enabled, isGridReady, isInitialized, autoSave, debouncedSave]);
     const handleColumnVisible = useCallback(() => {
-        if (!enabled || !isInitialized)
+        if (!enabled || !isGridReady)
             return;
         setHasUnsavedChanges(true);
-        if (autoSave) {
+        if (autoSave && isInitialized && debouncedSave) {
             debouncedSave();
         }
-    }, [enabled, isInitialized, autoSave, debouncedSave]);
+    }, [enabled, isGridReady, isInitialized, autoSave, debouncedSave]);
     const handleColumnPinned = useCallback(() => {
-        if (!enabled || !isInitialized)
+        if (!enabled || !isGridReady)
             return;
         setHasUnsavedChanges(true);
-        if (autoSave) {
+        if (autoSave && isInitialized && debouncedSave) {
             debouncedSave();
         }
-    }, [enabled, isInitialized, autoSave, debouncedSave]);
+    }, [enabled, isGridReady, isInitialized, autoSave, debouncedSave]);
     /**
      * AG-Grid Ready handler
      */
     const handleGridReady = useCallback((params) => {
-        if (!enabled)
+        if (!enabled) {
             return;
+        }
         gridApiRef.current = params.api;
-        columnApiRef.current = params.columnApi;
-        // Pokud už máme saved data, aplikujeme je
-        if (savedFields?.records && !isInitialized) {
-            applySavedLayout();
+        // AG Grid v31+ - columnApi je deprecated, všechny metody jsou v hlavním api
+        // Pokud columnApi neexistuje, použijeme main api jako fallback
+        columnApiRef.current = params.columnApi || params.api;
+        // Okamžitě označíme grid jako připravený pro event handlery
+        setIsGridReady(true);
+        // Po reloadLayout() NEPOTŘEBUJEME znovu aplikovat layout - už je v DB a grid ho má správně
+        // Jen nastavíme isInitialized na true
+        if (isInitialized === false) {
+            setIsInitialized(true);
         }
     }, [enabled, savedFields, isInitialized, applySavedLayout]);
     /**
-     * Effect pro aplikování layoutu když se načtou data
+     * Effect pro aplikování layoutu když se načtou data po reloadLayout
+     * ODSTRANĚNO - způsobovalo předčasné volání applySavedLayout() před grid ready
      */
-    useEffect(() => {
-        if (savedFields?.records && columnApiRef.current && !isInitialized) {
-            applySavedLayout();
-        }
-    }, [savedFields, applySavedLayout, isInitialized]);
+    // useEffect(() => {
+    //   // Po refetchFields() (z reloadLayout) potřebujeme aplikovat layout a obnovit isGridReady
+    //   if (savedFields?.records && !isInitialized && gridApiRef.current) {
+    //     console.log('[GridLayout] Effect: Applying layout after refetch and setting isGridReady=true');
+    //     applySavedLayout();
+    //   }
+    // }, [savedFields, 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
      */
@@ -276,12 +993,26 @@ onLayoutLoaded, onLayoutSaved, onError }) => {
      * Resetuje layout na default
      */
     const resetToDefault = useCallback(async () => {
-        if (!enabled || !columnApiRef.current)
+        if (!enabled)
+            return;
+        // Ověříme dostupnost resetColumnState metody (AG Grid v31+ má ji v main API)
+        let resetColumnStateApi = null;
+        if (gridApiRef.current &&
+            typeof gridApiRef.current.resetColumnState === 'function') {
+            resetColumnStateApi = gridApiRef.current;
+        }
+        else if (columnApiRef.current &&
+            typeof columnApiRef.current.resetColumnState === 'function') {
+            resetColumnStateApi = columnApiRef.current;
+        }
+        else {
+            console.warn('[GridLayout] resetColumnState method not available');
             return;
+        }
         try {
             setIsLoading(true);
             // Resetujeme AG-Grid na původní column definitions
-            columnApiRef.current.resetColumnState();
+            resetColumnStateApi.resetColumnState();
             // Pokud je autoSave zapnuté, uložíme resetovaný stav
             if (autoSave) {
                 await saveCurrentLayout();
@@ -308,8 +1039,22 @@ onLayoutLoaded, onLayoutSaved, onError }) => {
      */
     const reloadLayout = useCallback(async () => {
         try {
+            // Save a reference to the current grid API before resetting states
+            const savedGridApiRef = gridApiRef.current;
+            const savedColumnApiRef = columnApiRef.current;
             setIsInitialized(false);
+            setIsGridReady(false);
             await refetchFields();
+            // Restore saved references if they were lost during the reload process
+            if (!gridApiRef.current && savedGridApiRef) {
+                gridApiRef.current = savedGridApiRef;
+            }
+            if (!columnApiRef.current && savedColumnApiRef) {
+                columnApiRef.current = savedColumnApiRef;
+            }
+            // Po refetch dat obnovíme oba stavy (layout je už v DB)
+            setIsInitialized(true);
+            setIsGridReady(true);
         }
         catch (error) {
             handleError(error, 'při reload layoutu');
@@ -319,83 +1064,102 @@ onLayoutLoaded, onLayoutSaved, onError }) => {
      * Získá aktuální column state pro Column Editor
      */
     const getCurrentColumnsForEditor = useCallback(() => {
-        console.log("🔍 getCurrentColumnsForEditor called", {
-            hasColumnApiRef: !!columnApiRef.current,
-            columnDefs: columnDefs?.length || 0,
-            savedFieldsCount: savedFields?.records?.length || 0
-        });
         // Zajistíme, že máme validní columnDefs
         const validColumnDefs = Array.isArray(columnDefs) ? columnDefs : [];
-        if (!columnApiRef.current || validColumnDefs.length === 0) {
-            console.log("❌ Using fallback - AG-Grid not ready or no columnDefs");
-            // Fallback na původní columnDefs pokud není AG-Grid připraven
-            return validColumnDefs.map((col, index) => ({
-                id: col.field,
-                field: col.field,
-                headerName: col.headerName || col.field,
-                originalHeaderName: col.headerName || col.field,
-                width: col.width || 100,
-                originalWidth: col.width || 100,
-                visible: !col.hide,
-                order: index
-            }));
+        try {
+            let currentColumnState = null;
+            // Pokusíme se získat column state s různými fallbacky pro AG Grid v31+
+            if (gridApiRef.current &&
+                typeof gridApiRef.current.getColumnState === 'function') {
+                // AG Grid v31+ - getColumnState je přímo v main API
+                currentColumnState = gridApiRef.current.getColumnState();
+            }
+            else if (columnApiRef.current &&
+                typeof columnApiRef.current.getColumnState === 'function') {
+                // Starší verze AG Grid - getColumnState je v columnApi
+                currentColumnState = columnApiRef.current.getColumnState();
+            }
+            else {
+                throw new Error('getColumnState method is not available on gridApiRef or columnApiRef');
+            }
+            if (!Array.isArray(currentColumnState) ||
+                currentColumnState.length === 0) {
+                // Fallback pokud getColumnState() nevrátí validní array
+                if (lastKnownColumnState) {
+                    return lastKnownColumnState;
+                }
+                const defaultColumns = validColumnDefs.map((col, index) => ({
+                    id: col.field,
+                    field: col.field,
+                    headerName: col.headerName || col.field,
+                    originalHeaderName: col.headerName || col.field,
+                    width: col.width || 100,
+                    originalWidth: col.width || 100,
+                    visible: !col.hide,
+                    order: index,
+                    originalOrder: index, // Původní pořadí z columnDefs
+                }));
+                // POZN: Neukládáme do state, aby nedocházelo k infinite loop
+                return defaultColumns;
+            }
+            const result = currentColumnState.map((columnStateItem, index) => {
+                // Najdeme odpovídající column definition podle colId (zohledníme field i colId)
+                const colDef = validColumnDefs.find((cd) => cd.field === columnStateItem.colId ||
+                    cd.colId === columnStateItem.colId) || {};
+                // Pokusíme se najít saved hodnotu pro headerName
+                const savedField = savedFields?.records?.find((sf) => sf.fieldName === columnStateItem.colId);
+                // Najdeme původní index z columnDefs
+                const originalIndex = validColumnDefs.findIndex((cd) => (cd.field || cd.colId) === columnStateItem.colId);
+                return {
+                    id: columnStateItem.colId,
+                    field: columnStateItem.colId,
+                    headerName: savedField?.headerName ||
+                        colDef.headerName ||
+                        columnStateItem.colId,
+                    // Původní headerName z columnDefs (ne z uložených uživatelských preferencí)
+                    originalHeaderName: colDef.headerName || columnStateItem.colId,
+                    width: columnStateItem.width || colDef.width || 100,
+                    originalWidth: colDef.width || 100,
+                    visible: !columnStateItem.hide,
+                    order: index,
+                    originalOrder: originalIndex !== -1 ? originalIndex : index, // Původní pořadí z columnDefs
+                };
+            });
+            // POZN: Neukládáme do state, aby nedocházelo k infinite loop
+            // Tato aktualizace proběhne v useEffect
+            return result;
         }
-        // Získáme aktuální column state z AG-Grid
-        const currentColumnState = columnApiRef.current.getColumnState();
-        console.log("📊 AG-Grid column state:", currentColumnState?.map(cs => ({
-            colId: cs.colId,
-            width: cs.width,
-            hide: cs.hide
-        })));
-        if (!Array.isArray(currentColumnState)) {
-            console.log("❌ Using fallback - getColumnState() not valid array");
-            // Fallback pokud getColumnState() nevrátí validní array
-            return validColumnDefs.map((col, index) => ({
-                id: col.field,
-                field: col.field,
-                headerName: col.headerName || col.field,
-                originalHeaderName: col.headerName || col.field,
+        catch (error) {
+            console.error('[GridLayout] Error in getCurrentColumnsForEditor:', error);
+            // Použijeme lastKnownColumnState, pokud existuje
+            if (lastKnownColumnState) {
+                return lastKnownColumnState;
+            }
+            // Poslední fallback na columnDefs
+            const defaultColumns = validColumnDefs.map((col, index) => ({
+                id: col.field || col.colId,
+                field: col.field || col.colId,
+                headerName: col.headerName || col.field || col.colId,
+                // Vždy používáme původní definici jako referenci pro porovnání
+                originalHeaderName: col.headerName || col.field || col.colId,
                 width: col.width || 100,
                 originalWidth: col.width || 100,
                 visible: !col.hide,
-                order: index
+                order: index,
+                originalOrder: index, // Původní pořadí z columnDefs
             }));
+            // POZN: Neukládáme do state, aby nedocházelo k infinite loop
+            return defaultColumns;
         }
-        const result = currentColumnState.map((columnStateItem, index) => {
-            // Najdeme odpovídající column definition podle colId
-            const colDef = validColumnDefs.find(cd => cd.field === columnStateItem.colId) || {};
-            // Pokusíme se najít saved hodnotu pro headerName
-            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
-            };
-        });
-        console.log("✅ Using AG-Grid state - result:", result.map(r => ({
-            field: r.field,
-            headerName: r.headerName,
-            width: r.width,
-            visible: r.visible
-        })));
-        return result;
-    }, [columnDefs, savedFields]);
+    }, [columnDefs, savedFields, lastKnownColumnState]);
     /**
      * Otevře Column Editor modal
      */
     const openColumnEditor = useCallback(() => {
-        console.log("🚀 Opening Column Editor", {
-            hasColumnApiRef: !!columnApiRef.current,
-            isInitialized,
-            columnDefsCount: columnDefs?.length || 0
-        });
+        // Před otevřením editoru si pouze zaznamenáme, že chceme aktualizovat stav sloupců
+        // Samotná aktualizace proběhne v useEffect, ne během renderu
         setIsColumnEditorOpen(true);
-    }, [isInitialized, columnDefs]);
+    }, []);
     /**
      * Zavře Column Editor modal
      */
@@ -406,72 +1170,126 @@ onLayoutLoaded, onLayoutSaved, onError }) => {
      * Uloží změny z Column Editoru
      * @param {Array} editedColumns - Editované sloupce z modalu
      */
-    const saveColumnEditorChanges = useCallback(async (editedColumns) => {
-        console.log("🚀 ~ useGridLayout ~ editedColumns:", editedColumns);
-        if (!enabled || !columnApiRef.current)
+    const saveColumnEditorChanges = async (editedColumns) => {
+        if (!enabled)
             return;
         try {
             setIsLoading(true);
+            setIsSaving(true);
             // Filtrujeme pouze validní sloupce (s definovaným field)
-            const validColumns = editedColumns.filter(col => col.field && col.field !== undefined);
-            // Převedeme editované sloupce na AG-Grid column state
-            const columnState = validColumns.map((col, index) => ({
-                colId: col.field,
-                width: col.width,
-                hide: !col.visible,
-                pinned: null,
-                sort: null,
-                sortIndex: null
-            }));
-            // Aplikujeme změny na AG-Grid
-            columnApiRef.current.applyColumnState({
-                state: columnState,
-                applyOrder: true,
-                defaultState: {
-                    sort: null,
-                    sortIndex: null,
-                    pivot: null,
-                    rowGroup: null
-                }
-            });
-            // Připravíme UserFields pro save podle C# SaveUserFieldModel struktury
-            const userFields = validColumns.map((col, index) => ({
+            const validColumns = editedColumns.filter((col) => col.field && col.field !== undefined);
+            // Připravíme UserFields pro API podle C# SaveUserFieldModel struktury
+            const completeUserFields = validColumns.map((col, index) => ({
+                Id: 0, // Nové pole má ID = 0, existující budou mít správné ID z API
+                UserKey: userKey,
+                ApplicationName: applicationName,
+                GridName: gridName,
+                FilterName: filterName || null,
                 FieldName: col.field,
-                HeaderName: col.headerName || col.field, // Editovaný název nebo fallback na field
+                HeaderName: col.headerName || col.field,
                 Order: index, // Pořadí podle pozice v editedColumns
                 Show: col.visible,
-                Width: col.width || null
+                Width: col.width != null ? col.width : null, // Zachováváme i nulovou šířku
+                System: false,
             }));
-            // Uložíme změny přímo pomocí API
-            if (autoSave) {
-                const result = await gridLayoutApi.saveGridLayout(userFields);
+            // Uložení do API
+            gridLayoutApi
+                .saveGridLayout(completeUserFields)
+                .then((result) => {
                 if (result.success) {
                     setHasUnsavedChanges(false);
-                    // Explicitní refetch saved fields pro okamžité načtení nových dat
-                    try {
-                        await refetchFields();
-                        console.log("✅ Saved fields refetched after save");
-                    }
-                    catch (refetchError) {
-                        console.warn("⚠️ Refetch failed after save:", refetchError);
-                    }
+                    // Znovunačtení layoutu z API a aplikování na grid
+                    reloadLayout().then(async () => {
+                        // Po reloadLayout() počkáme na aktualizaci savedFields a aplikujeme layout
+                        try {
+                            // Znovu načteme fieldy pro zajištění synchronizace
+                            const freshFields = await refetchFields();
+                            setTimeout(() => {
+                                if (gridApiRef.current && freshFields?.data?.records) {
+                                    // Aplikujeme layout s novými daty
+                                    const columnState = gridLayoutApi.transformFieldsToColumnState(freshFields.data.records, columnDefs);
+                                    if (columnState && columnState.length > 0) {
+                                        // Najdeme správné API pro applyColumnState
+                                        let applyColumnStateApi = null;
+                                        if (gridApiRef.current?.applyColumnState) {
+                                            applyColumnStateApi = gridApiRef.current;
+                                        }
+                                        else if (columnApiRef.current?.applyColumnState) {
+                                            applyColumnStateApi = columnApiRef.current;
+                                        }
+                                        if (applyColumnStateApi) {
+                                            applyColumnStateApi.applyColumnState({
+                                                state: columnState,
+                                                applyOrder: true,
+                                                defaultState: {
+                                                    sort: null,
+                                                    sortIndex: null,
+                                                    pivot: null,
+                                                    rowGroup: null,
+                                                },
+                                            });
+                                            // Aktualizujeme headerName pro každý sloupec
+                                            const headerNameMap = new Map();
+                                            freshFields.data.records.forEach((field) => {
+                                                if (field.fieldName && field.headerName) {
+                                                    headerNameMap.set(field.fieldName, field.headerName);
+                                                }
+                                            });
+                                            // Aplikujeme nové headerName hodnoty přes DOM
+                                            setTimeout(() => {
+                                                try {
+                                                    const headerCells = document.querySelectorAll('.ag-header-cell');
+                                                    headerCells.forEach((headerCell) => {
+                                                        const colId = headerCell.getAttribute('col-id');
+                                                        if (colId && headerNameMap.has(colId)) {
+                                                            const headerTextEl = headerCell.querySelector('.ag-header-cell-text');
+                                                            if (headerTextEl) {
+                                                                headerTextEl.textContent = headerNameMap.get(colId);
+                                                            }
+                                                        }
+                                                    });
+                                                    // Vynutíme refresh hlavičky
+                                                    if (gridApiRef.current?.refreshHeader) {
+                                                        gridApiRef.current.refreshHeader();
+                                                    }
+                                                }
+                                                catch (headerError) {
+                                                    console.error('[GridLayout] Error updating headers:', headerError);
+                                                }
+                                            }, 50);
+                                        }
+                                    }
+                                }
+                            }, 150);
+                        }
+                        catch (refreshError) {
+                            console.error('[GridLayout] Error in post-save refresh:', refreshError);
+                            // Fallback na standardní applySavedLayout
+                            setTimeout(() => {
+                                if (gridApiRef.current) {
+                                    applySavedLayout(true);
+                                }
+                            }, 200);
+                        }
+                    });
                     if (onLayoutSaved) {
-                        onLayoutSaved(userFields, columnState);
+                        onLayoutSaved(completeUserFields);
                     }
                 }
-            }
-            else {
-                setHasUnsavedChanges(true);
-            }
-            console.log("✅ Column Editor changes applied successfully");
+            })
+                .catch((error) => {
+                handleError(error, 'při ukládání změn z Column Editoru');
+            });
         }
         catch (error) {
-            handleError(error, 'při aplikování změn z Column Editoru');
+            handleError(error, 'při ukládání změn z Column Editoru');
         }
         finally {
             setIsLoading(false);
+            setIsSaving(false);
         }
-    }, [enabled, autoSave, gridLayoutApi, onLayoutSaved, handleError, userKey, applicationName, gridName, filterName, refetchFields]);
+    };
+    //, [enabled, gridLayoutApi, onLayoutSaved, handleError, userKey, applicationName, gridName, filterName, reloadLayout]);
     // Logika pro zobrazení columnDefs
     const shouldShowColumns = useMemo(() => {
         if (!waitForSavedFields)
@@ -481,34 +1299,108 @@ onLayoutLoaded, onLayoutSaved, onError }) => {
     }, [waitForSavedFields, isFieldsLoading, isLoading]);
     // Pre-transformované columnDefs podle savedFields pro waitForSavedFields mode
     const preTransformedColumnDefs = useMemo(() => {
-        if (!waitForSavedFields || !savedFields?.records || !Array.isArray(columnDefs)) {
-            return columnDefs; // Normální columnDefs
+        // Použijeme aktualizované columnDefs ze stableColumnDefsRef pokud existují
+        const columnDefsToUse = stableColumnDefsRef.current || columnDefs;
+        if (!waitForSavedFields ||
+            !savedFields?.records ||
+            !Array.isArray(columnDefsToUse)) {
+            return columnDefsToUse; // Aktualizované columnDefs
         }
         // Transformujeme columnDefs podle savedFields PŘED zobrazením gridu
-        const columnState = gridLayoutApi.transformFieldsToColumnState(savedFields.records, columnDefs);
+        const columnState = gridLayoutApi.transformFieldsToColumnState(savedFields.records, columnDefsToUse);
         if (!columnState || columnState.length === 0) {
-            return columnDefs; // Pokud není co transformovat, vrátíme původní
+            return columnDefsToUse; // Pokud není co transformovat, vrátíme aktualizované
         }
         // Vytvoříme mapu pro rychlé vyhledávání
         const columnStateMap = new Map();
         columnState.forEach((colState, index) => {
             columnStateMap.set(colState.colId, { ...colState, __order: index });
         });
-        // Seřadíme columnDefs podle pořadí z columnState
-        const sortedColumnDefs = [...columnDefs].sort((a, b) => {
-            const aState = columnStateMap.get(a.field);
-            const bState = columnStateMap.get(b.field);
+        // 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);
+            }
+        });
+        // Seřadíme columnDefs podle pořadí z columnState a upravíme headerName podle savedFields
+        const sortedColumnDefs = [...columnDefsToUse]
+            .sort((a, b) => {
+            const fieldA = a.field || a.colId;
+            const fieldB = b.field || b.colId;
+            const aState = columnStateMap.get(fieldA);
+            const bState = columnStateMap.get(fieldB);
             const aOrder = aState?.__order ?? 999;
             const bOrder = bState?.__order ?? 999;
             return aOrder - bOrder;
-        });
-        console.log("🔄 Pre-transformed columnDefs:", {
-            original: columnDefs.map(cd => cd.field),
-            transformed: sortedColumnDefs.map(cd => cd.field),
-            columnStateOrder: columnState.map(cs => cs.colId)
+        })
+            .map((colDef) => {
+            const fieldId = colDef.field || colDef.colId;
+            const columnStateItem = columnStateMap.get(fieldId);
+            // Aplikujeme jak headerName tak hide hodnotu z API
+            if (fieldId && (headerNameMap.has(fieldId) || columnStateItem)) {
+                return {
+                    ...colDef,
+                    // Aplikujeme headerName z savedFields
+                    ...(headerNameMap.has(fieldId) && { headerName: headerNameMap.get(fieldId) }),
+                    // Aplikujeme hide hodnotu z columnState (z API show hodnoty)
+                    ...(columnStateItem && { hide: columnStateItem.hide }),
+                };
+            }
+            return colDef;
         });
         return sortedColumnDefs;
-    }, [waitForSavedFields, savedFields?.records, columnDefs, gridLayoutApi]);
+    }, [waitForSavedFields, savedFields?.records, columnDefs, gridLayoutApi, columnDefsVersion]);
+    /**
+     * 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]);
     return {
         // State
         isLoading: isLoading || isFieldsLoading,
@@ -516,6 +1408,7 @@ onLayoutLoaded, onLayoutSaved, onError }) => {
         error,
         hasUnsavedChanges,
         isInitialized,
+        isGridReady, // Nový stav pro rychlejší aktivaci event handlerů
         shouldShowColumns, // Nové pole pro řízení zobrazení columnDefs
         preTransformedColumnDefs, // Pre-transformované columnDefs pro waitForSavedFields
         // AG-Grid event handlers
@@ -525,6 +1418,7 @@ onLayoutLoaded, onLayoutSaved, onError }) => {
         onColumnResized: handleColumnResized,
         onColumnVisible: handleColumnVisible,
         onColumnPinned: handleColumnPinned,
+        onRowDataChanged: handleRowDataChanged, // Nový handler pro změnu dat
         // Manual actions
         saveLayout,
         resetToDefault,
@@ -539,7 +1433,7 @@ onLayoutLoaded, onLayoutSaved, onError }) => {
         savedFields: savedFields?.records || [],
         columnDefs, // Původní columnDefs pro Column Editor
         // Utils
-        gridLayoutApi
+        gridLayoutApi,
     };
 };
 export default useGridLayout;