@bit.rhplus/ui.grid 0.0.98 → 0.0.100

package/ColumnBuilder.jsx

@@ -1,1498 +1,1498 @@
-/* eslint-disable */
-import * as React from 'react';
-import Menu from 'antd/es/menu';
-import Dropdown from 'antd/es/dropdown';
-import Button from 'antd/es/button';
-import Divider from 'antd/es/divider';
-import { prepareCellStyle, prepareColDef, getValueByPath, applyColorStyle } from './functions';
-import { currencySymbols } from './enums';
-import { ActionIcon } from './Icons';
-import { CircleHelp, Check, X } from 'lucide-react';
-
-// Globální cache pro názvy zemí (sdílená napříč všemi instancemi ColumnBuilder)
-const COUNTRY_NAMES_CACHE = {};
-
-/**
- * Custom React hook pro detekci hover stavu řádku v AG Grid.
- * Používá MutationObserver pro sledování CSS tříd řádků a detekci hover stavu.
- * Tento hook se používá pro akční tlačítka, která se zobrazují pouze při hoveru nad řádkem.
- * @param {Object} params - AG Grid parametry buňky obsahující informace o řádku
- * @returns {Object} Objekt s boolean příznakem isRowHovered
- */
-const useRowHoverActionRenderer = (params) => {
-  const [isRowHovered, setIsRowHovered] = React.useState(false);
-  const rowRef = React.useRef(null);
-
-  React.useEffect(() => {
-    if (!params.node) return undefined;
-
-    // Funkce pro kontrolu, zda je řádek v hover stavu
-    const checkRowHoverState = () => {
-      // Najdeme DOM element řádku pomocí rowIndex
-      const rowElement = document.querySelector(
-        `.ag-row[row-index="${params.rowIndex}"]`
-      );
-      if (rowElement) {
-        rowRef.current = rowElement;
-        // AG-Grid automaticky přidává třídu ag-row-hover k řádku při najetí myší
-        const isHovered = rowElement.classList.contains('ag-row-hover');
-        setIsRowHovered(isHovered);
-      }
-    };
-
-    // Vytvoříme MutationObserver pro sledování změn tříd na řádku
-    const observer = new MutationObserver((mutations) => {
-      mutations.forEach((mutation) => {
-        if (
-          mutation.type === 'attributes' &&
-          mutation.attributeName === 'class'
-        ) {
-          checkRowHoverState();
-        }
-      });
-    });
-
-    // Inicializujeme stav
-    checkRowHoverState();
-
-    // Přidáme observer k element řádku, pokud existuje
-    if (rowRef.current) {
-      observer.observe(rowRef.current, { attributes: true });
-    }
-
-    // Přidáme event listeners na grid container pro sledování pohybu myši
-    const gridContainer = document.querySelector('.ag-root-wrapper');
-    if (gridContainer) {
-      gridContainer.addEventListener('mouseover', checkRowHoverState);
-      gridContainer.addEventListener('mouseout', checkRowHoverState);
-    }
-
-    // Cleanup při odmontování komponenty
-    return () => {
-      if (rowRef.current) {
-        observer.disconnect();
-      }
-      if (gridContainer) {
-        gridContainer.removeEventListener('mouseover', checkRowHoverState);
-        gridContainer.removeEventListener('mouseout', checkRowHoverState);
-      }
-    };
-  }, [params.node, params.rowIndex]);
-
-  return {
-    isRowHovered,
-  };
-};
-
-/**
- * ColumnBuilder třída pro builder pattern vytváření sloupců AG Grid.
- * Poskytuje fluent API pro snadné a čitelné definování různých typů sloupců.
- * Podporuje lokalizaci přes react-intl a automatickou konfiguraci sloupců.
- */
-class ColumnBuilder {
-  /**
-   * Privátní metoda pro přidání připraveného sloupce do kolekce.
-   * Aplikuje standardní konfiguraci sloupce včetně lokalizace.
-   * Centrálně aplikuje color/bgColor styling pokud jsou definovány.
-   * @param {Object} props - Konfigurace sloupce
-   */
-  #addPreparedColumn(props) {
-    const { color, bgColor, colorField, bgColorField, overrideCellStyle, cellAlign, ...restProps } = props;
-    
-    if (color || bgColor || colorField || bgColorField) {
-      const colorAwareCellStyle = (params) => {
-        // Zkombinujeme cellAlign, existující overrideCellStyle a color styling
-        const alignStyle = cellAlign ? prepareCellStyle({ cellAlign }) : {};
-        const existingStyle = overrideCellStyle 
-          ? (typeof overrideCellStyle === 'function' ? overrideCellStyle(params) : overrideCellStyle)
-          : {};
-        
-        const combinedBaseStyle = { ...alignStyle, ...existingStyle };
-        
-        // Aplikujeme color styling na kombinovaný základní styl
-        return applyColorStyle(params, color, bgColor, colorField, bgColorField, combinedBaseStyle);
-      };
-      
-      this.columns.push(prepareColDef(this.intl, { 
-        ...restProps,
-        overrideCellStyle: colorAwareCellStyle 
-      }));
-    } else {
-      this.columns.push(prepareColDef(this.intl, { cellAlign, overrideCellStyle, ...restProps }));
-    }
-  }
-
-  /**
-   * Konstruktor ColumnBuilder třídy.
-   * @param {Object} intl - React-intl objekt pro lokalizaci
-   */
-  constructor(intl) {
-    this.columns = [];
-    this.intl = intl;
-  }
-
-  /**
-   * Přidá základní sloupec do AG Grid s podporou barevného pole.
-   * Umožňuje dynamické obarvení textu buňky na základě hodnoty z jiného pole.
-   * @param {Object} config - Konfigurace sloupce
-   * @param {string|Function} config.color - Barva textu (hex nebo funkce)
-   * @param {string|Function} config.bgColor - Barva pozadí (hex nebo funkce)
-   * @param {string} config.colorField - Název pole obsahujícího barvu pro text buňky
-   * @param {string} config.bgColorField - Název pole obsahujícího barvu pozadí buňky
-   * @param {Object} ...props - Další AG Grid vlastnosti sloupce
-   * @returns {ColumnBuilder} Instance pro chaining
-   */
-  addColumn({ color, bgColor, colorField, bgColorField, ...props }) {
-    this.#addPreparedColumn({ 
-      color, 
-      bgColor, 
-      colorField, 
-      bgColorField, 
-      ...props 
-    });
-    return this;
-  }
-
-  /**
-   * Přidá sloupec s kartou faktury optimalizovaný pro overview mód.
-   * Zobrazuje fakturační informace v kartovém formátu s podporou checkboxu.
-   * @param {Object} config - Konfigurace sloupce
-   * @param {string} [config.field='invoice'] - Název datového pole
-   * @param {string} [config.headerName=''] - Název hlavičky sloupce
-   * @param {number} [config.width=340] - Šířka sloupce
-   * @param {Function} config.onCheckboxChange - Callback při změně stavu checkboxu
-   * @param {string|Function} config.color - Barva textu (hex nebo funkce)
-   * @param {string|Function} config.bgColor - Barva pozadí (hex nebo funkce)
-   * @param {string} config.colorField - Název pole obsahujícího barvu textu
-   * @param {string} config.bgColorField - Název pole obsahujícího barvu pozadí
-   * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
-   * @returns {ColumnBuilder} Instance pro chaining
-   */
-  addInvoiceCardColumn({
-    field = 'invoice',
-    headerName = '',
-    width = 340,
-    onCheckboxChange,
-    color,
-    bgColor,
-    colorField,
-    bgColorField,
-    ...restProps
-  } = {}) {
-    const cellRenderer = 'invoiceCardRenderer';
-
-    this.#addPreparedColumn({
-      headerName,
-      field,
-      width,
-      cellRenderer,
-      suppressSizeToFit: true,
-      cellRendererParams: {
-        onCheckboxChange:
-          onCheckboxChange ||
-          (() => {
-            // Funkce bez console.log
-          }),
-      },
-      color,
-      bgColor,
-      colorField,
-      bgColorField,
-      ...restProps,
-    });
-
-    return this;
-  }
-
-  /**
-   * Přidá sloupec pro zobrazení měny s podporou různých formátů a pozicování symbolu.
-   * Automaticky formátuje hodnoty jako měnu s dvěma desetinnými místy.
-   * @param {Object} config - Konfigurace měnového sloupce
-   * @param {string|Function} config.currency - Kód měny nebo funkce vracející kód měny
-   * @param {string} [config.position] - Pozice symbolu měny ('left' nebo 'right')
-   * @param {Object|Function} config.currencyStyle - CSS styl pro symbol měny
-   * @param {string} [config.cellAlign='right'] - Zarovnání obsahu buňky
-   * @param {boolean} config.editable - Zda je sloupec editovatelný
-   * @param {string|Function} config.color - Barva textu (hex nebo funkce)
-   * @param {string|Function} config.bgColor - Barva pozadí (hex nebo funkce)
-   * @param {string} config.colorField - Název pole obsahujícího barvu textu
-   * @param {string} config.bgColorField - Název pole obsahujícího barvu pozadí
-   * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
-   * @returns {ColumnBuilder} Instance pro chaining
-   */
-  addCurrencyColumn({
-    currency,
-    position,
-    currencyStyle,
-    cellAlign = 'right',
-    editable,
-    color,
-    bgColor,
-    colorField,
-    bgColorField,
-    ...restProps
-  }) {
-    const cellRenderer = (params) => {
-      const currencyValue =
-        typeof currency === 'function' ? currency(params) : currency;
-      const symbol = currencySymbols[currencyValue] || currencyValue;
-
-      // Použití Number.isNaN místo globální isNaN
-      const value =
-        params.value != null && !Number.isNaN(Number(params.value))
-          ? params.value.toFixed(2)
-          : '0.00';
-
-      const style =
-        typeof currencyStyle === 'function'
-          ? currencyStyle(params)
-          : currencyStyle;
-
-      return (
-        <span>
-          {position === 'left' ? (
-            <>
-              <span style={style}>{symbol}</span> {value}
-            </>
-          ) : (
-            <>
-              {value} <span style={style}>{symbol}</span>
-            </>
-          )}
-        </span>
-      );
-    };
-
-    this.#addPreparedColumn({
-      cellAlign,
-      cellRenderer,
-      currency,
-      editable: this.#resolveEditable(editable),
-      color,
-      bgColor,
-      colorField,
-      bgColorField,
-      ...restProps,
-    });
-    return this;
-  }
-
-  /**
-   * Přidá sloupec pro zobrazení data s možností specifikace formátu.
-   * Používá standardní AG Grid date renderer s českým formátováním.
-   * @param {Object} config - Konfigurace datového sloupce
-   * @param {string} [config.dateFormat='DD.MM.YYYY'] - Formát zobrazení data
-   * @param {boolean} config.editable - Zda je sloupec editovatelný
-   * @param {string|Function} config.color - Barva textu (hex nebo funkce)
-   * @param {string|Function} config.bgColor - Barva pozadí (hex nebo funkce)
-   * @param {string} config.colorField - Název pole obsahujícího barvu textu
-   * @param {string} config.bgColorField - Název pole obsahujícího barvu pozadí
-   * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
-   * @returns {ColumnBuilder} Instance pro chaining
-   */
-  addDateColumn({ dateFormat = 'DD.MM.YYYY', editable, color, bgColor, colorField, bgColorField, ...restProps }) {
-    this.#addPreparedColumn({
-      dateRenderer: dateFormat,
-      editable: this.#resolveEditable(editable),
-      color,
-      bgColor,
-      colorField,
-      bgColorField,
-      ...restProps,
-    });
-    return this;
-  }
-
-  /**
-   * Přidá sloupec s klikatelným linkem podporujícím hover efekty.
-   * Link může spouštět akce nebo přepínat overview mód v gridu.
-   * @param {Object} config - Konfigurace linkového sloupce
-   * @param {Function} config.onClick - Callback funkce při kliku na link
-   * @param {Object|Function} config.linkStyle - CSS styl pro link nebo funkce vracející styl
-   * @param {Object|Function} config.hoverStyle - CSS styl pro hover stav
-   * @param {string} [config.cellAlign='left'] - Zarovnání obsahu buňky
-   * @param {boolean} config.editable - Zda je sloupec editovatelný
-   * @param {boolean} [config.overviewToggle=false] - Zda aktivovat overview toggle
-   * @param {string|Function} config.color - Barva textu (hex nebo funkce)
-   * @param {string|Function} config.bgColor - Barva pozadí (hex nebo funkce)
-   * @param {string} config.colorField - Název pole obsahujícího barvu textu
-   * @param {string} config.bgColorField - Název pole obsahujícího barvu pozadí
-   * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
-   * @returns {ColumnBuilder} Instance pro chaining
-   */
-  /**
-   * Přidá sloupec s odkazem (link) - Používá extrahovaný LinkRenderer.
-   * Optimalizovaná implementace s extrahovaným rendererem pro lepší výkon.
-   * @param {Object} config - Konfigurace link sloupce
-   * @param {string} [config.cellAlign='left'] - Horizontální zarovnání obsahu ('left', 'center', 'right')
-   * @param {Function} [config.onClick] - Callback funkce při kliku na link
-   * @param {Object|Function} [config.linkStyle] - CSS styl pro link nebo funkce vracející styl
-   * @param {Object|Function} [config.hoverStyle] - CSS styl pro hover stav nebo funkce vracející styl
-   * @param {boolean} [config.overviewToggle=false] - Příznak zda aktivovat overview toggle funkčnost
-   * @param {boolean} [config.editable=false] - Editovatelnost buňky
-   * @param {Function} [config.visibleGetter] - Funkce určující viditelnost linku
-   * @param {boolean} [config.showOnGroup=false] - Zobrazit link i v group řádcích
-   * @param {Object} config.restProps - Další AG-Grid colDef parametry
-   * @returns {ColumnBuilder} Instance pro fluent API
-   */
-  addLinkColumn({
-    cellAlign = 'left',
-    onClick,
-    linkStyle,
-    hoverStyle,
-    overviewToggle = false,
-    editable = false,
-    visibleGetter,
-    showOnGroup = false,
-    contentTooltip,
-    tooltipField,
-    tooltipInteraction,
-    tooltipShowDelay,
-    color,
-    bgColor,
-    colorField,
-    bgColorField,
-    ...restProps
-  }) {
-    this.#addPreparedColumn({
-      cellAlign,
-      cellRenderer: 'linkRenderer',
-      cellRendererParams: {
-        onClick,
-        linkStyle,
-        hoverStyle,
-        overviewToggle,
-        visibleGetter,
-        showOnGroup,
-      },
-      contentTooltip,
-      tooltipField,
-      tooltipInteraction,
-      tooltipShowDelay,
-      editable: this.#resolveEditable(editable),
-      overviewToggle,
-      color,
-      bgColor,
-      colorField,
-      bgColorField,
-      ...restProps,
-    });
-    return this;
-  }
-
-  /**
-   * Helper metoda pro přidání overview link sloupce s přednastavenými hodnotami.
-   * Specializovaný link sloupec pro přepínání overview módu v gridu.
-   * @param {Object} config - Konfigurace overview link sloupce
-   * @param {string} [config.field='documentNumber'] - Název datového pole
-   * @param {string} [config.headerName=''] - Název hlavičky sloupce
-   * @param {number} [config.width=130] - Šířka sloupce
-   * @param {string} [config.cellAlign='left'] - Zarovnání obsahu buňky
-   * @param {Object|Function} config.linkStyle - CSS styl pro link
-   * @param {Object|Function} config.hoverStyle - CSS styl pro hover stav
-   * @param {boolean} [config.editable=false] - Zda je sloupec editovatelný
-   * @param {Object} ...rest - Další AG Grid vlastnosti sloupce včetně intlId
-   * @returns {ColumnBuilder} Instance pro chaining
-   */
-  addOverviewLinkColumn({
-    field = 'documentNumber',
-    headerName = '',
-    width = 130,
-    cellAlign = 'left',
-    linkStyle,
-    hoverStyle,
-    editable = false,
-    ...rest
-  } = {}) {
-    return this.addLinkColumn({
-      field,
-      headerName: this?.intl?.formatMessage({ id: rest?.intlId }) || headerName,
-      width,
-      cellAlign,
-      linkStyle,
-      hoverStyle,
-      editable,
-      overviewToggle: true,
-      ...rest,
-    });
-  }
-
-  /**
-   * Přidá sloupec pro zobrazení objektů s možností editace a tooltip podporou.
-   * Při hoveru zobrazuje edit tlačítko pro editovatelné objekty.
-   * @param {Object} config - Konfigurace objektového sloupce
-   * @param {boolean} config.contentTooltip - Zda zobrazovat tooltip s obsahem
-   * @param {string} config.tooltipField - Pole obsahující text pro tooltip
-   * @param {boolean} config.tooltipInteraction - Zda povolit interakci s tooltipem
-   * @param {number} [config.tooltipShowDelay=100] - Zpoždění zobrazení tooltipu v ms
-   * @param {boolean} config.editable - Zda je objekt editovatelný
-   * @param {Function} config.onEditClick - Callback při kliku na edit tlačítko
-   * @param {string|Function} config.color - Barva textu (hex nebo funkce)
-   * @param {string|Function} config.bgColor - Barva pozadí (hex nebo funkce)
-   * @param {string} config.colorField - Název pole obsahujícího barvu textu
-   * @param {string} config.bgColorField - Název pole obsahujícího barvu pozadí
-   * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
-   * @returns {ColumnBuilder} Instance pro chaining
-   */
-  /**
-   * Přidá sloupec pro zobrazení objektů - Používá extrahovaný ObjectRenderer.
-   * Optimalizovaná implementace s extrahovaným rendererem pro lepší výkon.
-   * @param {Object} config - Konfigurace object sloupce
-   * @param {boolean} [config.editable=false] - Příznak zda je buňka editovatelná s edit tlačítkem
-   * @param {Function} [config.onEditClick] - Callback funkce při kliku na edit tlačítko
-   * @param {Function} [config.visibleGetter] - Funkce určující viditelnost objektu
-   * @param {boolean} [config.showOnGroup=false] - Zobrazit objekt i v group řádcích
-   * @param {string|Function} [config.displayField] - Název pole nebo funkce pro získání zobrazované hodnoty
-   * @param {Object} config.restProps - Další AG-Grid colDef parametry
-   * @returns {ColumnBuilder} Instance pro fluent API
-   */
-  addObjectColumn({
-    editable = false,
-    onEditClick,
-    visibleGetter,
-    showOnGroup = false,
-    displayField,
-    contentTooltip,
-    tooltipField,
-    tooltipInteraction,
-    tooltipShowDelay,
-    color,
-    bgColor,
-    colorField,
-    bgColorField,
-    ...restProps
-  }) {
-    this.#addPreparedColumn({
-      cellRenderer: 'objectRenderer',
-      cellRendererParams: {
-        editable,
-        onEditClick,
-        visibleGetter,
-        showOnGroup,
-        displayField,
-      },
-      contentTooltip,
-      tooltipField,
-      tooltipInteraction,
-      tooltipShowDelay,
-      editable: this.#resolveEditable(editable),
-      color,
-      bgColor,
-      colorField,
-      bgColorField,
-      ...restProps,
-    });
-    return this;
-  }
-
-  /**
-   * Přidá sloupec pro zobrazení ikon s podporou badge (číselného označení).
-   * Umožňuje podmíněné zobrazování ikon a jejich stylování.
-   * @param {Object} config - Konfigurace ikonového sloupce
-   * @param {Function} [config.visibleGetter=() => true] - Funkce určující viditelnost ikony
-   * @param {string} config.cellAlign - Zarovnání ikony v buňce
-   * @param {string|Function} config.icon - Název ikony nebo funkce vracející ikonu
-   * @param {string} config.iconField - Cesta k poli s názvem Lucide ikony (např. 'accountingType.icon'). Má přednost před icon prop.
-   * @param {string|Function} [config.iconColor] - Barva ikony nebo funkce vracející barvu podle parametrů
-   * @param {number} [config.size=16] - Velikost ikony v pixelech
-   * @param {boolean} [config.iconLeft=false] - Zda zobrazit ikonu vlevo od textu
-   * @param {boolean} [config.iconRight=false] - Zda zobrazit ikonu vpravo od textu
-   * @param {boolean} [config.showText=true] - Zda zobrazit text (hodnotu pole)
-   * @param {number} [config.textGap=5] - Mezera mezi ikonou a textem v pixelech
-   * @param {boolean} [config.showOnGroup=false] - Zda zobrazit ikonu na skupinových řádcích
-   * @param {string|number|Function} config.badge - Text/číslo badge nebo funkce vracející badge
-   * @param {boolean} config.showZero - Zda zobrazit badge s hodnotou 0
-   * @param {string} [config.badgeColor='#dc3545'] - Barva pozadí badge
-   * @param {string} [config.badgeTextColor='white'] - Barva textu badge
-   * @param {string} [config.badgePosition='top-right'] - Pozice badge ('top-right', 'top-left', 'bottom-right', 'bottom-left')
-   * @param {string|Function} config.color - Barva textu (hex nebo funkce)
-   * @param {string|Function} config.bgColor - Barva pozadí (hex nebo funkce)
-   * @param {string} config.colorField - Název pole obsahujícího barvu textu
-   * @param {string} config.bgColorField - Název pole obsahujícího barvu pozadí
-   * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
-   * @returns {ColumnBuilder} Instance pro chaining
-   */
-  addIconColumn({
-    visibleGetter = () => true,
-    cellAlign,
-    icon,
-    iconField,
-    iconColor,
-    size = 16,
-    iconLeft = false,
-    iconRight = false,
-    showText = true,
-    textGap = 5,
-    showOnGroup = false,
-    badge,
-    showZero,
-    badgeColor = '#dc3545',
-    badgeTextColor = 'white',
-    badgePosition = 'top-right',
-    color,
-    bgColor,
-    colorField,
-    bgColorField,
-    ...restProps
-  }) {
-    const iconRendererParams = {
-      cellAlign,
-      visibleGetter,
-      icon,
-      iconField,
-      iconColor,
-      size,
-      iconLeft,
-      iconRight,
-      showText,
-      textGap,
-      showOnGroup,
-      badge,
-      showZero,
-      badgeColor,
-      badgeTextColor,
-      badgePosition,
-    };
-    this.#addPreparedColumn({
-      iconRenderer: true,
-      iconRendererParams,
-      color,
-      bgColor,
-      colorField,
-      bgColorField,
-      ...restProps,
-    });
-    return this;
-  }
-
-  /**
-   * Přidá sloupec pro zobrazování obrázků s fallback na text.
-   * Zobrazuje obrázek z URL, při chybě načtení zobrazí text z hodnoty buňky.
-   * Sloupec je plně filtrovatelný podle textové hodnoty.
-   * @param {Object} config - Konfigurace image sloupce
-   * @param {Function} [config.visibleGetter=() => true] - Funkce určující viditelnost
-   * @param {string} [config.cellAlign='center'] - Zarovnání v buňce
-   * @param {string|Function} config.imageUrl - URL obrázku nebo funkce vracející URL podle parametrů
-   * @param {boolean} [config.fallbackText=true] - Zda zobrazit text při chybě načtení obrázku
-   * @param {string} [config.alt] - Alternativní text pro obrázek
-   * @param {number} [config.imageSize=24] - Velikost obrázku v pixelech
-   * @param {Object|Function} [config.imageStyle] - Vlastní CSS styl pro obrázek
-   * @param {boolean} [config.showOnGroup=false] - Zda zobrazit na skupinových řádcích
-   * @param {string|Function} [config.color] - Barva textu fallbacku
-   * @param {string|Function} [config.bgColor] - Barva pozadí
-   * @param {string} [config.colorField] - Název pole obsahujícího barvu textu
-   * @param {string} [config.bgColorField] - Název pole obsahujícího barvu pozadí
-   * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
-   * @returns {ColumnBuilder} Instance pro chaining
-   */
-  addImageColumn({
-    visibleGetter = () => true,
-    cellAlign = 'center',
-    imageUrl,
-    fallbackText = true,
-    alt,
-    imageSize = 24,
-    imageStyle,
-    showOnGroup = false,
-    color,
-    bgColor,
-    colorField,
-    bgColorField,
-    ...restProps
-  }) {
-    const imageRendererParams = {
-      visibleGetter,
-      cellAlign,
-      imageUrl,
-      fallbackText,
-      alt,
-      imageSize,
-      imageStyle,
-      showOnGroup,
-    };
-    this.#addPreparedColumn({
-      imageRenderer: true,
-      imageRendererParams,
-      color,
-      bgColor,
-      colorField,
-      bgColorField,
-      ...restProps,
-    });
-    return this;
-  }
-
-  /**
-   * Přidá sloupec pro zobrazování stavů s kruhovým pozadím.
-   * Zobrazuje text stavu v kruhovém pozadí s definovanou barvou.
-   * @param {Object} config - Konfigurace stavového sloupce
-   * @param {Function} [config.visibleGetter=() => true] - Funkce určující viditelnost
-   * @param {string} [config.cellAlign='center'] - Zarovnání v buňce
-   * @param {string|Function} [config.bgColor] - Barva pozadí nebo funkce vracející barvu podle parametrů
-   * @param {string|Function} [config.color='white'] - Barva textu nebo funkce vracející barvu
-   * @param {string} [config.bgColorField] - Název pole obsahujícího barvu pozadí
-   * @param {string} [config.colorField] - Název pole obsahujícího barvu textu
-   * @param {string|Function} [config.displayField] - Pole pro zobrazení textu (pokud se liší od field)
-   * @param {number} [config.minWidth=80] - Minimální šířka kruhového pozadí
-   * @param {number} [config.fontSize=12] - Velikost fontu
-   * @param {boolean} [config.showOnGroup=false] - Zda zobrazit na skupinových řádcích
-   * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
-   * @returns {ColumnBuilder} Instance pro chaining
-   */
-  addStateColumn({
-    visibleGetter = () => true,
-    cellAlign = 'center',
-    bgColor,
-    color = 'white',
-    bgColorField,
-    colorField,
-    displayField,
-    minWidth = 80,
-    fontSize = 12,
-    showOnGroup = false,
-    ...restProps
-  }) {
-    const stateRendererParams = {
-      visibleGetter,
-      cellAlign,
-      bgColor,
-      color,
-      bgColorField,
-      colorField,
-      displayField,
-      minWidth,
-      fontSize,
-      showOnGroup,
-    };
-    this.#addPreparedColumn({
-      stateRenderer: true,
-      stateRendererParams,
-      ...restProps,
-    });
-    return this;
-  }
-
-  /**
-   * Přidá sloupec pro zobrazení země s vlajkou a názvem.
-   * Zobrazuje kruhovou vlajku pomocí veřejného API a název nebo zkratku země.
-   * Využívá REST Countries API pro získání překladu názvu země.
-   * @param {Object} config - Konfigurace country sloupce
-   * @param {string} config.countryCode - Pevný kód země (např. 'CZ', 'US')
-   * @param {string} config.countryCodeField - Název pole obsahujícího kód země
-   * @param {string} [config.displayType='name'] - Typ zobrazení ('name' nebo 'code')
-   * @param {string} [config.language='cs'] - Jazyk pro zobrazení názvu ('cs', 'en', atd.)
-   * @param {string} [config.flagPosition='left'] - Pozice vlajky ('left' nebo 'right')
-   * @param {number} [config.flagSize=24] - Velikost vlajky v pixelech
-   * @param {number} [config.textGap=8] - Mezera mezi vlajkou a textem v pixelech
-   * @param {string} [config.cellAlign='left'] - Zarovnání obsahu buňky
-   * @param {Function} [config.getCountryName] - Funkce pro získání názvu země z kódu
-   * @param {string|Function} config.color - Barva textu (hex nebo funkce)
-   * @param {string|Function} config.bgColor - Barva pozadí (hex nebo funkce)
-   * @param {string} config.colorField - Název pole obsahujícího barvu textu
-   * @param {string} config.bgColorField - Název pole obsahujícího barvu pozadí
-   * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
-   * @returns {ColumnBuilder} Instance pro chaining
-   */
-  addCountryColumn({
-    countryCode,
-    countryCodeField,
-    displayType = 'name',
-    language = 'cs',
-    flagPosition = 'left',
-    flagSize = 24,
-    textGap = 8,
-    cellAlign = 'left',
-    getCountryName,
-    color,
-    bgColor,
-    colorField,
-    bgColorField,
-    ...restProps
-  }) {
-    // Memoizovaná CountryFlag sub-komponenta s lazy loading a error handling
-    const CountryFlag = React.memo(({ code, size }) => {
-      const [hasError, setHasError] = React.useState(false);
-
-      const flagUrl = React.useMemo(() => {
-        if (!code) return null;
-        return `https://flagcdn.com/w40/${code.toLowerCase()}.png`;
-      }, [code]);
-
-      const handleError = React.useCallback(() => {
-        setHasError(true);
-      }, []);
-
-      React.useEffect(() => {
-        setHasError(false);
-      }, [flagUrl]);
-
-      const flagStyle = React.useMemo(() => ({
-        width: `${size}px`,
-        height: `${size}px`,
-        borderRadius: '50%',
-        objectFit: 'cover',
-        flexShrink: 0,
-      }), [size]);
-
-      if (hasError || !flagUrl) return null;
-
-      return (
-        <img
-          src={flagUrl}
-          alt={`${code} flag`}
-          style={flagStyle}
-          loading="lazy"
-          onError={handleError}
-        />
-      );
-    });
-
-    CountryFlag.displayName = 'CountryFlag';
-
-    const CountryCellRenderer = React.memo((params) => {
-      const [countryName, setCountryName] = React.useState(null);
-      const [isLoading, setIsLoading] = React.useState(false);
-
-      // Získání kódu země
-      const code = React.useMemo(() => {
-        return countryCodeField
-          ? getValueByPath(params.data, countryCodeField)
-          : (typeof countryCode === 'function' ? countryCode(params) : countryCode);
-      }, [params.data, params.value]);
-
-      const upperCode = React.useMemo(() =>
-        code ? code.toUpperCase() : null,
-        [code]
-      );
-
-      const cacheKey = React.useMemo(() =>
-        upperCode ? `${upperCode}_${language}` : null,
-        [upperCode, language]
-      );
-
-      // Načtení názvu země z REST Countries API
-      React.useEffect(() => {
-        if (!upperCode || !cacheKey) return;
-        if (displayType !== 'name') return;
-        if (getCountryName) return;
-
-        // Kontrola cache
-        if (COUNTRY_NAMES_CACHE[cacheKey]) {
-          setCountryName(COUNTRY_NAMES_CACHE[cacheKey]);
-          return;
-        }
-
-        setIsLoading(true);
-
-        // REST Countries API
-        fetch(`https://restcountries.com/v3.1/alpha/${upperCode}`)
-          .then(response => response.json())
-          .then(data => {
-            if (data && data[0]) {
-              // Získání překladu podle jazyka
-              const translations = data[0].translations;
-              let name = data[0].name.common;
-
-              if (language === 'cs' && translations?.ces) {
-                name = translations.ces.common;
-              } else if (language === 'cze' && translations?.cze) {
-                name = translations.cze.common;
-              } else if (translations && translations[language]) {
-                name = translations[language].common;
-              }
-
-              // Uložení do cache
-              COUNTRY_NAMES_CACHE[cacheKey] = name;
-              setCountryName(name);
-            }
-          })
-          .catch(() => {
-            // V případě chyby použijeme kód země
-            setCountryName(upperCode);
-          })
-          .finally(() => {
-            setIsLoading(false);
-          });
-      }, [upperCode, cacheKey, displayType, getCountryName]);
-
-      // Memoizovaný displayText
-      const displayText = React.useMemo(() => {
-        if (!upperCode) return '';
-
-        if (displayType === 'name') {
-          if (getCountryName) {
-            return getCountryName(code, params);
-          }
-          if (countryName) {
-            return countryName;
-          }
-          if (isLoading) {
-            return '...';
-          }
-          if (params.value) {
-            return params.value;
-          }
-        }
-
-        return upperCode;
-      }, [upperCode, displayType, getCountryName, code, params, countryName, isLoading]);
-
-      // Memoizovaný containerStyle
-      const containerStyle = React.useMemo(() => ({
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent:
-          cellAlign === 'center' ? 'center' :
-          cellAlign === 'right' ? 'flex-end' :
-          'flex-start',
-        width: '100%',
-        height: '100%',
-        gap: `${textGap}px`,
-        flexDirection: flagPosition === 'right' ? 'row-reverse' : 'row',
-      }), [cellAlign, textGap, flagPosition]);
-
-      if (!code) return null;
-
-      return (
-        <div style={containerStyle}>
-          <CountryFlag code={upperCode} size={flagSize} />
-          <span>{displayText}</span>
-        </div>
-      );
-    });
-
-    CountryCellRenderer.displayName = 'CountryCellRenderer';
-
-    const cellRenderer = (params) => {
-      return <CountryCellRenderer {...params} />;
-    };
-
-    this.#addPreparedColumn({
-      cellRenderer,
-      cellRendererParams: {
-        deferRender: true, // AG-Grid deferred rendering pro optimalizaci výkonu při scrollování
-      },
-      color,
-      bgColor,
-      colorField,
-      bgColorField,
-      ...restProps,
-    });
-    return this;
-  }
-
-  /**
-   * Přidá sloupec pro zobrazení boolean hodnot pomocí ikon (zaškrtnutí/křížek).
-   * Podporuje různé ikony pro true/false stav a podmíněnou viditelnost.
-   * @param {Object} config - Konfigurace boolean sloupce
-   * @param {boolean} [config.visibleFalse=true] - Zda zobrazit ikonu pro false hodnotu
-   * @param {boolean} [config.visibleTrue=true] - Zda zobrazit ikonu pro true hodnotu
-   * @param {string} [config.cellAlign='center'] - Zarovnání ikony v buňce
-   * @param {Function} [config.visibleGetter=() => true] - Funkce určující viditelnost ikony
-   * @param {boolean} [config.defaultIcon=true] - Zda zobrazit výchozí ikonu pro undefined hodnoty
-   * @param {string} [config.defaultIconColor='#898989'] - Barva výchozí ikony
-   * @param {number} [config.size=16] - Velikost ikony v pixelech
-   * @param {string} [config.colorTrue='green'] - Barva ikony pro true hodnotu
-   * @param {string} [config.colorFalse='red'] - Barva ikony pro false hodnotu
-   * @param {boolean} [config.showOnGroup=false] - Zda zobrazit ikonu na skupinových řádcích
-   * @param {boolean} config.editable - Zda je sloupec editovatelný
-   * @param {string|Function} config.color - Barva textu (hex nebo funkce)
-   * @param {string|Function} config.bgColor - Barva pozadí (hex nebo funkce)
-   * @param {string} config.colorField - Název pole obsahujícího barvu textu
-   * @param {string} config.bgColorField - Název pole obsahujícího barvu pozadí
-   * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
-   * @returns {ColumnBuilder} Instance pro chaining
-   */
-  addBooleanColumn({
-    visibleFalse = true,
-    visibleTrue = true,
-    cellAlign = 'center',
-    visibleGetter = () => true,
-    defaultIcon = true,
-    defaultIconColor = '#898989',
-    size = 16,
-    colorTrue = 'green',
-    colorFalse = 'red',
-    showOnGroup = false,
-    editable,
-    color,
-    bgColor,
-    colorField,
-    bgColorField,
-    ...restProps
-  }) {
-    // Konstanty mimo komponentu pro lepší výkon
-    const ICON_STYLE = {
-      display: 'inline-block',
-      height: '100%',
-    };
-
-    // Memoizovaná Icon sub-komponenta
-    const Icon = React.memo(({ innerValue, size, colorTrue, colorFalse, visibleTrue, visibleFalse, defaultIcon, defaultIconColor }) => {
-      if (innerValue === undefined || innerValue === null) {
-        if (defaultIcon) {
-          return <CircleHelp size={size} color={defaultIconColor} style={ICON_STYLE} />;
-        }
-        return null;
-      }
-
-      if ((!visibleFalse && !innerValue) || (!visibleTrue && innerValue)) {
-        return null;
-      }
-
-      if (innerValue) {
-        return <Check size={size} color={colorTrue} style={ICON_STYLE} />;
-      }
-
-      return <X size={size} color={colorFalse} style={ICON_STYLE} />;
-    });
-
-    Icon.displayName = 'BooleanIcon';
-
-    // Create a React component for boolean cell renderer
-    const BooleanCellRenderer = React.memo((params) => {
-      const { data, value } = params;
-
-      const visibleResult = React.useMemo(() =>
-        visibleGetter ? visibleGetter(data) : true,
-        [data]
-      );
-
-      const showCondition = React.useMemo(() => {
-        const newItem = (data && data._rh_plus_ag_grid_new_item) || false;
-        return !newItem && (showOnGroup || !!data) && visibleResult;
-      }, [data, visibleResult]);
-
-      const containerStyle = React.useMemo(() => ({
-        width: '100%',
-        display: 'flex',
-        justifyContent: cellAlign ?? 'center',
-        alignItems: 'center',
-        height: '100%',
-      }), [cellAlign]);
-
-      if (!showCondition) return null;
-
-      return (
-        <span style={containerStyle}>
-          <Icon
-            innerValue={value}
-            size={size}
-            colorTrue={colorTrue}
-            colorFalse={colorFalse}
-            visibleTrue={visibleTrue}
-            visibleFalse={visibleFalse}
-            defaultIcon={defaultIcon}
-            defaultIconColor={defaultIconColor}
-          />
-        </span>
-      );
-    });
-
-    BooleanCellRenderer.displayName = 'BooleanCellRenderer';
-
-    // Use the function that returns React component
-    const cellRenderer = (params) => {
-      return <BooleanCellRenderer {...params} />;
-    };
-
-    this.#addPreparedColumn({
-      cellRenderer,
-      cellRendererParams: {
-        deferRender: true, // AG-Grid deferred rendering pro optimalizaci výkonu při scrollování
-      },
-      editable: this.#resolveEditable(editable),
-      color,
-      bgColor,
-      colorField,
-      bgColorField,
-      ...restProps,
-    });
-    return this;
-  }
-
-  /**
-   * Přidá připnutý akční sloupec s dropdown menu, který se zobrazuje pouze při hoveru nad řádkem.
-   * Používa pokročilou detekci hover stavu s MutationObserver pro každou instanci gridu zvlášť.
-   * Sloupec je automaticky připnut vpravo a obsahuje akční tlačítko s kontextovým menu.
-   * @param {Object} config - Konfigurace akčního sloupce
-   * @param {Array} [config.menuItems=[]] - Array položek menu s key, label, disable vlastnostmi
-   * @param {Function} config.onActionClick - Callback při kliku na položku menu (key, params, item)
-   * @param {Function} config.onBeforeShow - Async callback před zobrazením menu pro dynamické položky
-   * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
-   * @returns {ColumnBuilder} Instance pro chaining
-   */
-  addPinnedActionButton({
-    menuItems = [],
-    onActionClick,
-    onBeforeShow,
-    ...restProps
-  } = {}) {
-    const ActionDropdownRenderer = (params) => {
-      const [isRowHovered, setIsRowHovered] = React.useState(false);
-      const [isDropdownVisible, setIsDropdownVisible] = React.useState(false);
-      const [currentMenuItems, setCurrentMenuItems] = React.useState(menuItems);
-
-      const isMountedRef = React.useRef(true);
-      const rowIndexRef = React.useRef(null);
-      const observerRef = React.useRef(null);
-      const gridContainerRef = React.useRef(null);
-      const currentHoveredRowRef = React.useRef(null);
-      const mouseListenersSetupRef = React.useRef(false);
-
-      React.useEffect(() => {
-        return () => {
-          isMountedRef.current = false;
-          cleanup();
-        };
-      }, []);
-
-      // Cleanup funkce
-      const cleanup = () => {
-        if (observerRef.current) {
-          observerRef.current.disconnect();
-          observerRef.current = null;
-        }
-
-        if (gridContainerRef.current && mouseListenersSetupRef.current) {
-          gridContainerRef.current.removeEventListener(
-            'mousemove',
-            handleMouseMove
-          );
-          gridContainerRef.current.removeEventListener(
-            'mouseleave',
-            handleMouseLeave
-          );
-          // gridContainerRef.current.removeEventListener(
-          //   'mouseenter',
-          //   handleMouseEnter
-          // );
-          mouseListenersSetupRef.current = false;
-        }
-      };
-
-      // Získáme row index z params
-      React.useEffect(() => {
-        // ✅ FIX AG-Grid v35: rowIndex může být null - musíme ošetřit
-        if (params.node && params.node.rowIndex != null) {
-          rowIndexRef.current = params.node.rowIndex.toString();
-        } else if (params.rowIndex != null) {
-          rowIndexRef.current = params.rowIndex.toString();
-        }
-      }, [params.node, params.rowIndex]);
-
-      // Mouse event handlers
-      const handleMouseMove = React.useCallback((event) => {
-        if (!isMountedRef.current) return;
-
-        const target = event.target;
-        if (!target) return;
-
-        // Najdeme nejbližší AG-Grid row element
-        let rowElement = target.closest('.ag-row');
-
-        if (rowElement) {
-          // Získáme row index z AG-Grid attributů
-          const rowIndex =
-            rowElement.getAttribute('row-index') ||
-            rowElement.getAttribute('aria-rowindex') ||
-            rowElement.dataset.rowIndex ||
-            rowElement.getAttribute('data-ag-row-index');
-
-          if (rowIndex !== null) {
-            const normalizedRowIndex = rowIndex.toString();
-
-            // KLÍČOVÁ ZMĚNA: Explicitně resetujeme předchozí řádek při změně
-            if (normalizedRowIndex !== currentHoveredRowRef.current) {
-              // Pokud jsme měli předchozí řádek, nastavíme mu hover false
-              if (currentHoveredRowRef.current !== null) {
-                notifyRowHoverChange(currentHoveredRowRef.current, false);
-              }
-
-              // Nastavíme nový řádek jako hovered
-              currentHoveredRowRef.current = normalizedRowIndex;
-              notifyRowHoverChange(normalizedRowIndex, true);
-            }
-          }
-        } else {
-          // Myš není nad žádným řádkem - resetujeme všechny
-          if (currentHoveredRowRef.current !== null) {
-            notifyRowHoverChange(currentHoveredRowRef.current, false);
-            currentHoveredRowRef.current = null;
-          }
-        }
-      }, []);
-
-      const handleMouseLeave = React.useCallback((event) => {
-        if (!isMountedRef.current) return;
-
-        // Lepší detekce opuštění gridu
-        const relatedTarget = event.relatedTarget;
-
-        // Pokud myš opustí celý grid container NEBO jde mimo dokument
-        if (
-          gridContainerRef.current &&
-          (!relatedTarget || !gridContainerRef.current.contains(relatedTarget))
-        ) {
-          if (currentHoveredRowRef.current !== null) {
-            notifyRowHoverChange(currentHoveredRowRef.current, false);
-            currentHoveredRowRef.current = null;
-          }
-        }
-      }, []);
-
-      // Notifikace o změně hover stavu pro tento specifický grid
-      const notifyRowHoverChange = (rowIndex, isHovered) => {
-        if (!isMountedRef.current) return;
-
-        // EXPLICITNÍ ŘÍZENÍ: Pokud nastavujeme hover false, resetujeme stav pro všechny řádky
-        if (!isHovered && rowIndexRef.current) {
-          setIsRowHovered(false);
-        }
-
-        // Pokud je toto náš řádek a nastavujeme hover true, aktualizujeme stav
-        if (isHovered && rowIndexRef.current === rowIndex) {
-          setIsRowHovered(true);
-        }
-      };
-
-      // Nastavení observer pro tento konkrétní grid
-      const setupGridObserver = React.useCallback(() => {
-        if (!params.api || observerRef.current || !isMountedRef.current) return;
-
-        // Najdeme grid container pro tento konkrétní grid instance
-        const findThisGridContainer = () => {
-          if (params.eGridCell) {
-            let current = params.eGridCell;
-            while (current && current !== document.body) {
-              if (
-                current.classList &&
-                (current.classList.contains('ag-root-wrapper') ||
-                  current.classList.contains('ag-theme-alpine') ||
-                  current.classList.contains('ag-theme-balham') ||
-                  current.classList.contains('ag-theme-material') ||
-                  current.classList.contains('ag-theme-fresh') ||
-                  current.classList.contains('ag-theme-dark') ||
-                  current.classList.contains('ag-theme-blue') ||
-                  current.classList.contains('ag-theme-bootstrap'))
-              ) {
-                return current;
-              }
-              current = current.parentElement;
-            }
-          }
-          return null;
-        };
-
-        const gridContainer = findThisGridContainer();
-        if (!gridContainer) {
-          // Zkusíme znovu za chvíli
-          setTimeout(setupGridObserver, 100);
-          return;
-        }
-
-        gridContainerRef.current = gridContainer;
-
-        // Přidáme mouse event listenery pouze pokud ještě nejsou
-        if (!mouseListenersSetupRef.current) {
-          gridContainer.addEventListener('mousemove', handleMouseMove, {
-            passive: true,
-          });
-          gridContainer.addEventListener('mouseleave', handleMouseLeave, {
-            passive: true,
-          });
-
-          // DŮLEŽITÉ: Přidáme také mouseenter pro reset při vstupu do gridu
-          const handleMouseEnter = () => {
-            if (isMountedRef.current) {
-              // Reset stavu při vstupu do gridu
-              currentHoveredRowRef.current = null;
-              setIsRowHovered(false);
-            }
-          };
-          gridContainer.addEventListener('mouseenter', handleMouseEnter, {
-            passive: true,
-          });
-
-          mouseListenersSetupRef.current = true;
-        }
-
-        // Nastavíme MutationObserver pro tento grid
-        observerRef.current = new MutationObserver((mutations) => {
-          if (!isMountedRef.current) return;
-
-          let shouldRecalculate = false;
-
-          mutations.forEach((mutation) => {
-            if (mutation.type === 'childList') {
-              const addedRows = Array.from(mutation.addedNodes).some(
-                (node) =>
-                  node.nodeType === Node.ELEMENT_NODE &&
-                  (node.classList?.contains('ag-row') ||
-                    node.querySelector?.('.ag-row'))
-              );
-
-              const removedRows = Array.from(mutation.removedNodes).some(
-                (node) =>
-                  node.nodeType === Node.ELEMENT_NODE &&
-                  (node.classList?.contains('ag-row') ||
-                    node.querySelector?.('.ag-row'))
-              );
-
-              if (addedRows || removedRows) {
-                shouldRecalculate = true;
-              }
-            }
-          });
-
-          if (shouldRecalculate) {
-            // Reset hover stavu
-            currentHoveredRowRef.current = null;
-            setIsRowHovered(false);
-
-            // Znovu detekujeme aktuální pozici myši po krátké době
-            setTimeout(() => {
-              if (isMountedRef.current && gridContainerRef.current) {
-                const rect = gridContainerRef.current.getBoundingClientRect();
-                const mouseEvent = new MouseEvent('mousemove', {
-                  clientX: window.lastMouseX || rect.left + rect.width / 2,
-                  clientY: window.lastMouseY || rect.top + rect.height / 2,
-                  bubbles: true,
-                });
-                gridContainerRef.current.dispatchEvent(mouseEvent);
-              }
-            }, 100);
-          }
-        });
-
-        // Spustíme observer na grid container
-        observerRef.current.observe(gridContainer, {
-          childList: true,
-          subtree: true,
-          attributes: false,
-        });
-
-        // Sledujeme pozici myši globálně pro tento observer
-        const trackMouse = (e) => {
-          window.lastMouseX = e.clientX;
-          window.lastMouseY = e.clientY;
-        };
-
-        document.addEventListener('mousemove', trackMouse, { passive: true });
-
-        // Cleanup tracking při unmount
-        return () => {
-          document.removeEventListener('mousemove', trackMouse);
-        };
-      }, [params.api, params.eGridCell, handleMouseMove, handleMouseLeave]);
-
-      // Spustíme setup při mount a při změně params
-      React.useEffect(() => {
-        setupGridObserver();
-      }, [setupGridObserver]);
-
-      const handleVisibleChange = React.useCallback(
-        async (visible) => {
-          if (!isMountedRef.current) return;
-
-          if (visible && onBeforeShow) {
-            try {
-              const updatedMenuItems = await onBeforeShow(params, menuItems);
-              if (
-                updatedMenuItems &&
-                Array.isArray(updatedMenuItems) &&
-                isMountedRef.current
-              ) {
-                setCurrentMenuItems(updatedMenuItems);
-              }
-            } catch (error) {
-              // Removed console.error for production
-              if (isMountedRef.current) {
-                setCurrentMenuItems(menuItems);
-              }
-            }
-          }
-
-          if (isMountedRef.current) {
-            setIsDropdownVisible(visible);
-          }
-        },
-        [params, menuItems, onBeforeShow]
-      );
-
-      React.useEffect(() => {
-        if (isMountedRef.current) {
-          setCurrentMenuItems(menuItems);
-        }
-      }, [menuItems]);
-
-      const menu = React.useMemo(
-        () => (
-          <Menu
-            onClick={(e) => {
-              if (onActionClick) {
-                const item = currentMenuItems.filter(f => f.key === e.key)[0];
-                onActionClick(e.key, params, item);
-              }
-              setIsDropdownVisible(false);
-            }}
-          >
-            {currentMenuItems.map((item) => {
-              if (item.type === 'divider') {
-                return <Divider key={item.key} style={{ margin: '4px 0' }} />;
-              }
-
-              let isDisabled = false;
-              if (typeof item.disable === 'function') {
-                isDisabled = item.disable(params);
-              } else if (typeof item.disable === 'boolean') {
-                isDisabled = item.disable;
-              } else if (item.disabled !== undefined) {
-                isDisabled = item.disabled;
-              }
-
-              return (
-                <Menu.Item key={item.key} disabled={isDisabled}>
-                  {item.label}
-                </Menu.Item>
-              );
-            })}
-          </Menu>
-        ),
-        [currentMenuItems, onActionClick, params]
-      );
-
-      const containerStyle = {
-        width: '32px',
-        height: '32px',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        position: 'relative',
-      };
-
-      const buttonStyle = {
-        minWidth: 'auto',
-        width: '32px',
-        height: '32px',
-        padding: '0',
-        background: 'transparent',
-        border: 'none',
-        cursor: 'pointer',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        opacity: isRowHovered || isDropdownVisible ? 1 : 0,
-        visibility: isRowHovered || isDropdownVisible ? 'visible' : 'hidden',
-        transition: 'opacity 0.15s ease-in-out, visibility 0.15s ease-in-out',
-        pointerEvents: isRowHovered || isDropdownVisible ? 'auto' : 'none',
-      };
-
-      return (
-        <div style={containerStyle}>
-          <Dropdown
-            overlayStyle={{ zIndex: 5000 }}
-            overlay={menu}
-            trigger={['click']}
-            visible={isDropdownVisible}
-            onVisibleChange={handleVisibleChange}
-            getPopupContainer={() => document.body}
-          >
-            <div
-              style={buttonStyle}
-              onClick={(e) => {
-                e.stopPropagation();
-              }}
-            >
-              <ActionIcon />
-            </div>
-          </Dropdown>
-        </div>
-      );
-    };
-
-    this.#addPreparedColumn({
-      headerName: '',
-      pinned: 'right',
-      maxWidth: 40,
-      minWidth: 40,
-      suppressSizeToFit: true,
-      suppressMenu: true,
-      sortable: false,
-      filter: false,
-      resizable: false,
-      cellRenderer: ActionDropdownRenderer,
-      cellRendererParams: {
-        deferRender: true, // AG-Grid deferred rendering pro optimalizaci výkonu při scrollování
-      },
-      cellClass: 'action-button-cell-observer',
-      ...restProps,
-    });
-
-    return this;
-  }
-
-  /**
-   * Přidá sloupec s custom tlačítky s podmíněnou viditelností.
-   * Každé tlačítko může mít vlastní styl, akci a podmínku viditelnosti.
-   * @param {Object} config - Konfigurace tlačítkového sloupce
-   * @param {Array} config.buttons - Array definic tlačítek s vlastnostmi jako text, onClick, style
-   * @param {Function} [config.visibleGetter=() => true] - Funkce určující viditelnost tlačítek
-   * @param {boolean} config.editable - Zda je sloupec editovatelný
-   * @param {string|Function} config.color - Barva textu (hex nebo funkce)
-   * @param {string|Function} config.bgColor - Barva pozadí (hex nebo funkce)
-   * @param {string} config.colorField - Název pole obsahujícího barvu textu
-   * @param {string} config.bgColorField - Název pole obsahujícího barvu pozadí
-   * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
-   * @returns {ColumnBuilder} Instance pro chaining
-   */
-  addButtonColumn({
-    buttons,
-    visibleGetter = () => true,
-    editable,
-    color,
-    bgColor,
-    colorField,
-    bgColorField,
-    ...restProps
-  }) {
-    const buttonRendererParams = {
-      buttons,
-      visibleGetter,
-    };
-    this.#addPreparedColumn({
-      buttonRenderer: true,
-      buttonRendererParams,
-      editable: this.#resolveEditable(editable),
-      color,
-      bgColor,
-      colorField,
-      bgColorField,
-      ...restProps,
-    });
-    return this;
-  }
-
-  /**
-   * Privátní pomocná metoda pro správné nastavení editable vlastnosti sloupce.
-   * Zajišťuje konzistentní zpracování boolean hodnot pro editovatelnost.
-   * @param {boolean|Function} editable - Editovatelnost sloupce nebo funkce vracející boolean
-   * @returns {boolean|Function} Upravená hodnota editovatelnosti
-   */
-  #resolveEditable(editable) {
-    if (!editable) return false;
-    return editable;
-  }
-
-  /**
-   * Finální metoda pro sestavení pole sloupců AG Grid.
-   * Vrací kompletní konfiguraci všech přidaných sloupců připravených pro AG Grid.
-   * @returns {Array} Array připravených definic sloupců pro AG Grid
-   */
-  build() {
-    return this.columns;
-  }
-}
-
-export default ColumnBuilder;
+/* eslint-disable */
+import * as React from 'react';
+import Menu from 'antd/es/menu';
+import Dropdown from 'antd/es/dropdown';
+import Button from 'antd/es/button';
+import Divider from 'antd/es/divider';
+import { prepareCellStyle, prepareColDef, getValueByPath, applyColorStyle } from './functions';
+import { currencySymbols } from './enums';
+import { ActionIcon } from './Icons';
+import { CircleHelp, Check, X } from 'lucide-react';
+
+// Globální cache pro názvy zemí (sdílená napříč všemi instancemi ColumnBuilder)
+const COUNTRY_NAMES_CACHE = {};
+
+/**
+ * Custom React hook pro detekci hover stavu řádku v AG Grid.
+ * Používá MutationObserver pro sledování CSS tříd řádků a detekci hover stavu.
+ * Tento hook se používá pro akční tlačítka, která se zobrazují pouze při hoveru nad řádkem.
+ * @param {Object} params - AG Grid parametry buňky obsahující informace o řádku
+ * @returns {Object} Objekt s boolean příznakem isRowHovered
+ */
+const useRowHoverActionRenderer = (params) => {
+  const [isRowHovered, setIsRowHovered] = React.useState(false);
+  const rowRef = React.useRef(null);
+
+  React.useEffect(() => {
+    if (!params.node) return undefined;
+
+    // Funkce pro kontrolu, zda je řádek v hover stavu
+    const checkRowHoverState = () => {
+      // Najdeme DOM element řádku pomocí rowIndex
+      const rowElement = document.querySelector(
+        `.ag-row[row-index="${params.rowIndex}"]`
+      );
+      if (rowElement) {
+        rowRef.current = rowElement;
+        // AG-Grid automaticky přidává třídu ag-row-hover k řádku při najetí myší
+        const isHovered = rowElement.classList.contains('ag-row-hover');
+        setIsRowHovered(isHovered);
+      }
+    };
+
+    // Vytvoříme MutationObserver pro sledování změn tříd na řádku
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (
+          mutation.type === 'attributes' &&
+          mutation.attributeName === 'class'
+        ) {
+          checkRowHoverState();
+        }
+      });
+    });
+
+    // Inicializujeme stav
+    checkRowHoverState();
+
+    // Přidáme observer k element řádku, pokud existuje
+    if (rowRef.current) {
+      observer.observe(rowRef.current, { attributes: true });
+    }
+
+    // Přidáme event listeners na grid container pro sledování pohybu myši
+    const gridContainer = document.querySelector('.ag-root-wrapper');
+    if (gridContainer) {
+      gridContainer.addEventListener('mouseover', checkRowHoverState);
+      gridContainer.addEventListener('mouseout', checkRowHoverState);
+    }
+
+    // Cleanup při odmontování komponenty
+    return () => {
+      if (rowRef.current) {
+        observer.disconnect();
+      }
+      if (gridContainer) {
+        gridContainer.removeEventListener('mouseover', checkRowHoverState);
+        gridContainer.removeEventListener('mouseout', checkRowHoverState);
+      }
+    };
+  }, [params.node, params.rowIndex]);
+
+  return {
+    isRowHovered,
+  };
+};
+
+/**
+ * ColumnBuilder třída pro builder pattern vytváření sloupců AG Grid.
+ * Poskytuje fluent API pro snadné a čitelné definování různých typů sloupců.
+ * Podporuje lokalizaci přes react-intl a automatickou konfiguraci sloupců.
+ */
+class ColumnBuilder {
+  /**
+   * Privátní metoda pro přidání připraveného sloupce do kolekce.
+   * Aplikuje standardní konfiguraci sloupce včetně lokalizace.
+   * Centrálně aplikuje color/bgColor styling pokud jsou definovány.
+   * @param {Object} props - Konfigurace sloupce
+   */
+  #addPreparedColumn(props) {
+    const { color, bgColor, colorField, bgColorField, overrideCellStyle, cellAlign, ...restProps } = props;
+    
+    if (color || bgColor || colorField || bgColorField) {
+      const colorAwareCellStyle = (params) => {
+        // Zkombinujeme cellAlign, existující overrideCellStyle a color styling
+        const alignStyle = cellAlign ? prepareCellStyle({ cellAlign }) : {};
+        const existingStyle = overrideCellStyle 
+          ? (typeof overrideCellStyle === 'function' ? overrideCellStyle(params) : overrideCellStyle)
+          : {};
+        
+        const combinedBaseStyle = { ...alignStyle, ...existingStyle };
+        
+        // Aplikujeme color styling na kombinovaný základní styl
+        return applyColorStyle(params, color, bgColor, colorField, bgColorField, combinedBaseStyle);
+      };
+      
+      this.columns.push(prepareColDef(this.intl, { 
+        ...restProps,
+        overrideCellStyle: colorAwareCellStyle 
+      }));
+    } else {
+      this.columns.push(prepareColDef(this.intl, { cellAlign, overrideCellStyle, ...restProps }));
+    }
+  }
+
+  /**
+   * Konstruktor ColumnBuilder třídy.
+   * @param {Object} intl - React-intl objekt pro lokalizaci
+   */
+  constructor(intl) {
+    this.columns = [];
+    this.intl = intl;
+  }
+
+  /**
+   * Přidá základní sloupec do AG Grid s podporou barevného pole.
+   * Umožňuje dynamické obarvení textu buňky na základě hodnoty z jiného pole.
+   * @param {Object} config - Konfigurace sloupce
+   * @param {string|Function} config.color - Barva textu (hex nebo funkce)
+   * @param {string|Function} config.bgColor - Barva pozadí (hex nebo funkce)
+   * @param {string} config.colorField - Název pole obsahujícího barvu pro text buňky
+   * @param {string} config.bgColorField - Název pole obsahujícího barvu pozadí buňky
+   * @param {Object} ...props - Další AG Grid vlastnosti sloupce
+   * @returns {ColumnBuilder} Instance pro chaining
+   */
+  addColumn({ color, bgColor, colorField, bgColorField, ...props }) {
+    this.#addPreparedColumn({ 
+      color, 
+      bgColor, 
+      colorField, 
+      bgColorField, 
+      ...props 
+    });
+    return this;
+  }
+
+  /**
+   * Přidá sloupec s kartou faktury optimalizovaný pro overview mód.
+   * Zobrazuje fakturační informace v kartovém formátu s podporou checkboxu.
+   * @param {Object} config - Konfigurace sloupce
+   * @param {string} [config.field='invoice'] - Název datového pole
+   * @param {string} [config.headerName=''] - Název hlavičky sloupce
+   * @param {number} [config.width=340] - Šířka sloupce
+   * @param {Function} config.onCheckboxChange - Callback při změně stavu checkboxu
+   * @param {string|Function} config.color - Barva textu (hex nebo funkce)
+   * @param {string|Function} config.bgColor - Barva pozadí (hex nebo funkce)
+   * @param {string} config.colorField - Název pole obsahujícího barvu textu
+   * @param {string} config.bgColorField - Název pole obsahujícího barvu pozadí
+   * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
+   * @returns {ColumnBuilder} Instance pro chaining
+   */
+  addInvoiceCardColumn({
+    field = 'invoice',
+    headerName = '',
+    width = 340,
+    onCheckboxChange,
+    color,
+    bgColor,
+    colorField,
+    bgColorField,
+    ...restProps
+  } = {}) {
+    const cellRenderer = 'invoiceCardRenderer';
+
+    this.#addPreparedColumn({
+      headerName,
+      field,
+      width,
+      cellRenderer,
+      suppressSizeToFit: true,
+      cellRendererParams: {
+        onCheckboxChange:
+          onCheckboxChange ||
+          (() => {
+            // Funkce bez console.log
+          }),
+      },
+      color,
+      bgColor,
+      colorField,
+      bgColorField,
+      ...restProps,
+    });
+
+    return this;
+  }
+
+  /**
+   * Přidá sloupec pro zobrazení měny s podporou různých formátů a pozicování symbolu.
+   * Automaticky formátuje hodnoty jako měnu s dvěma desetinnými místy.
+   * @param {Object} config - Konfigurace měnového sloupce
+   * @param {string|Function} config.currency - Kód měny nebo funkce vracející kód měny
+   * @param {string} [config.position] - Pozice symbolu měny ('left' nebo 'right')
+   * @param {Object|Function} config.currencyStyle - CSS styl pro symbol měny
+   * @param {string} [config.cellAlign='right'] - Zarovnání obsahu buňky
+   * @param {boolean} config.editable - Zda je sloupec editovatelný
+   * @param {string|Function} config.color - Barva textu (hex nebo funkce)
+   * @param {string|Function} config.bgColor - Barva pozadí (hex nebo funkce)
+   * @param {string} config.colorField - Název pole obsahujícího barvu textu
+   * @param {string} config.bgColorField - Název pole obsahujícího barvu pozadí
+   * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
+   * @returns {ColumnBuilder} Instance pro chaining
+   */
+  addCurrencyColumn({
+    currency,
+    position,
+    currencyStyle,
+    cellAlign = 'right',
+    editable,
+    color,
+    bgColor,
+    colorField,
+    bgColorField,
+    ...restProps
+  }) {
+    const cellRenderer = (params) => {
+      const currencyValue =
+        typeof currency === 'function' ? currency(params) : currency;
+      const symbol = currencySymbols[currencyValue] || currencyValue;
+
+      // Použití Number.isNaN místo globální isNaN
+      const value =
+        params.value != null && !Number.isNaN(Number(params.value))
+          ? params.value.toFixed(2)
+          : '0.00';
+
+      const style =
+        typeof currencyStyle === 'function'
+          ? currencyStyle(params)
+          : currencyStyle;
+
+      return (
+        <span>
+          {position === 'left' ? (
+            <>
+              <span style={style}>{symbol}</span> {value}
+            </>
+          ) : (
+            <>
+              {value} <span style={style}>{symbol}</span>
+            </>
+          )}
+        </span>
+      );
+    };
+
+    this.#addPreparedColumn({
+      cellAlign,
+      cellRenderer,
+      currency,
+      editable: this.#resolveEditable(editable),
+      color,
+      bgColor,
+      colorField,
+      bgColorField,
+      ...restProps,
+    });
+    return this;
+  }
+
+  /**
+   * Přidá sloupec pro zobrazení data s možností specifikace formátu.
+   * Používá standardní AG Grid date renderer s českým formátováním.
+   * @param {Object} config - Konfigurace datového sloupce
+   * @param {string} [config.dateFormat='DD.MM.YYYY'] - Formát zobrazení data
+   * @param {boolean} config.editable - Zda je sloupec editovatelný
+   * @param {string|Function} config.color - Barva textu (hex nebo funkce)
+   * @param {string|Function} config.bgColor - Barva pozadí (hex nebo funkce)
+   * @param {string} config.colorField - Název pole obsahujícího barvu textu
+   * @param {string} config.bgColorField - Název pole obsahujícího barvu pozadí
+   * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
+   * @returns {ColumnBuilder} Instance pro chaining
+   */
+  addDateColumn({ dateFormat = 'DD.MM.YYYY', editable, color, bgColor, colorField, bgColorField, ...restProps }) {
+    this.#addPreparedColumn({
+      dateRenderer: dateFormat,
+      editable: this.#resolveEditable(editable),
+      color,
+      bgColor,
+      colorField,
+      bgColorField,
+      ...restProps,
+    });
+    return this;
+  }
+
+  /**
+   * Přidá sloupec s klikatelným linkem podporujícím hover efekty.
+   * Link může spouštět akce nebo přepínat overview mód v gridu.
+   * @param {Object} config - Konfigurace linkového sloupce
+   * @param {Function} config.onClick - Callback funkce při kliku na link
+   * @param {Object|Function} config.linkStyle - CSS styl pro link nebo funkce vracející styl
+   * @param {Object|Function} config.hoverStyle - CSS styl pro hover stav
+   * @param {string} [config.cellAlign='left'] - Zarovnání obsahu buňky
+   * @param {boolean} config.editable - Zda je sloupec editovatelný
+   * @param {boolean} [config.overviewToggle=false] - Zda aktivovat overview toggle
+   * @param {string|Function} config.color - Barva textu (hex nebo funkce)
+   * @param {string|Function} config.bgColor - Barva pozadí (hex nebo funkce)
+   * @param {string} config.colorField - Název pole obsahujícího barvu textu
+   * @param {string} config.bgColorField - Název pole obsahujícího barvu pozadí
+   * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
+   * @returns {ColumnBuilder} Instance pro chaining
+   */
+  /**
+   * Přidá sloupec s odkazem (link) - Používá extrahovaný LinkRenderer.
+   * Optimalizovaná implementace s extrahovaným rendererem pro lepší výkon.
+   * @param {Object} config - Konfigurace link sloupce
+   * @param {string} [config.cellAlign='left'] - Horizontální zarovnání obsahu ('left', 'center', 'right')
+   * @param {Function} [config.onClick] - Callback funkce při kliku na link
+   * @param {Object|Function} [config.linkStyle] - CSS styl pro link nebo funkce vracející styl
+   * @param {Object|Function} [config.hoverStyle] - CSS styl pro hover stav nebo funkce vracející styl
+   * @param {boolean} [config.overviewToggle=false] - Příznak zda aktivovat overview toggle funkčnost
+   * @param {boolean} [config.editable=false] - Editovatelnost buňky
+   * @param {Function} [config.visibleGetter] - Funkce určující viditelnost linku
+   * @param {boolean} [config.showOnGroup=false] - Zobrazit link i v group řádcích
+   * @param {Object} config.restProps - Další AG-Grid colDef parametry
+   * @returns {ColumnBuilder} Instance pro fluent API
+   */
+  addLinkColumn({
+    cellAlign = 'left',
+    onClick,
+    linkStyle,
+    hoverStyle,
+    overviewToggle = false,
+    editable = false,
+    visibleGetter,
+    showOnGroup = false,
+    contentTooltip,
+    tooltipField,
+    tooltipInteraction,
+    tooltipShowDelay,
+    color,
+    bgColor,
+    colorField,
+    bgColorField,
+    ...restProps
+  }) {
+    this.#addPreparedColumn({
+      cellAlign,
+      cellRenderer: 'linkRenderer',
+      cellRendererParams: {
+        onClick,
+        linkStyle,
+        hoverStyle,
+        overviewToggle,
+        visibleGetter,
+        showOnGroup,
+      },
+      contentTooltip,
+      tooltipField,
+      tooltipInteraction,
+      tooltipShowDelay,
+      editable: this.#resolveEditable(editable),
+      overviewToggle,
+      color,
+      bgColor,
+      colorField,
+      bgColorField,
+      ...restProps,
+    });
+    return this;
+  }
+
+  /**
+   * Helper metoda pro přidání overview link sloupce s přednastavenými hodnotami.
+   * Specializovaný link sloupec pro přepínání overview módu v gridu.
+   * @param {Object} config - Konfigurace overview link sloupce
+   * @param {string} [config.field='documentNumber'] - Název datového pole
+   * @param {string} [config.headerName=''] - Název hlavičky sloupce
+   * @param {number} [config.width=130] - Šířka sloupce
+   * @param {string} [config.cellAlign='left'] - Zarovnání obsahu buňky
+   * @param {Object|Function} config.linkStyle - CSS styl pro link
+   * @param {Object|Function} config.hoverStyle - CSS styl pro hover stav
+   * @param {boolean} [config.editable=false] - Zda je sloupec editovatelný
+   * @param {Object} ...rest - Další AG Grid vlastnosti sloupce včetně intlId
+   * @returns {ColumnBuilder} Instance pro chaining
+   */
+  addOverviewLinkColumn({
+    field = 'documentNumber',
+    headerName = '',
+    width = 130,
+    cellAlign = 'left',
+    linkStyle,
+    hoverStyle,
+    editable = false,
+    ...rest
+  } = {}) {
+    return this.addLinkColumn({
+      field,
+      headerName: this?.intl?.formatMessage({ id: rest?.intlId }) || headerName,
+      width,
+      cellAlign,
+      linkStyle,
+      hoverStyle,
+      editable,
+      overviewToggle: true,
+      ...rest,
+    });
+  }
+
+  /**
+   * Přidá sloupec pro zobrazení objektů s možností editace a tooltip podporou.
+   * Při hoveru zobrazuje edit tlačítko pro editovatelné objekty.
+   * @param {Object} config - Konfigurace objektového sloupce
+   * @param {boolean} config.contentTooltip - Zda zobrazovat tooltip s obsahem
+   * @param {string} config.tooltipField - Pole obsahující text pro tooltip
+   * @param {boolean} config.tooltipInteraction - Zda povolit interakci s tooltipem
+   * @param {number} [config.tooltipShowDelay=100] - Zpoždění zobrazení tooltipu v ms
+   * @param {boolean} config.editable - Zda je objekt editovatelný
+   * @param {Function} config.onEditClick - Callback při kliku na edit tlačítko
+   * @param {string|Function} config.color - Barva textu (hex nebo funkce)
+   * @param {string|Function} config.bgColor - Barva pozadí (hex nebo funkce)
+   * @param {string} config.colorField - Název pole obsahujícího barvu textu
+   * @param {string} config.bgColorField - Název pole obsahujícího barvu pozadí
+   * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
+   * @returns {ColumnBuilder} Instance pro chaining
+   */
+  /**
+   * Přidá sloupec pro zobrazení objektů - Používá extrahovaný ObjectRenderer.
+   * Optimalizovaná implementace s extrahovaným rendererem pro lepší výkon.
+   * @param {Object} config - Konfigurace object sloupce
+   * @param {boolean} [config.editable=false] - Příznak zda je buňka editovatelná s edit tlačítkem
+   * @param {Function} [config.onEditClick] - Callback funkce při kliku na edit tlačítko
+   * @param {Function} [config.visibleGetter] - Funkce určující viditelnost objektu
+   * @param {boolean} [config.showOnGroup=false] - Zobrazit objekt i v group řádcích
+   * @param {string|Function} [config.displayField] - Název pole nebo funkce pro získání zobrazované hodnoty
+   * @param {Object} config.restProps - Další AG-Grid colDef parametry
+   * @returns {ColumnBuilder} Instance pro fluent API
+   */
+  addObjectColumn({
+    editable = false,
+    onEditClick,
+    visibleGetter,
+    showOnGroup = false,
+    displayField,
+    contentTooltip,
+    tooltipField,
+    tooltipInteraction,
+    tooltipShowDelay,
+    color,
+    bgColor,
+    colorField,
+    bgColorField,
+    ...restProps
+  }) {
+    this.#addPreparedColumn({
+      cellRenderer: 'objectRenderer',
+      cellRendererParams: {
+        editable,
+        onEditClick,
+        visibleGetter,
+        showOnGroup,
+        displayField,
+      },
+      contentTooltip,
+      tooltipField,
+      tooltipInteraction,
+      tooltipShowDelay,
+      editable: this.#resolveEditable(editable),
+      color,
+      bgColor,
+      colorField,
+      bgColorField,
+      ...restProps,
+    });
+    return this;
+  }
+
+  /**
+   * Přidá sloupec pro zobrazení ikon s podporou badge (číselného označení).
+   * Umožňuje podmíněné zobrazování ikon a jejich stylování.
+   * @param {Object} config - Konfigurace ikonového sloupce
+   * @param {Function} [config.visibleGetter=() => true] - Funkce určující viditelnost ikony
+   * @param {string} config.cellAlign - Zarovnání ikony v buňce
+   * @param {string|Function} config.icon - Název ikony nebo funkce vracející ikonu
+   * @param {string} config.iconField - Cesta k poli s názvem Lucide ikony (např. 'accountingType.icon'). Má přednost před icon prop.
+   * @param {string|Function} [config.iconColor] - Barva ikony nebo funkce vracející barvu podle parametrů
+   * @param {number} [config.size=16] - Velikost ikony v pixelech
+   * @param {boolean} [config.iconLeft=false] - Zda zobrazit ikonu vlevo od textu
+   * @param {boolean} [config.iconRight=false] - Zda zobrazit ikonu vpravo od textu
+   * @param {boolean} [config.showText=true] - Zda zobrazit text (hodnotu pole)
+   * @param {number} [config.textGap=5] - Mezera mezi ikonou a textem v pixelech
+   * @param {boolean} [config.showOnGroup=false] - Zda zobrazit ikonu na skupinových řádcích
+   * @param {string|number|Function} config.badge - Text/číslo badge nebo funkce vracející badge
+   * @param {boolean} config.showZero - Zda zobrazit badge s hodnotou 0
+   * @param {string} [config.badgeColor='#dc3545'] - Barva pozadí badge
+   * @param {string} [config.badgeTextColor='white'] - Barva textu badge
+   * @param {string} [config.badgePosition='top-right'] - Pozice badge ('top-right', 'top-left', 'bottom-right', 'bottom-left')
+   * @param {string|Function} config.color - Barva textu (hex nebo funkce)
+   * @param {string|Function} config.bgColor - Barva pozadí (hex nebo funkce)
+   * @param {string} config.colorField - Název pole obsahujícího barvu textu
+   * @param {string} config.bgColorField - Název pole obsahujícího barvu pozadí
+   * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
+   * @returns {ColumnBuilder} Instance pro chaining
+   */
+  addIconColumn({
+    visibleGetter = () => true,
+    cellAlign,
+    icon,
+    iconField,
+    iconColor,
+    size = 16,
+    iconLeft = false,
+    iconRight = false,
+    showText = true,
+    textGap = 5,
+    showOnGroup = false,
+    badge,
+    showZero,
+    badgeColor = '#dc3545',
+    badgeTextColor = 'white',
+    badgePosition = 'top-right',
+    color,
+    bgColor,
+    colorField,
+    bgColorField,
+    ...restProps
+  }) {
+    const iconRendererParams = {
+      cellAlign,
+      visibleGetter,
+      icon,
+      iconField,
+      iconColor,
+      size,
+      iconLeft,
+      iconRight,
+      showText,
+      textGap,
+      showOnGroup,
+      badge,
+      showZero,
+      badgeColor,
+      badgeTextColor,
+      badgePosition,
+    };
+    this.#addPreparedColumn({
+      iconRenderer: true,
+      iconRendererParams,
+      color,
+      bgColor,
+      colorField,
+      bgColorField,
+      ...restProps,
+    });
+    return this;
+  }
+
+  /**
+   * Přidá sloupec pro zobrazování obrázků s fallback na text.
+   * Zobrazuje obrázek z URL, při chybě načtení zobrazí text z hodnoty buňky.
+   * Sloupec je plně filtrovatelný podle textové hodnoty.
+   * @param {Object} config - Konfigurace image sloupce
+   * @param {Function} [config.visibleGetter=() => true] - Funkce určující viditelnost
+   * @param {string} [config.cellAlign='center'] - Zarovnání v buňce
+   * @param {string|Function} config.imageUrl - URL obrázku nebo funkce vracející URL podle parametrů
+   * @param {boolean} [config.fallbackText=true] - Zda zobrazit text při chybě načtení obrázku
+   * @param {string} [config.alt] - Alternativní text pro obrázek
+   * @param {number} [config.imageSize=24] - Velikost obrázku v pixelech
+   * @param {Object|Function} [config.imageStyle] - Vlastní CSS styl pro obrázek
+   * @param {boolean} [config.showOnGroup=false] - Zda zobrazit na skupinových řádcích
+   * @param {string|Function} [config.color] - Barva textu fallbacku
+   * @param {string|Function} [config.bgColor] - Barva pozadí
+   * @param {string} [config.colorField] - Název pole obsahujícího barvu textu
+   * @param {string} [config.bgColorField] - Název pole obsahujícího barvu pozadí
+   * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
+   * @returns {ColumnBuilder} Instance pro chaining
+   */
+  addImageColumn({
+    visibleGetter = () => true,
+    cellAlign = 'center',
+    imageUrl,
+    fallbackText = true,
+    alt,
+    imageSize = 24,
+    imageStyle,
+    showOnGroup = false,
+    color,
+    bgColor,
+    colorField,
+    bgColorField,
+    ...restProps
+  }) {
+    const imageRendererParams = {
+      visibleGetter,
+      cellAlign,
+      imageUrl,
+      fallbackText,
+      alt,
+      imageSize,
+      imageStyle,
+      showOnGroup,
+    };
+    this.#addPreparedColumn({
+      imageRenderer: true,
+      imageRendererParams,
+      color,
+      bgColor,
+      colorField,
+      bgColorField,
+      ...restProps,
+    });
+    return this;
+  }
+
+  /**
+   * Přidá sloupec pro zobrazování stavů s kruhovým pozadím.
+   * Zobrazuje text stavu v kruhovém pozadí s definovanou barvou.
+   * @param {Object} config - Konfigurace stavového sloupce
+   * @param {Function} [config.visibleGetter=() => true] - Funkce určující viditelnost
+   * @param {string} [config.cellAlign='center'] - Zarovnání v buňce
+   * @param {string|Function} [config.bgColor] - Barva pozadí nebo funkce vracející barvu podle parametrů
+   * @param {string|Function} [config.color='white'] - Barva textu nebo funkce vracející barvu
+   * @param {string} [config.bgColorField] - Název pole obsahujícího barvu pozadí
+   * @param {string} [config.colorField] - Název pole obsahujícího barvu textu
+   * @param {string|Function} [config.displayField] - Pole pro zobrazení textu (pokud se liší od field)
+   * @param {number} [config.minWidth=80] - Minimální šířka kruhového pozadí
+   * @param {number} [config.fontSize=12] - Velikost fontu
+   * @param {boolean} [config.showOnGroup=false] - Zda zobrazit na skupinových řádcích
+   * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
+   * @returns {ColumnBuilder} Instance pro chaining
+   */
+  addStateColumn({
+    visibleGetter = () => true,
+    cellAlign = 'center',
+    bgColor,
+    color = 'white',
+    bgColorField,
+    colorField,
+    displayField,
+    minWidth = 80,
+    fontSize = 12,
+    showOnGroup = false,
+    ...restProps
+  }) {
+    const stateRendererParams = {
+      visibleGetter,
+      cellAlign,
+      bgColor,
+      color,
+      bgColorField,
+      colorField,
+      displayField,
+      minWidth,
+      fontSize,
+      showOnGroup,
+    };
+    this.#addPreparedColumn({
+      stateRenderer: true,
+      stateRendererParams,
+      ...restProps,
+    });
+    return this;
+  }
+
+  /**
+   * Přidá sloupec pro zobrazení země s vlajkou a názvem.
+   * Zobrazuje kruhovou vlajku pomocí veřejného API a název nebo zkratku země.
+   * Využívá REST Countries API pro získání překladu názvu země.
+   * @param {Object} config - Konfigurace country sloupce
+   * @param {string} config.countryCode - Pevný kód země (např. 'CZ', 'US')
+   * @param {string} config.countryCodeField - Název pole obsahujícího kód země
+   * @param {string} [config.displayType='name'] - Typ zobrazení ('name' nebo 'code')
+   * @param {string} [config.language='cs'] - Jazyk pro zobrazení názvu ('cs', 'en', atd.)
+   * @param {string} [config.flagPosition='left'] - Pozice vlajky ('left' nebo 'right')
+   * @param {number} [config.flagSize=24] - Velikost vlajky v pixelech
+   * @param {number} [config.textGap=8] - Mezera mezi vlajkou a textem v pixelech
+   * @param {string} [config.cellAlign='left'] - Zarovnání obsahu buňky
+   * @param {Function} [config.getCountryName] - Funkce pro získání názvu země z kódu
+   * @param {string|Function} config.color - Barva textu (hex nebo funkce)
+   * @param {string|Function} config.bgColor - Barva pozadí (hex nebo funkce)
+   * @param {string} config.colorField - Název pole obsahujícího barvu textu
+   * @param {string} config.bgColorField - Název pole obsahujícího barvu pozadí
+   * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
+   * @returns {ColumnBuilder} Instance pro chaining
+   */
+  addCountryColumn({
+    countryCode,
+    countryCodeField,
+    displayType = 'name',
+    language = 'cs',
+    flagPosition = 'left',
+    flagSize = 24,
+    textGap = 8,
+    cellAlign = 'left',
+    getCountryName,
+    color,
+    bgColor,
+    colorField,
+    bgColorField,
+    ...restProps
+  }) {
+    // Memoizovaná CountryFlag sub-komponenta s lazy loading a error handling
+    const CountryFlag = React.memo(({ code, size }) => {
+      const [hasError, setHasError] = React.useState(false);
+
+      const flagUrl = React.useMemo(() => {
+        if (!code) return null;
+        return `https://flagcdn.com/w40/${code.toLowerCase()}.png`;
+      }, [code]);
+
+      const handleError = React.useCallback(() => {
+        setHasError(true);
+      }, []);
+
+      React.useEffect(() => {
+        setHasError(false);
+      }, [flagUrl]);
+
+      const flagStyle = React.useMemo(() => ({
+        width: `${size}px`,
+        height: `${size}px`,
+        borderRadius: '50%',
+        objectFit: 'cover',
+        flexShrink: 0,
+      }), [size]);
+
+      if (hasError || !flagUrl) return null;
+
+      return (
+        <img
+          src={flagUrl}
+          alt={`${code} flag`}
+          style={flagStyle}
+          loading="lazy"
+          onError={handleError}
+        />
+      );
+    });
+
+    CountryFlag.displayName = 'CountryFlag';
+
+    const CountryCellRenderer = React.memo((params) => {
+      const [countryName, setCountryName] = React.useState(null);
+      const [isLoading, setIsLoading] = React.useState(false);
+
+      // Získání kódu země
+      const code = React.useMemo(() => {
+        return countryCodeField
+          ? getValueByPath(params.data, countryCodeField)
+          : (typeof countryCode === 'function' ? countryCode(params) : countryCode);
+      }, [params.data, params.value]);
+
+      const upperCode = React.useMemo(() =>
+        code ? code.toUpperCase() : null,
+        [code]
+      );
+
+      const cacheKey = React.useMemo(() =>
+        upperCode ? `${upperCode}_${language}` : null,
+        [upperCode, language]
+      );
+
+      // Načtení názvu země z REST Countries API
+      React.useEffect(() => {
+        if (!upperCode || !cacheKey) return;
+        if (displayType !== 'name') return;
+        if (getCountryName) return;
+
+        // Kontrola cache
+        if (COUNTRY_NAMES_CACHE[cacheKey]) {
+          setCountryName(COUNTRY_NAMES_CACHE[cacheKey]);
+          return;
+        }
+
+        setIsLoading(true);
+
+        // REST Countries API
+        fetch(`https://restcountries.com/v3.1/alpha/${upperCode}`)
+          .then(response => response.json())
+          .then(data => {
+            if (data && data[0]) {
+              // Získání překladu podle jazyka
+              const translations = data[0].translations;
+              let name = data[0].name.common;
+
+              if (language === 'cs' && translations?.ces) {
+                name = translations.ces.common;
+              } else if (language === 'cze' && translations?.cze) {
+                name = translations.cze.common;
+              } else if (translations && translations[language]) {
+                name = translations[language].common;
+              }
+
+              // Uložení do cache
+              COUNTRY_NAMES_CACHE[cacheKey] = name;
+              setCountryName(name);
+            }
+          })
+          .catch(() => {
+            // V případě chyby použijeme kód země
+            setCountryName(upperCode);
+          })
+          .finally(() => {
+            setIsLoading(false);
+          });
+      }, [upperCode, cacheKey, displayType, getCountryName]);
+
+      // Memoizovaný displayText
+      const displayText = React.useMemo(() => {
+        if (!upperCode) return '';
+
+        if (displayType === 'name') {
+          if (getCountryName) {
+            return getCountryName(code, params);
+          }
+          if (countryName) {
+            return countryName;
+          }
+          if (isLoading) {
+            return '...';
+          }
+          if (params.value) {
+            return params.value;
+          }
+        }
+
+        return upperCode;
+      }, [upperCode, displayType, getCountryName, code, params, countryName, isLoading]);
+
+      // Memoizovaný containerStyle
+      const containerStyle = React.useMemo(() => ({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent:
+          cellAlign === 'center' ? 'center' :
+          cellAlign === 'right' ? 'flex-end' :
+          'flex-start',
+        width: '100%',
+        height: '100%',
+        gap: `${textGap}px`,
+        flexDirection: flagPosition === 'right' ? 'row-reverse' : 'row',
+      }), [cellAlign, textGap, flagPosition]);
+
+      if (!code) return null;
+
+      return (
+        <div style={containerStyle}>
+          <CountryFlag code={upperCode} size={flagSize} />
+          <span>{displayText}</span>
+        </div>
+      );
+    });
+
+    CountryCellRenderer.displayName = 'CountryCellRenderer';
+
+    const cellRenderer = (params) => {
+      return <CountryCellRenderer {...params} />;
+    };
+
+    this.#addPreparedColumn({
+      cellRenderer,
+      cellRendererParams: {
+        deferRender: true, // AG-Grid deferred rendering pro optimalizaci výkonu při scrollování
+      },
+      color,
+      bgColor,
+      colorField,
+      bgColorField,
+      ...restProps,
+    });
+    return this;
+  }
+
+  /**
+   * Přidá sloupec pro zobrazení boolean hodnot pomocí ikon (zaškrtnutí/křížek).
+   * Podporuje různé ikony pro true/false stav a podmíněnou viditelnost.
+   * @param {Object} config - Konfigurace boolean sloupce
+   * @param {boolean} [config.visibleFalse=true] - Zda zobrazit ikonu pro false hodnotu
+   * @param {boolean} [config.visibleTrue=true] - Zda zobrazit ikonu pro true hodnotu
+   * @param {string} [config.cellAlign='center'] - Zarovnání ikony v buňce
+   * @param {Function} [config.visibleGetter=() => true] - Funkce určující viditelnost ikony
+   * @param {boolean} [config.defaultIcon=true] - Zda zobrazit výchozí ikonu pro undefined hodnoty
+   * @param {string} [config.defaultIconColor='#898989'] - Barva výchozí ikony
+   * @param {number} [config.size=16] - Velikost ikony v pixelech
+   * @param {string} [config.colorTrue='green'] - Barva ikony pro true hodnotu
+   * @param {string} [config.colorFalse='red'] - Barva ikony pro false hodnotu
+   * @param {boolean} [config.showOnGroup=false] - Zda zobrazit ikonu na skupinových řádcích
+   * @param {boolean} config.editable - Zda je sloupec editovatelný
+   * @param {string|Function} config.color - Barva textu (hex nebo funkce)
+   * @param {string|Function} config.bgColor - Barva pozadí (hex nebo funkce)
+   * @param {string} config.colorField - Název pole obsahujícího barvu textu
+   * @param {string} config.bgColorField - Název pole obsahujícího barvu pozadí
+   * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
+   * @returns {ColumnBuilder} Instance pro chaining
+   */
+  addBooleanColumn({
+    visibleFalse = true,
+    visibleTrue = true,
+    cellAlign = 'center',
+    visibleGetter = () => true,
+    defaultIcon = true,
+    defaultIconColor = '#898989',
+    size = 16,
+    colorTrue = 'green',
+    colorFalse = 'red',
+    showOnGroup = false,
+    editable,
+    color,
+    bgColor,
+    colorField,
+    bgColorField,
+    ...restProps
+  }) {
+    // Konstanty mimo komponentu pro lepší výkon
+    const ICON_STYLE = {
+      display: 'inline-block',
+      height: '100%',
+    };
+
+    // Memoizovaná Icon sub-komponenta
+    const Icon = React.memo(({ innerValue, size, colorTrue, colorFalse, visibleTrue, visibleFalse, defaultIcon, defaultIconColor }) => {
+      if (innerValue === undefined || innerValue === null) {
+        if (defaultIcon) {
+          return <CircleHelp size={size} color={defaultIconColor} style={ICON_STYLE} />;
+        }
+        return null;
+      }
+
+      if ((!visibleFalse && !innerValue) || (!visibleTrue && innerValue)) {
+        return null;
+      }
+
+      if (innerValue) {
+        return <Check size={size} color={colorTrue} style={ICON_STYLE} />;
+      }
+
+      return <X size={size} color={colorFalse} style={ICON_STYLE} />;
+    });
+
+    Icon.displayName = 'BooleanIcon';
+
+    // Create a React component for boolean cell renderer
+    const BooleanCellRenderer = React.memo((params) => {
+      const { data, value } = params;
+
+      const visibleResult = React.useMemo(() =>
+        visibleGetter ? visibleGetter(data) : true,
+        [data]
+      );
+
+      const showCondition = React.useMemo(() => {
+        const newItem = (data && data._rh_plus_ag_grid_new_item) || false;
+        return !newItem && (showOnGroup || !!data) && visibleResult;
+      }, [data, visibleResult]);
+
+      const containerStyle = React.useMemo(() => ({
+        width: '100%',
+        display: 'flex',
+        justifyContent: cellAlign ?? 'center',
+        alignItems: 'center',
+        height: '100%',
+      }), [cellAlign]);
+
+      if (!showCondition) return null;
+
+      return (
+        <span style={containerStyle}>
+          <Icon
+            innerValue={value}
+            size={size}
+            colorTrue={colorTrue}
+            colorFalse={colorFalse}
+            visibleTrue={visibleTrue}
+            visibleFalse={visibleFalse}
+            defaultIcon={defaultIcon}
+            defaultIconColor={defaultIconColor}
+          />
+        </span>
+      );
+    });
+
+    BooleanCellRenderer.displayName = 'BooleanCellRenderer';
+
+    // Use the function that returns React component
+    const cellRenderer = (params) => {
+      return <BooleanCellRenderer {...params} />;
+    };
+
+    this.#addPreparedColumn({
+      cellRenderer,
+      cellRendererParams: {
+        deferRender: true, // AG-Grid deferred rendering pro optimalizaci výkonu při scrollování
+      },
+      editable: this.#resolveEditable(editable),
+      color,
+      bgColor,
+      colorField,
+      bgColorField,
+      ...restProps,
+    });
+    return this;
+  }
+
+  /**
+   * Přidá připnutý akční sloupec s dropdown menu, který se zobrazuje pouze při hoveru nad řádkem.
+   * Používa pokročilou detekci hover stavu s MutationObserver pro každou instanci gridu zvlášť.
+   * Sloupec je automaticky připnut vpravo a obsahuje akční tlačítko s kontextovým menu.
+   * @param {Object} config - Konfigurace akčního sloupce
+   * @param {Array} [config.menuItems=[]] - Array položek menu s key, label, disable vlastnostmi
+   * @param {Function} config.onActionClick - Callback při kliku na položku menu (key, params, item)
+   * @param {Function} config.onBeforeShow - Async callback před zobrazením menu pro dynamické položky
+   * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
+   * @returns {ColumnBuilder} Instance pro chaining
+   */
+  addPinnedActionButton({
+    menuItems = [],
+    onActionClick,
+    onBeforeShow,
+    ...restProps
+  } = {}) {
+    const ActionDropdownRenderer = (params) => {
+      const [isRowHovered, setIsRowHovered] = React.useState(false);
+      const [isDropdownVisible, setIsDropdownVisible] = React.useState(false);
+      const [currentMenuItems, setCurrentMenuItems] = React.useState(menuItems);
+
+      const isMountedRef = React.useRef(true);
+      const rowIndexRef = React.useRef(null);
+      const observerRef = React.useRef(null);
+      const gridContainerRef = React.useRef(null);
+      const currentHoveredRowRef = React.useRef(null);
+      const mouseListenersSetupRef = React.useRef(false);
+
+      React.useEffect(() => {
+        return () => {
+          isMountedRef.current = false;
+          cleanup();
+        };
+      }, []);
+
+      // Cleanup funkce
+      const cleanup = () => {
+        if (observerRef.current) {
+          observerRef.current.disconnect();
+          observerRef.current = null;
+        }
+
+        if (gridContainerRef.current && mouseListenersSetupRef.current) {
+          gridContainerRef.current.removeEventListener(
+            'mousemove',
+            handleMouseMove
+          );
+          gridContainerRef.current.removeEventListener(
+            'mouseleave',
+            handleMouseLeave
+          );
+          // gridContainerRef.current.removeEventListener(
+          //   'mouseenter',
+          //   handleMouseEnter
+          // );
+          mouseListenersSetupRef.current = false;
+        }
+      };
+
+      // Získáme row index z params
+      React.useEffect(() => {
+        // ✅ FIX AG-Grid v35: rowIndex může být null - musíme ošetřit
+        if (params.node && params.node.rowIndex != null) {
+          rowIndexRef.current = params.node.rowIndex.toString();
+        } else if (params.rowIndex != null) {
+          rowIndexRef.current = params.rowIndex.toString();
+        }
+      }, [params.node, params.rowIndex]);
+
+      // Mouse event handlers
+      const handleMouseMove = React.useCallback((event) => {
+        if (!isMountedRef.current) return;
+
+        const target = event.target;
+        if (!target) return;
+
+        // Najdeme nejbližší AG-Grid row element
+        let rowElement = target.closest('.ag-row');
+
+        if (rowElement) {
+          // Získáme row index z AG-Grid attributů
+          const rowIndex =
+            rowElement.getAttribute('row-index') ||
+            rowElement.getAttribute('aria-rowindex') ||
+            rowElement.dataset.rowIndex ||
+            rowElement.getAttribute('data-ag-row-index');
+
+          if (rowIndex !== null) {
+            const normalizedRowIndex = rowIndex.toString();
+
+            // KLÍČOVÁ ZMĚNA: Explicitně resetujeme předchozí řádek při změně
+            if (normalizedRowIndex !== currentHoveredRowRef.current) {
+              // Pokud jsme měli předchozí řádek, nastavíme mu hover false
+              if (currentHoveredRowRef.current !== null) {
+                notifyRowHoverChange(currentHoveredRowRef.current, false);
+              }
+
+              // Nastavíme nový řádek jako hovered
+              currentHoveredRowRef.current = normalizedRowIndex;
+              notifyRowHoverChange(normalizedRowIndex, true);
+            }
+          }
+        } else {
+          // Myš není nad žádným řádkem - resetujeme všechny
+          if (currentHoveredRowRef.current !== null) {
+            notifyRowHoverChange(currentHoveredRowRef.current, false);
+            currentHoveredRowRef.current = null;
+          }
+        }
+      }, []);
+
+      const handleMouseLeave = React.useCallback((event) => {
+        if (!isMountedRef.current) return;
+
+        // Lepší detekce opuštění gridu
+        const relatedTarget = event.relatedTarget;
+
+        // Pokud myš opustí celý grid container NEBO jde mimo dokument
+        if (
+          gridContainerRef.current &&
+          (!relatedTarget || !gridContainerRef.current.contains(relatedTarget))
+        ) {
+          if (currentHoveredRowRef.current !== null) {
+            notifyRowHoverChange(currentHoveredRowRef.current, false);
+            currentHoveredRowRef.current = null;
+          }
+        }
+      }, []);
+
+      // Notifikace o změně hover stavu pro tento specifický grid
+      const notifyRowHoverChange = (rowIndex, isHovered) => {
+        if (!isMountedRef.current) return;
+
+        // EXPLICITNÍ ŘÍZENÍ: Pokud nastavujeme hover false, resetujeme stav pro všechny řádky
+        if (!isHovered && rowIndexRef.current) {
+          setIsRowHovered(false);
+        }
+
+        // Pokud je toto náš řádek a nastavujeme hover true, aktualizujeme stav
+        if (isHovered && rowIndexRef.current === rowIndex) {
+          setIsRowHovered(true);
+        }
+      };
+
+      // Nastavení observer pro tento konkrétní grid
+      const setupGridObserver = React.useCallback(() => {
+        if (!params.api || observerRef.current || !isMountedRef.current) return;
+
+        // Najdeme grid container pro tento konkrétní grid instance
+        const findThisGridContainer = () => {
+          if (params.eGridCell) {
+            let current = params.eGridCell;
+            while (current && current !== document.body) {
+              if (
+                current.classList &&
+                (current.classList.contains('ag-root-wrapper') ||
+                  current.classList.contains('ag-theme-alpine') ||
+                  current.classList.contains('ag-theme-balham') ||
+                  current.classList.contains('ag-theme-material') ||
+                  current.classList.contains('ag-theme-fresh') ||
+                  current.classList.contains('ag-theme-dark') ||
+                  current.classList.contains('ag-theme-blue') ||
+                  current.classList.contains('ag-theme-bootstrap'))
+              ) {
+                return current;
+              }
+              current = current.parentElement;
+            }
+          }
+          return null;
+        };
+
+        const gridContainer = findThisGridContainer();
+        if (!gridContainer) {
+          // Zkusíme znovu za chvíli
+          setTimeout(setupGridObserver, 100);
+          return;
+        }
+
+        gridContainerRef.current = gridContainer;
+
+        // Přidáme mouse event listenery pouze pokud ještě nejsou
+        if (!mouseListenersSetupRef.current) {
+          gridContainer.addEventListener('mousemove', handleMouseMove, {
+            passive: true,
+          });
+          gridContainer.addEventListener('mouseleave', handleMouseLeave, {
+            passive: true,
+          });
+
+          // DŮLEŽITÉ: Přidáme také mouseenter pro reset při vstupu do gridu
+          const handleMouseEnter = () => {
+            if (isMountedRef.current) {
+              // Reset stavu při vstupu do gridu
+              currentHoveredRowRef.current = null;
+              setIsRowHovered(false);
+            }
+          };
+          gridContainer.addEventListener('mouseenter', handleMouseEnter, {
+            passive: true,
+          });
+
+          mouseListenersSetupRef.current = true;
+        }
+
+        // Nastavíme MutationObserver pro tento grid
+        observerRef.current = new MutationObserver((mutations) => {
+          if (!isMountedRef.current) return;
+
+          let shouldRecalculate = false;
+
+          mutations.forEach((mutation) => {
+            if (mutation.type === 'childList') {
+              const addedRows = Array.from(mutation.addedNodes).some(
+                (node) =>
+                  node.nodeType === Node.ELEMENT_NODE &&
+                  (node.classList?.contains('ag-row') ||
+                    node.querySelector?.('.ag-row'))
+              );
+
+              const removedRows = Array.from(mutation.removedNodes).some(
+                (node) =>
+                  node.nodeType === Node.ELEMENT_NODE &&
+                  (node.classList?.contains('ag-row') ||
+                    node.querySelector?.('.ag-row'))
+              );
+
+              if (addedRows || removedRows) {
+                shouldRecalculate = true;
+              }
+            }
+          });
+
+          if (shouldRecalculate) {
+            // Reset hover stavu
+            currentHoveredRowRef.current = null;
+            setIsRowHovered(false);
+
+            // Znovu detekujeme aktuální pozici myši po krátké době
+            setTimeout(() => {
+              if (isMountedRef.current && gridContainerRef.current) {
+                const rect = gridContainerRef.current.getBoundingClientRect();
+                const mouseEvent = new MouseEvent('mousemove', {
+                  clientX: window.lastMouseX || rect.left + rect.width / 2,
+                  clientY: window.lastMouseY || rect.top + rect.height / 2,
+                  bubbles: true,
+                });
+                gridContainerRef.current.dispatchEvent(mouseEvent);
+              }
+            }, 100);
+          }
+        });
+
+        // Spustíme observer na grid container
+        observerRef.current.observe(gridContainer, {
+          childList: true,
+          subtree: true,
+          attributes: false,
+        });
+
+        // Sledujeme pozici myši globálně pro tento observer
+        const trackMouse = (e) => {
+          window.lastMouseX = e.clientX;
+          window.lastMouseY = e.clientY;
+        };
+
+        document.addEventListener('mousemove', trackMouse, { passive: true });
+
+        // Cleanup tracking při unmount
+        return () => {
+          document.removeEventListener('mousemove', trackMouse);
+        };
+      }, [params.api, params.eGridCell, handleMouseMove, handleMouseLeave]);
+
+      // Spustíme setup při mount a při změně params
+      React.useEffect(() => {
+        setupGridObserver();
+      }, [setupGridObserver]);
+
+      const handleVisibleChange = React.useCallback(
+        async (visible) => {
+          if (!isMountedRef.current) return;
+
+          if (visible && onBeforeShow) {
+            try {
+              const updatedMenuItems = await onBeforeShow(params, menuItems);
+              if (
+                updatedMenuItems &&
+                Array.isArray(updatedMenuItems) &&
+                isMountedRef.current
+              ) {
+                setCurrentMenuItems(updatedMenuItems);
+              }
+            } catch (error) {
+              // Removed console.error for production
+              if (isMountedRef.current) {
+                setCurrentMenuItems(menuItems);
+              }
+            }
+          }
+
+          if (isMountedRef.current) {
+            setIsDropdownVisible(visible);
+          }
+        },
+        [params, menuItems, onBeforeShow]
+      );
+
+      React.useEffect(() => {
+        if (isMountedRef.current) {
+          setCurrentMenuItems(menuItems);
+        }
+      }, [menuItems]);
+
+      const menu = React.useMemo(
+        () => (
+          <Menu
+            onClick={(e) => {
+              if (onActionClick) {
+                const item = currentMenuItems.filter(f => f.key === e.key)[0];
+                onActionClick(e.key, params, item);
+              }
+              setIsDropdownVisible(false);
+            }}
+          >
+            {currentMenuItems.map((item) => {
+              if (item.type === 'divider') {
+                return <Divider key={item.key} style={{ margin: '4px 0' }} />;
+              }
+
+              let isDisabled = false;
+              if (typeof item.disable === 'function') {
+                isDisabled = item.disable(params);
+              } else if (typeof item.disable === 'boolean') {
+                isDisabled = item.disable;
+              } else if (item.disabled !== undefined) {
+                isDisabled = item.disabled;
+              }
+
+              return (
+                <Menu.Item key={item.key} disabled={isDisabled}>
+                  {item.label}
+                </Menu.Item>
+              );
+            })}
+          </Menu>
+        ),
+        [currentMenuItems, onActionClick, params]
+      );
+
+      const containerStyle = {
+        width: '32px',
+        height: '32px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        position: 'relative',
+      };
+
+      const buttonStyle = {
+        minWidth: 'auto',
+        width: '32px',
+        height: '32px',
+        padding: '0',
+        background: 'transparent',
+        border: 'none',
+        cursor: 'pointer',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        opacity: isRowHovered || isDropdownVisible ? 1 : 0,
+        visibility: isRowHovered || isDropdownVisible ? 'visible' : 'hidden',
+        transition: 'opacity 0.15s ease-in-out, visibility 0.15s ease-in-out',
+        pointerEvents: isRowHovered || isDropdownVisible ? 'auto' : 'none',
+      };
+
+      return (
+        <div style={containerStyle}>
+          <Dropdown
+            overlayStyle={{ zIndex: 5000 }}
+            overlay={menu}
+            trigger={['click']}
+            visible={isDropdownVisible}
+            onVisibleChange={handleVisibleChange}
+            getPopupContainer={() => document.body}
+          >
+            <div
+              style={buttonStyle}
+              onClick={(e) => {
+                e.stopPropagation();
+              }}
+            >
+              <ActionIcon />
+            </div>
+          </Dropdown>
+        </div>
+      );
+    };
+
+    this.#addPreparedColumn({
+      headerName: '',
+      pinned: 'right',
+      maxWidth: 40,
+      minWidth: 40,
+      suppressSizeToFit: true,
+      suppressMenu: true,
+      sortable: false,
+      filter: false,
+      resizable: false,
+      cellRenderer: ActionDropdownRenderer,
+      cellRendererParams: {
+        deferRender: true, // AG-Grid deferred rendering pro optimalizaci výkonu při scrollování
+      },
+      cellClass: 'action-button-cell-observer',
+      ...restProps,
+    });
+
+    return this;
+  }
+
+  /**
+   * Přidá sloupec s custom tlačítky s podmíněnou viditelností.
+   * Každé tlačítko může mít vlastní styl, akci a podmínku viditelnosti.
+   * @param {Object} config - Konfigurace tlačítkového sloupce
+   * @param {Array} config.buttons - Array definic tlačítek s vlastnostmi jako text, onClick, style
+   * @param {Function} [config.visibleGetter=() => true] - Funkce určující viditelnost tlačítek
+   * @param {boolean} config.editable - Zda je sloupec editovatelný
+   * @param {string|Function} config.color - Barva textu (hex nebo funkce)
+   * @param {string|Function} config.bgColor - Barva pozadí (hex nebo funkce)
+   * @param {string} config.colorField - Název pole obsahujícího barvu textu
+   * @param {string} config.bgColorField - Název pole obsahujícího barvu pozadí
+   * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
+   * @returns {ColumnBuilder} Instance pro chaining
+   */
+  addButtonColumn({
+    buttons,
+    visibleGetter = () => true,
+    editable,
+    color,
+    bgColor,
+    colorField,
+    bgColorField,
+    ...restProps
+  }) {
+    const buttonRendererParams = {
+      buttons,
+      visibleGetter,
+    };
+    this.#addPreparedColumn({
+      buttonRenderer: true,
+      buttonRendererParams,
+      editable: this.#resolveEditable(editable),
+      color,
+      bgColor,
+      colorField,
+      bgColorField,
+      ...restProps,
+    });
+    return this;
+  }
+
+  /**
+   * Privátní pomocná metoda pro správné nastavení editable vlastnosti sloupce.
+   * Zajišťuje konzistentní zpracování boolean hodnot pro editovatelnost.
+   * @param {boolean|Function} editable - Editovatelnost sloupce nebo funkce vracející boolean
+   * @returns {boolean|Function} Upravená hodnota editovatelnosti
+   */
+  #resolveEditable(editable) {
+    if (!editable) return false;
+    return editable;
+  }
+
+  /**
+   * Finální metoda pro sestavení pole sloupců AG Grid.
+   * Vrací kompletní konfiguraci všech přidaných sloupců připravených pro AG Grid.
+   * @returns {Array} Array připravených definic sloupců pro AG Grid
+   */
+  build() {
+    return this.columns;
+  }
+}
+
+export default ColumnBuilder;
 /* eslint-enable */