@addsign/moje-agenda-shared-lib 2.0.70 → 2.0.72

package/lib/components/datatable/DataTableServer.tsx

@@ -1,1364 +1,1399 @@
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-
-import {
-  Button,
-  DataTableColumn,
-  DateField,
-  DateRangeField,
-  FormField,
-  IOptionItem,
-  Spinner,
-  handleErrors,
-  useFederationContext,
-} from "../../main";
-import {
-  MdArrowBack,
-  MdArrowDownward,
-  MdArrowForward,
-  MdArrowUpward,
-  MdClose,
-  MdOutlineFilterAlt,
-  MdOutlineFilterAltOff,
-  MdOutlineUnfoldMore,
-  MdSearch,
-} from "react-icons/md";
-import { Input } from "../ui/input";
-import { Resizable } from "./Resizable";
-import { DatatableSettings } from "./DatatableSettings";
-import { MultiSelect } from "../ui/multi-select";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "../ui/select";
-
-import * as XLSX from "xlsx";
-
-interface ISortConfig {
-  sortParam: string;
-  direction: "asc" | "desc" | null;
-}
-
-interface DataTableServerProps<T> {
-  id: string;
-  url: string;
-  columns: DataTableColumn<T | "actions">[];
-  title?: string;
-  subtitle?: string;
-  allowSearch?: boolean;
-  showHeader?: boolean;
-  rowAction?: (item: T) => void;
-  // bulkActions?: BulkAction<T>[];
-  bulkAction?: (items: T[]) => JSX.Element;
-  filters?: object;
-  selectedItemKey?: string;
-  itemsPerPageOptions?: IOptionItem[];
-  setMinWidth?: boolean;
-}
-const defaultItemsPerPageOptions: IOptionItem[] = [
-  { value: 10, label: "10" },
-  { value: 50, label: "50" },
-  { value: 100, label: "100" },
-];
-
-type DataTableInternalItems = {
-  _isHighlighted?: boolean;
-  id: string; // Assuming items have an `id` field for identification
-};
-interface DataTableStorageObject {
-  columnFilters: Record<string, string>;
-  showColFilters: boolean;
-  currentPage: number;
-  itemsPerPage: number;
-  sortConfig: ISortConfig | null;
-}
-
-export const resetAllDataTablePaging = () => {
-  Object.keys(localStorage)
-    .filter((key) => key.startsWith("datatable:"))
-    .forEach((key) => {
-      const storageObject = localStorage.getItem(key);
-      if (storageObject) {
-        const parsedObject: DataTableStorageObject = JSON.parse(storageObject);
-        parsedObject.currentPage = 0;
-        localStorage.setItem(key, JSON.stringify(parsedObject));
-      }
-    });
-};
-
-interface IPageable<T> {
-  content: T[];
-  empty: boolean;
-  first: boolean;
-  last: boolean;
-  number: number;
-  numberOfElements: number;
-  size: number;
-  totalElements: number;
-  totalPages: number;
-  isPageable?: boolean;
-}
-
-function DataTableServer<T extends DataTableInternalItems>({
-  id,
-  url,
-  columns,
-  title,
-  subtitle,
-  allowSearch = false,
-  showHeader = true,
-  rowAction,
-  bulkAction,
-  filters,
-  selectedItemKey = "id",
-  itemsPerPageOptions = defaultItemsPerPageOptions,
-  setMinWidth = false,
-}: DataTableServerProps<T>) {
-  const abortControllerRef = useRef<AbortController | null>(null);
-  const topScrollbarRef = useRef<HTMLDivElement | null>(null);
-  const bottomScrollbarRef = useRef<HTMLDivElement | null>(null);
-  const tableRef = useRef<HTMLTableElement | null>(null);
-  const syncWidthRef = useRef<HTMLDivElement | null>(null);
-
-  const [itemsPerPageLocal, setItemsPerPageLocal] = useState<number>(10);
-  const federationContext = useFederationContext();
-  const [data, setData] = useState<IPageable<T>>();
-  const [isLoading, setIsLoading] = useState(false);
-  const [isLocalStorageLoaded, setIsLocalStorageLoaded] = useState(false);
-  const [tableKey, setTableKey] = useState(0);
-
-  const [hasMounted, setHasMounted] = useState(false);
-
-  const [currentPage, setCurrentPage] = useState<number>(0);
-  const [selectedItems, setSelectedItems] = useState<T[]>([]);
-  const [fulltextSearch, setFulltextSearch] = useState("");
-  const [filterOptions, setFilterOptions] = useState<Record<string, any[]>>({});
-  const [columnFilters, setColumnFilters] = useState<{ [key: string]: any }>(
-    {}
-  );
-  const [showColFilters, setShowColFilters] = useState<boolean>(false);
-  const [sortConfig, setSortConfig] = useState<ISortConfig | null>(null);
-  const prevDepsRef = useRef<any[]>([]);
-  const prevFilterDepsRef = useRef<any[]>([]);
-
-  const createDataPageable = (
-    response: any,
-    itemsPerPage: number
-  ): IPageable<T> => {
-    const isPageable = !!response.data?.content;
-    return {
-      content: response.data.content || response.data,
-      empty: isPageable ? response.data.empty : true,
-      first: isPageable ? response.data.first : true,
-      last: isPageable ? response.data.last : true,
-      number: isPageable ? response.data.number : 0,
-      numberOfElements: response.data.numberOfElements || response.data.length,
-      size: response.data?.size || itemsPerPage,
-      totalElements: response.data?.totalElements || response.data.length,
-      totalPages: response.data?.totalPages || 1,
-      isPageable: isPageable,
-    };
-  };
-
-  const [reloadData, setReloadData] = useState(false);
-
-  const mergedFilters: { [key: string]: any } = useMemo(() => {
-    return showColFilters ? { ...columnFilters, ...filters } : filters || {};
-  }, [columnFilters, filters, showColFilters]);
-  useEffect(() => {
-    const currentDeps = [
-      url,
-      showColFilters,
-      columnFilters,
-      itemsPerPageLocal,
-      currentPage,
-      sortConfig,
-      filters,
-      tableKey,
-    ];
-
-    // Kontrola, jestli se skutečně něco změnilo
-    const hasChanged = currentDeps.some((dep, index) => {
-      return JSON.stringify(dep) !== JSON.stringify(prevDepsRef.current[index]);
-    });
-
-    if (hasChanged) {
-      console.log(
-        "setting reloadData - actual change detected",
-        url,
-        showColFilters,
-        columnFilters,
-        itemsPerPageLocal,
-        currentPage,
-        sortConfig,
-        filters,
-        tableKey,
-        reloadData
-      );
-      setReloadData(true);
-    }
-
-    prevDepsRef.current = currentDeps;
-  }, [
-    url,
-    showColFilters,
-    columnFilters,
-    itemsPerPageLocal,
-    currentPage,
-    sortConfig,
-    filters,
-    tableKey,
-  ]);
-
-  useEffect(() => {
-    console.log("reloadData", reloadData);
-    if (reloadData) {
-      if (abortControllerRef.current) {
-        abortControllerRef.current.abort();
-      }
-      // Create a new AbortController for the new request
-      abortControllerRef.current = new AbortController();
-      const currentAbortController = abortControllerRef.current;
-      // load data from API
-
-      if (currentPage === undefined) return;
-      setIsLoading(true);
-
-      //odebrani prazdny filteru a transformace multi-select hodnot
-      const filteredMergedFilters = Object.entries(mergedFilters).reduce(
-        (acc: Record<string, any>, [key, value]) => {
-          // Skip null and empty string values
-          if (value === null || value === "") {
-            return acc;
-          }
-
-          // Handle multi-select values (arrays)
-          if (Array.isArray(value)) {
-            if (value.length > 0) {
-              acc[key] = value.join(",");
-            }
-            return acc;
-          }
-
-          // Handle other values
-          acc[key] = value;
-          return acc;
-        },
-        {}
-      );
-
-      federationContext.apiClient
-        .get(url, {
-          signal: currentAbortController.signal,
-          params: {
-            ...filteredMergedFilters,
-            pageSize: itemsPerPageLocal,
-            page: currentPage,
-            sortBy: sortConfig?.sortParam,
-            sortDirection: sortConfig?.direction,
-          },
-        })
-        .then((response) => {
-          const dataPageable: IPageable<T> = createDataPageable(
-            response,
-            itemsPerPageLocal || 10
-          );
-
-          setData(dataPageable);
-          // setData(response.data);
-          setIsLoading(false);
-        })
-        .catch((error) => {
-          if (error.code === "ERR_CANCELED") {
-            console.log("Request was aborted");
-          } else {
-            console.error("Error fetching data:", error);
-            handleErrors(error, federationContext.emitter);
-            setData({
-              content: [],
-              empty: true,
-              first: true,
-              last: true,
-              number: 0,
-              numberOfElements: 0,
-              size: itemsPerPageLocal || 10,
-              totalElements: 0,
-              totalPages: 1,
-            });
-            setIsLoading(false);
-          }
-        });
-
-      setReloadData(false);
-    }
-  }, [reloadData]);
-  // nastaveni currentPage u  jinych datatable na 0
-  useEffect(() => {
-    Object.keys(localStorage)
-      .filter(
-        (key) => key.startsWith("datatable:") && key !== `datatable:${id}`
-      )
-      .forEach((key) => {
-        const storageObject = localStorage.getItem(key);
-        if (storageObject) {
-          const parsedObject: DataTableStorageObject =
-            JSON.parse(storageObject);
-          parsedObject.currentPage = 0;
-          localStorage.setItem(key, JSON.stringify(parsedObject));
-        }
-      });
-  }, [id]);
-
-  //load from localstorage
-  useEffect(() => {
-    if (id) {
-      const storageKey = `datatable:${id}`;
-
-      const storedStorageObject = localStorage.getItem(storageKey);
-      if (storedStorageObject) {
-        const storageObject: DataTableStorageObject =
-          JSON.parse(storedStorageObject);
-        setColumnFilters(storageObject.columnFilters);
-        setShowColFilters(storageObject.showColFilters);
-        setCurrentPage(storageObject.currentPage || 0);
-        setSortConfig(storageObject.sortConfig || null);
-
-        setItemsPerPageLocal(storageObject.itemsPerPage || 10);
-      }
-      setIsLocalStorageLoaded(true);
-    }
-  }, [id]);
-
-  useEffect(() => {
-    const currentFilterDeps = [columns, federationContext.apiClient];
-
-    // Kontrola, jestli se skutečně něco změnilo
-    const hasFilterChanged = currentFilterDeps.some((dep, index) => {
-      const prev = prevFilterDepsRef.current[index];
-      if (index === 1) {
-        // federationContext.apiClient (index 1) - referenční porovnání
-        return dep !== prev;
-      } else {
-        // columns (index 0) - deep porovnání
-        return JSON.stringify(dep) !== JSON.stringify(prev);
-      }
-    });
-
-    if (hasFilterChanged) {
-      const fetchFilterOptions = async (column: DataTableColumn<T>) => {
-        if (column.filterOptions) {
-          return column.filterOptions;
-        } else if (column.filterSource) {
-          try {
-            const response = await federationContext.apiClient.get(
-              column.filterSource
-            );
-
-            const options: IOptionItem[] = [];
-
-            response.data.forEach((item: any) => {
-              const categoryId =
-                item[column.filterValueKey as keyof typeof item]?.toString();
-              const categoryLabel =
-                item[column.filterLabelKey as keyof typeof item]?.toString();
-              const subcategories = item.subcategories;
-
-              if (
-                Array.isArray(subcategories) &&
-                subcategories.length > 0 &&
-                column.filterParam2
-              ) {
-                //add parent categoriz without subcategiries
-                options.push({
-                  value: categoryId,
-                  label: categoryLabel,
-                });
-                // Multiply options by subcategories
-                subcategories.forEach((subcategory: any) => {
-                  const subcategoryId = subcategory.id?.toString();
-                  const subcategoryLabel = subcategory.name?.toString();
-
-                  if (subcategoryId && subcategoryLabel) {
-                    options.push({
-                      value: `${categoryId}-${subcategoryId}`,
-                      label: `${categoryLabel} - ${subcategoryLabel}`,
-                    });
-                  }
-                });
-              } else {
-                // No subcategories, use category only
-                options.push({
-                  value: categoryId,
-                  label: categoryLabel,
-                });
-              }
-            });
-
-            return options;
-          } catch (error) {
-            console.error("Error fetching filter options:", error);
-            return [];
-          }
-        } else {
-          return [];
-        }
-      };
-
-      const updateFilterOptions = async () => {
-        const newFilterOptions: Record<string, any[]> = {};
-
-        for (const column of columns) {
-          if (
-            (column.filterType === "select" ||
-              column.filterType === "multi-select") &&
-            (column.filterSource || column.filterOptions) &&
-            column.filterValueKey &&
-            column.filterLabelKey &&
-            column.filterParam
-          ) {
-            const options = await fetchFilterOptions(column);
-
-            if (options && column.filterType === "select") {
-              // Filter out empty values and add a "clear" option
-              const filteredOptions = options.filter(
-                (option: IOptionItem) =>
-                  option.value !== null &&
-                  option.value !== undefined &&
-                  option.value !== ""
-              );
-              newFilterOptions[column.filterParam as string] = [
-                { value: "__clear__", label: "Všechny" },
-                ...filteredOptions,
-              ];
-            } else if (options && column.filterType === "multi-select") {
-              newFilterOptions[column.filterParam as string] = options;
-            }
-          }
-        }
-
-        setFilterOptions(newFilterOptions);
-      };
-
-      console.log(
-        "updateFilterOptions - actual change detected",
-        columns,
-        federationContext.apiClient
-      );
-      updateFilterOptions();
-    }
-
-    prevFilterDepsRef.current = currentFilterDeps;
-  }, [columns, federationContext.apiClient]);
-
-  const hasSomeColFilters = useMemo(() => {
-    return columns.some((column) => !!column.filterParam);
-  }, [columns]);
-
-  const requestSort = (sortParam: string) => {
-    setSortConfig((prevSortConfig) => {
-      if (
-        prevSortConfig?.sortParam === sortParam &&
-        prevSortConfig.direction !== null
-      ) {
-        return prevSortConfig.direction === "asc"
-          ? { sortParam, direction: "desc" }
-          : null;
-      } else {
-        return { sortParam, direction: "asc" };
-      }
-    });
-  };
-
-  const getSortIcon = (sortParam: string) => {
-    if (sortConfig?.sortParam === sortParam) {
-      return sortConfig.direction === "asc" ? (
-        <MdArrowUpward fontSize="small" />
-      ) : sortConfig.direction === "desc" ? (
-        <MdArrowDownward fontSize="small" />
-      ) : (
-        <MdOutlineUnfoldMore fontSize="small" className=" " />
-      );
-    }
-    return <MdOutlineUnfoldMore fontSize="small" className=" " />;
-  };
-
-  const handleSelectItem = (item: T) => {
-    setSelectedItems((prevSelectedItems) => {
-      if (
-        prevSelectedItems.find(
-          (selectedItem) =>
-            selectedItem[selectedItemKey as keyof T] ===
-            item[selectedItemKey as keyof T]
-        )
-      ) {
-        return prevSelectedItems.filter(
-          (selectedItem) =>
-            selectedItem[selectedItemKey as keyof T] !==
-            item[selectedItemKey as keyof T]
-        );
-      } else {
-        return [...prevSelectedItems, item];
-      }
-    });
-  };
-
-  const handleSelectAll = () => {
-    if (data && selectedItems.length === data.content.length) {
-      setSelectedItems([]);
-    } else if (data) {
-      setSelectedItems(data.content);
-    }
-  };
-
-  const isSelected = useCallback(
-    (item: T) => {
-      return selectedItems.some(
-        (selectedItem) =>
-          selectedItem[selectedItemKey as keyof T] ===
-          item[selectedItemKey as keyof T]
-      );
-    },
-    [selectedItems, selectedItemKey]
-  );
-
-  const nextPage = () => {
-    setCurrentPage((currentPage || 0) + 1);
-  };
-
-  const prevPage = () => {
-    setCurrentPage((currentPage || 0) - 1);
-  };
-
-  const handleSearchChanged = (
-    e: React.ChangeEvent<
-      HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
-    >
-  ) => {
-    setFulltextSearch(e.target?.value);
-    setCurrentPage(0);
-  };
-  // Pagination display logic
-  const paginationDisplay = `Strana ${(currentPage || 0) + 1} z ${data?.totalPages || 1}`;
-
-  const filterHandler = (
-    filterParam: keyof T,
-    value: string | string[],
-    filterParam2?: string,
-    clearFilterParam2?: boolean
-  ) => {
-    setColumnFilters((prev) => {
-      const newFilters = { ...prev };
-
-      // Handle clearing both filters
-      if (
-        value === "" ||
-        value === "__clear__" ||
-        (Array.isArray(value) && value.length === 0)
-      ) {
-        delete newFilters[String(filterParam)];
-        if (filterParam2) {
-          delete newFilters[filterParam2];
-        }
-        return newFilters;
-      }
-
-      // Handle filterParam2 logic
-      if (filterParam2) {
-        // Check if we should clear filterParam2
-        if (clearFilterParam2) {
-          newFilters[String(filterParam)] = value;
-          delete newFilters[filterParam2];
-          return newFilters;
-        }
-
-        // Handle combined values with delimiter
-        if (typeof value === "string" && value.includes("-")) {
-          const parts = value.split("-");
-          if (parts.length === 2) {
-            newFilters[String(filterParam)] = parts[0];
-            newFilters[filterParam2] = parts[1];
-            return newFilters;
-          }
-        }
-
-        // Handle array values (multi-select) with subcategories
-        if (Array.isArray(value)) {
-          const subcategoryIds: string[] = [];
-          value.forEach((val: string) => {
-            if (val.includes("-")) {
-              const parts = val.split("-");
-              if (parts.length === 2) {
-                subcategoryIds.push(parts[1]);
-              }
-            }
-          });
-
-          newFilters[String(filterParam)] =
-            value.length > 0 ? value : undefined;
-          if (subcategoryIds.length > 0) {
-            newFilters[filterParam2] = subcategoryIds;
-          } else {
-            delete newFilters[filterParam2];
-          }
-          return newFilters;
-        }
-
-        // Value without subcategory - clear filterParam2
-        newFilters[String(filterParam)] = value;
-        delete newFilters[filterParam2];
-        return newFilters;
-      }
-
-      // Regular case without filterParam2
-      newFilters[String(filterParam)] = value;
-      return newFilters;
-    });
-    setCurrentPage(0);
-  };
-  const handleToggleShowColFilters = () => {
-    if (showColFilters && columnFilters !== undefined) {
-      setColumnFilters(columnFilters);
-    }
-
-    setShowColFilters(!showColFilters);
-  };
-
-  // osetreni logiky pro useEffect. prvni nacteni filteru currentPage neresetuje
-  useEffect(() => {
-    if (!hasMounted) {
-      setHasMounted(true); // Ensures this block won't run again
-    } else {
-      setCurrentPage(0);
-    }
-  }, [filters]);
-
-  //store table settings in localstorage
-  useEffect(() => {
-    if (id && isLocalStorageLoaded) {
-      const storageKey = `datatable:${id}`;
-
-      const storageObject: DataTableStorageObject = localStorage.getItem(
-        storageKey
-      )
-        ? (JSON.parse(
-            localStorage.getItem(storageKey)!
-          ) as DataTableStorageObject)
-        : ({} as DataTableStorageObject);
-
-      storageObject.columnFilters = columnFilters || {};
-      // if (showColFilters !== undefined) {
-      //   storageObject.showColFilters = showColFilters;
-      // }
-      storageObject.showColFilters = showColFilters || false;
-      storageObject.currentPage = currentPage || 0;
-      storageObject.sortConfig = sortConfig || null;
-
-      storageObject.itemsPerPage = itemsPerPageLocal || 10;
-
-      localStorage.setItem(storageKey, JSON.stringify(storageObject));
-    }
-  }, [
-    columnFilters,
-    showColFilters,
-    currentPage,
-    // id,   // predbihalo se to a ukladaly se sortCOnfigy z predchozich tabulek
-    itemsPerPageLocal,
-    isLocalStorageLoaded,
-    sortConfig,
-  ]);
-
-  const rerenderTable = () => {
-    setTableKey((previous) => previous + 1);
-  };
-
-  const exportToXLSX = useCallback(() => {
-    // load fresh complete data without pagination ,filters
-    setIsLoading(true);
-
-    //odebrani prazdny filteru a transformace multi-select hodnot
-    const filteredMergedFilters = Object.entries(mergedFilters || {}).reduce(
-      (acc: Record<string, any>, [key, value]) => {
-        // Skip null and empty string values
-        if (value === null || value === "") {
-          return acc;
-        }
-
-        // Handle multi-select values (arrays)
-        if (Array.isArray(value)) {
-          if (value.length > 0) {
-            acc[key] = value.join(",");
-          }
-          return acc;
-        }
-
-        // Handle other values
-        acc[key] = value;
-        return acc;
-      },
-      {}
-    );
-
-    federationContext.apiClient
-      .get(url, {
-        params: {
-          ...filteredMergedFilters,
-          pageSize: 1000000,
-          page: 0,
-          sortBy: sortConfig?.sortParam,
-          sortDirection: sortConfig?.direction,
-        },
-      })
-      .then((response) => {
-        setIsLoading(false);
-        const dataPageable: IPageable<T> = createDataPageable(
-          response,
-          1000000
-        );
-
-        const worksheet = XLSX.utils.json_to_sheet(
-          dataPageable.content.map((item: any) => {
-            const row = {};
-            columns.forEach((column) => {
-              let value;
-              if (column.renderXls) {
-                value = column.renderXls(item);
-              } else if (column.render) {
-                value = column.render(item)?.toString();
-              }
-
-              // Handle number formatting
-              if (
-                column.renderXlsOptions?.type === "number" ||
-                typeof value === "number" ||
-                (typeof value === "string" && !isNaN(Number(value)))
-              ) {
-                (row as any)[column.header] = Number(value);
-              } else {
-                (row as any)[column.header] = value?.toString();
-              }
-            });
-            return row;
-          })
-        );
-
-        // Apply number formatting to columns that contain numbers
-        const range = XLSX.utils.decode_range(worksheet["!ref"] || "A1");
-        for (let C = range.s.c; C <= range.e.c; ++C) {
-          const col = XLSX.utils.encode_col(C);
-          let hasNumbers = false;
-
-          // Check if column contains numbers
-          for (let R = range.s.r; R <= range.e.r; ++R) {
-            const cell = worksheet[col + (R + 1)];
-            if (cell && typeof cell.v === "number") {
-              hasNumbers = true;
-              break;
-            }
-          }
-          // Apply number format if column contains numbers
-          if (hasNumbers) {
-            for (let R = range.s.r; R <= range.e.r; ++R) {
-              const cell = worksheet[col + (R + 1)];
-              if (cell && typeof cell.v === "number") {
-                // Get the column index by converting the column letter to number
-                const colIndex = XLSX.utils.decode_col(col);
-                // Find the corresponding column definition
-                const column = columns[colIndex];
-                // Apply the format if specified in renderXlsOptions
-                if (column?.renderXlsOptions?.format) {
-                  cell.z = column.renderXlsOptions.format;
-                } else {
-                  // Check if the number has decimal places
-                  const hasDecimal = cell.v % 1 !== 0;
-                  cell.z = hasDecimal ? "#,##0.##" : "#,##0"; // Use different formats based on whether decimals exist
-                }
-              }
-            }
-          }
-        }
-
-        const workbook = XLSX.utils.book_new();
-        XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
-        XLSX.writeFile(workbook, "export.xlsx");
-      })
-      .catch((error) => {
-        console.error("Error fetching data:", error);
-        handleErrors(error, federationContext.emitter);
-        setIsLoading(false);
-      });
-  }, [
-    setIsLoading,
-    federationContext.apiClient,
-    url,
-    mergedFilters,
-    showColFilters,
-    columnFilters,
-    sortConfig,
-    handleErrors,
-    columns,
-  ]);
-
-  // Update sync width to match table content width
-  const updateSyncWidth = useCallback(() => {
-    if (tableRef.current && syncWidthRef.current && setMinWidth) {
-      syncWidthRef.current.style.width = tableRef.current.scrollWidth + "px";
-    }
-  }, [setMinWidth]);
-
-  // Set up scroll synchronization between top and bottom scrollbars
-  useEffect(() => {
-    if (!setMinWidth) return;
-    const topScrollbar = topScrollbarRef.current;
-    const bottomScrollbar = bottomScrollbarRef.current;
-
-    if (!topScrollbar || !bottomScrollbar) return;
-
-    const handleTopScroll = () => {
-      bottomScrollbar.scrollLeft = topScrollbar.scrollLeft;
-    };
-
-    const handleBottomScroll = () => {
-      topScrollbar.scrollLeft = bottomScrollbar.scrollLeft;
-    };
-
-    topScrollbar.addEventListener("scroll", handleTopScroll);
-    bottomScrollbar.addEventListener("scroll", handleBottomScroll);
-
-    return () => {
-      topScrollbar.removeEventListener("scroll", handleTopScroll);
-      bottomScrollbar.removeEventListener("scroll", handleBottomScroll);
-    };
-  }, [setMinWidth]);
-
-  // Set up ResizeObserver to update sync width when table content changes
-  useEffect(() => {
-    if (!tableRef.current) return;
-
-    const resizeObserver = new ResizeObserver(updateSyncWidth);
-    resizeObserver.observe(tableRef.current);
-
-    // Initial update
-    updateSyncWidth();
-
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, [updateSyncWidth, data, isLoading]);
-
-  const handleItemsPerPageChange = (value: string) => {
-    const selectedItemsPerPage = Number(value);
-    setItemsPerPageLocal(selectedItemsPerPage);
-    setCurrentPage(0); // Reset the current page to 0 when changing items per page
-  };
-
-  return (
-    <>
-      <div
-        className="shadow-lg border border-gray-200 rounded-xl"
-        style={{ overflowY: "visible" }}
-        data-cy={"datatable-container-" + id}
-      >
-        {showHeader && (
-          <div className="p-4 leading-9 flex ">
-            <div className="flex-grow content-center">
-              {title && (
-                <h1 className="font-semibold text-xl leading-[42px]">
-                  {title}
-                </h1>
-              )}
-              {subtitle && (
-                <p className="font-normal text-gray-600">{subtitle}</p>
-              )}{" "}
-              {bulkAction && selectedItems.length > 0 && (
-                <div className="">{bulkAction(selectedItems)}</div>
-              )}
-            </div>
-
-            <DatatableSettings
-              tableId={id}
-              onSuccess={rerenderTable}
-              onExport={exportToXLSX}
-            ></DatatableSettings>
-            {hasSomeColFilters && (
-              <div
-                className="flex items-center text-xl h-full p-3 cursor-pointer text-gray-500  hover:text-black"
-                title={
-                  showColFilters
-                    ? "Zrušit filtr podle sloupců"
-                    : "Filtrovat podle sloupců"
-                }
-                onClick={handleToggleShowColFilters}
-                data-cy="datatable-filter-toggle"
-              >
-                {!showColFilters && <MdOutlineFilterAlt />}
-                {showColFilters && (
-                  <MdOutlineFilterAltOff className="text-danger" />
-                )}
-              </div>
-            )}
-            {allowSearch && (
-              <div className="ml-5">
-                <FormField
-                  placeholder="Vyhledávání"
-                  name="search"
-                  onInputChange={handleSearchChanged}
-                  type="text"
-                  value={fulltextSearch}
-                >
-                  <div className=" text-gray-500 leading-5 flex items-center h-full">
-                    {!fulltextSearch && <MdSearch></MdSearch>}
-                    {fulltextSearch && (
-                      <MdClose onClick={() => setFulltextSearch("")} />
-                    )}
-                  </div>
-                </FormField>
-              </div>
-            )}
-          </div>
-        )}
-        {/* Top horizontal scrollbar */}
-        {setMinWidth && (
-          <div ref={topScrollbarRef} className="overflow-x-auto h-4 mb-1 mmmmm">
-            <div ref={syncWidthRef} className="h-full"></div>
-          </div>
-        )}
-
-        {/* Main scrollable content area */}
-        <div
-          ref={bottomScrollbarRef}
-          className="overflow-auto min-h-[500px] relative"
-        >
-          {isLoading && (
-            <div className="absolute inset-0 flex items-center justify-center h-[480px] py-2 z-10">
-              <Spinner />
-            </div>
-          )}
-          {!isLoading && (!data || data?.content?.length === 0) && (
-            <div className="absolute inset-0 flex items-center justify-center  py-2 text-gray-600 font-medium text-xs top-[90px]">
-              Žádná data
-            </div>
-          )}
-          <table
-            ref={tableRef}
-            className="w-full leading-normal"
-            key={tableKey}
-            data-cy={"datatable-table-" + id}
-          >
-            <thead>
-              <tr>
-                {data && bulkAction && (
-                  <th className="w-[20px] h-10 hover:bg-gray-200 bg-gray-50 font-medium text-xs text-center text-gray-600 cursor-pointer border-t border-b border-gray-200">
-                    <label className="w-full h-full flex items-center justify-center cursor-pointer px-2">
-                      <input
-                        id="selectAll"
-                        type="checkbox"
-                        className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded !focus:ring-indigo-200 focus:ring-4"
-                        onChange={handleSelectAll}
-                        checked={
-                          data &&
-                          selectedItems.length === data.content.length &&
-                          data.content.length > 0
-                        }
-                      />
-                    </label>
-                  </th>
-                )}
-                {columns.map(
-                  (
-                    {
-                      key,
-                      header,
-                      actions,
-                      sortParam,
-                      width,
-                      filterType,
-                      filterParam,
-                      filterParam2,
-                    },
-                    index
-                  ) => (
-                    <Resizable
-                      //  key={String(key) + currentPage}
-                      key={String(key)}
-                      tableId={id}
-                      colKey={String(key)}
-                      defaultWidth={width || "auto"}
-                      setMinWidth={setMinWidth}
-                    >
-                      {({ ref }: { ref: any }) => (
-                        <th
-                          className={`tableHeader relative  font-medium  text-xs !leading-9 text-left px-3 text-gray-600 
-                             bg-gray-50 border-t border-b border-gray-200  content-start ${
-                               !title && !subtitle ? "border-t-0" : ""
-                             } ${sortParam ? " cursor-pointer " : ""}`}
-                          onClick={() =>
-                            sortParam ? requestSort(sortParam) : undefined
-                          }
-                          data-cy={"datatable-header-" + id + "-" + String(key)}
-                        >
-                          <span className="inline-flex items-center gap-2 group select-none w-full">
-                            {header}{" "}
-                            {!actions && sortParam
-                              ? getSortIcon(sortParam)
-                              : ""}
-                          </span>
-                          <div
-                            className={`resizer absolute top-0 right-0 h-full w-2  bg-transparent  ${
-                              index < columns.length - 1
-                                ? "cursor-col-resize hover:border-x border-gray-300 border-r w-1"
-                                : "w-0"
-                            }`}
-                            ref={ref}
-                            onClick={(e) => e.stopPropagation()}
-                          />
-                          {showColFilters && (
-                            <div
-                              className="p-0 m-0 pb-2"
-                              onClick={(e) => e.stopPropagation()}
-                              data-cy={
-                                "datatable-filter-container-" +
-                                id +
-                                "-" +
-                                String(key)
-                              }
-                            >
-                              {filterType === "select" ? (
-                                <Select
-                                  onValueChange={(value) => {
-                                    if (value === "__clear__") {
-                                      filterHandler(
-                                        filterParam as keyof T,
-                                        "",
-                                        filterParam2
-                                      );
-                                    } else {
-                                      // Check if value contains delimiter (has subcategory)
-                                      if (value.includes("-") && filterParam2) {
-                                        filterHandler(
-                                          filterParam as keyof T,
-                                          value,
-                                          filterParam2
-                                        );
-                                      } else {
-                                        // Value without subcategory - clear filterParam2 if it exists
-                                        filterHandler(
-                                          filterParam as keyof T,
-                                          value,
-                                          filterParam2,
-                                          true
-                                        );
-                                      }
-                                    }
-                                  }}
-                                  value={
-                                    filterParam2 &&
-                                    mergedFilters?.[String(filterParam)] &&
-                                    mergedFilters?.[String(filterParam2)]
-                                      ? `${mergedFilters[String(filterParam)]}-${mergedFilters[String(filterParam2)]}`
-                                      : mergedFilters?.[
-                                          String(filterParam)
-                                        ]?.toString() || "__clear__"
-                                  }
-                                  disabled={Object.keys(
-                                    (filters as object) || {}
-                                  ).includes(String(filterParam))}
-                                >
-                                  <SelectTrigger className="flex-1 w-full px-2 font-normal placeholder-muted-foreground">
-                                    <SelectValue placeholder="Zadejte filtr" />
-                                  </SelectTrigger>
-                                  <SelectContent>
-                                    {filterOptions[String(filterParam)]
-                                      ?.filter(
-                                        (option: IOptionItem) =>
-                                          option.value !== null &&
-                                          option.value !== undefined &&
-                                          option.value !== ""
-                                      )
-                                      ?.map((option: IOptionItem) => (
-                                        <SelectItem
-                                          key={option.value}
-                                          value={
-                                            option.value?.toString() ||
-                                            "unknown"
-                                          }
-                                        >
-                                          {option.label}
-                                        </SelectItem>
-                                      ))}
-                                  </SelectContent>
-                                </Select>
-                              ) : filterType === "multi-select" ? (
-                                <MultiSelect
-                                  //    key={JSON.stringify(mergedFilters)}
-                                  options={
-                                    filterOptions[String(filterParam)] || []
-                                  }
-                                  onChange={(values) => {
-                                    filterHandler(
-                                      filterParam as keyof T,
-                                      values,
-                                      filterParam2
-                                    );
-                                  }}
-                                  value={
-                                    Array.isArray(
-                                      mergedFilters?.[String(filterParam)]
-                                    )
-                                      ? mergedFilters[String(filterParam)]
-                                      : mergedFilters?.[String(filterParam)]
-                                        ? [mergedFilters[String(filterParam)]]
-                                        : []
-                                  }
-                                  placeholder={"Zadejte filtr"}
-                                  className="px-0"
-                                  disabled={Object.keys(
-                                    (filters as object) || {}
-                                  ).includes(String(filterParam))}
-                                  variant="secondary"
-                                  maxCount={0}
-                                />
-                              ) : filterType === "dateRange" ? (
-                                <DateRangeField
-                                  //    key={JSON.stringify(mergedFilters)}
-                                  name={String(filterParam)}
-                                  nameEnd={String(filterParam2)}
-                                  onInputChange={(e) =>
-                                    filterHandler(
-                                      e.target.name as keyof T,
-                                      e.target.value
-                                    )
-                                  }
-                                  type={filterType}
-                                  value={{
-                                    startDate:
-                                      mergedFilters?.[String(filterParam)] ||
-                                      "",
-                                    endDate:
-                                      mergedFilters?.[String(filterParam2)] ||
-                                      "",
-                                  }}
-                                  clearable
-                                  className=" px-0 py-0 "
-                                  placeholder={"Zadejte filtr"}
-                                  rounded={true}
-                                  disabled={Object.keys(
-                                    (filters as object) || {}
-                                  ).includes(String(filterParam))}
-                                />
-                              ) : filterType === "date" ? (
-                                <DateField
-                                  //       key={JSON.stringify(mergedFilters)}
-                                  name={String(filterParam)}
-                                  onInputChange={(e) =>
-                                    filterHandler(
-                                      e.target.name as keyof T,
-                                      e.target.value
-                                    )
-                                  }
-                                  type={filterType}
-                                  value={
-                                    mergedFilters?.[String(filterParam)] || ""
-                                  }
-                                  clearable
-                                  className=" px-0 py-0 "
-                                  placeholder={"Zadejte filtr"}
-                                  rounded={true}
-                                  disabled={Object.keys(
-                                    (filters as object) || {}
-                                  ).includes(String(filterParam))}
-                                />
-                              ) : filterType === "text" ? (
-                                <Input
-                                  onChange={(e) =>
-                                    filterHandler(
-                                      filterParam as keyof T,
-                                      e.target.value
-                                    )
-                                  }
-                                  value={
-                                    mergedFilters?.[String(filterParam)] || ""
-                                  }
-                                  disabled={Object.keys(
-                                    (filters as object) || {}
-                                  ).includes(String(filterParam))}
-                                  clearable
-                                  className="min-w-[100px] px-2 font-normal                 placeholder-muted-foreground
-"
-                                  placeholder={"Zadejte filtr"}
-                                  debounceTimeout={1000}
-                                />
-                              ) : null}
-                            </div>
-                          )}
-                        </th>
-                      )}
-                    </Resizable>
-                  )
-                )}
-              </tr>
-            </thead>
-            {!isLoading &&
-              data &&
-              data?.content &&
-              data?.content.length > 0 && (
-                <tbody className="relative">
-                  {data.content.map((item, rowIndex) => (
-                    <tr
-                      key={rowIndex}
-                      className={`${
-                        item._isHighlighted || isSelected(item)
-                          ? "bg-gray-50"
-                          : ""
-                      } hover:bg-gray-100 border-gray-200 border-b text-sm`}
-                    >
-                      {bulkAction && (
-                        <td className="w-[20px] h-[52px] hover:bg-gray-200 font-medium text-xs text-center text-gray-600 cursor-pointer">
-                          <label className="w-full h-full flex items-center justify-center cursor-pointer px-2">
-                            <input
-                              type="checkbox"
-                              className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded !focus:ring-indigo-200 focus:ring-4"
-                              checked={isSelected(item) || false}
-                              onChange={() => handleSelectItem(item)}
-                            />
-                          </label>
-                        </td>
-                      )}
-                      {columns.map(({ render, actions, classes }, colIndex) => (
-                        <td
-                          key={`${rowIndex}-${colIndex}`}
-                          onClick={
-                            rowAction ? () => rowAction(item) : undefined
-                          }
-                          className={`px-3 py-2 text-gray-800  ${rowAction ? "cursor-pointer" : ""}  ${
-                            colIndex === 0 ? "font-bold " : ""
-                          } ${classes || ""}`}
-                        >
-                          {render ? render(item) : ""}
-                          {actions &&
-                            actions
-                              .filter((it) => {
-                                if (it.rowAction) return false;
-                                if (it.visible) {
-                                  return it.visible(item);
-                                } else return true;
-                              })
-                              .map((action, actionIndex) => (
-                                <div
-                                  key={`${rowIndex}-${colIndex}-${actionIndex}`}
-                                  className="inline-flex align-middle"
-                                >
-                                  {action.icon && (
-                                    <Button
-                                      variant="icon"
-                                      onClick={() => action.onClick(item)}
-                                    >
-                                      {action.icon}
-                                    </Button>
-                                  )}
-                                  {!action.icon && (
-                                    <Button
-                                      variant="primary"
-                                      onClick={(e) => {
-                                        e.stopPropagation();
-                                        action.onClick(item);
-                                      }}
-                                    >
-                                      {action.label}
-                                    </Button>
-                                  )}
-                                </div>
-                              ))}
-                        </td>
-                      ))}
-                    </tr>
-                  ))}
-                  {data?.content?.length === 0 && (
-                    <tr key="tr-nodata">
-                      <td
-                        key="td-nodata"
-                        className="px-5 py-3 border-b border-gray-200 bg-white text-sm items-center justify-center align-middle"
-                        colSpan={columns.length}
-                      >
-                        No data
-                      </td>
-                    </tr>
-                  )}
-                </tbody>
-              )}
-          </table>
-        </div>
-
-        {data?.isPageable && (
-          <div
-            data-cy="pagination"
-            className="w-full p-5 flex gap-5 justify-between md:flex-row flex-col"
-          >
-            <div className="flex gap-5  text-sm ">
-              {data && (
-                <Button
-                  variant="secondary"
-                  onClick={prevPage}
-                  className="flex items-center"
-                  disabled={data.first || isLoading}
-                  data-cy="prev-page"
-                >
-                  <MdArrowBack className="mr-1.5" /> Předchozí
-                </Button>
-              )}
-              {data && (
-                <Button
-                  variant="secondary"
-                  onClick={nextPage}
-                  className="flex items-center"
-                  disabled={data.last || isLoading}
-                  data-cy="next-page"
-                >
-                  Následující <MdArrowForward className="ml-2" size={20} />
-                </Button>
-              )}
-            </div>
-            <div className="flex items-center justify-center  text-gray-800">
-              {paginationDisplay}
-            </div>
-            <div
-              className="content-center w-auto items-center justify-end flex-row gap-5 flex md:mt-0 mt-5"
-              data-cy="items-per-page"
-            >
-              <span className=" whitespace-nowrap flex-grow">
-                Počet řádků na stránku:
-              </span>
-              <Select
-                onValueChange={handleItemsPerPageChange}
-                value={itemsPerPageLocal?.toString()}
-              >
-                <SelectTrigger className="w-[100px]">
-                  <SelectValue placeholder="Vyberte počet" />
-                </SelectTrigger>
-                <SelectContent>
-                  {itemsPerPageOptions?.map((option) => (
-                    <SelectItem
-                      key={option.value}
-                      value={option.value?.toString() || ""}
-                    >
-                      {option.label}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-          </div>
-        )}
-      </div>
-    </>
-  );
-}
-
-export default DataTableServer;
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+import {
+  Button,
+  DataTableColumn,
+  DateField,
+  DateRangeField,
+  FormField,
+  IOptionItem,
+  Spinner,
+  handleErrors,
+  useFederationContext,
+} from "../../main";
+import {
+  MdArrowBack,
+  MdArrowDownward,
+  MdArrowForward,
+  MdArrowUpward,
+  MdClose,
+  MdOutlineFilterAlt,
+  MdOutlineFilterAltOff,
+  MdOutlineUnfoldMore,
+  MdSearch,
+} from "react-icons/md";
+import { Input } from "../ui/input";
+import { Resizable } from "./Resizable";
+import { DatatableSettings } from "./DatatableSettings";
+import { MultiSelect } from "../ui/multi-select";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select";
+
+import * as XLSX from "xlsx";
+
+interface ISortConfig {
+  sortParam: string;
+  direction: "asc" | "desc" | null;
+}
+
+interface DataTableServerProps<T> {
+  id: string;
+  url: string;
+  columns: DataTableColumn<T | "actions">[];
+  title?: string;
+  subtitle?: string;
+  allowSearch?: boolean;
+  showHeader?: boolean;
+  rowAction?: (item: T) => void;
+  // bulkActions?: BulkAction<T>[];
+  bulkAction?: (items: T[]) => JSX.Element;
+  filters?: object;
+  selectedItemKey?: string;
+  itemsPerPageOptions?: IOptionItem[];
+  setMinWidth?: boolean;
+  onDataLoaded?: (data: IPageable<T>) => void;
+}
+const defaultItemsPerPageOptions: IOptionItem[] = [
+  { value: 10, label: "10" },
+  { value: 50, label: "50" },
+  { value: 100, label: "100" },
+];
+
+type DataTableInternalItems = {
+  _isHighlighted?: boolean;
+  id: string; // Assuming items have an `id` field for identification
+};
+interface DataTableStorageObject {
+  columnFilters: Record<string, string>;
+  showColFilters: boolean;
+  currentPage: number;
+  itemsPerPage: number;
+  sortConfig: ISortConfig | null;
+}
+
+export const resetAllDataTablePaging = () => {
+  Object.keys(localStorage)
+    .filter((key) => key.startsWith("datatable:"))
+    .forEach((key) => {
+      const storageObject = localStorage.getItem(key);
+      if (storageObject) {
+        const parsedObject: DataTableStorageObject = JSON.parse(storageObject);
+        parsedObject.currentPage = 0;
+        localStorage.setItem(key, JSON.stringify(parsedObject));
+      }
+    });
+};
+
+interface IPageable<T> {
+  content: T[];
+  empty: boolean;
+  first: boolean;
+  last: boolean;
+  number: number;
+  numberOfElements: number;
+  size: number;
+  totalElements: number;
+  totalPages: number;
+  isPageable?: boolean;
+}
+
+function DataTableServer<T extends DataTableInternalItems>({
+  id,
+  url,
+  columns,
+  title,
+  subtitle,
+  allowSearch = false,
+  showHeader = true,
+  rowAction,
+  bulkAction,
+  filters,
+  selectedItemKey = "id",
+  itemsPerPageOptions = defaultItemsPerPageOptions,
+  setMinWidth = false,
+  onDataLoaded,
+}: DataTableServerProps<T>) {
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const topScrollbarRef = useRef<HTMLDivElement | null>(null);
+  const bottomScrollbarRef = useRef<HTMLDivElement | null>(null);
+  const tableRef = useRef<HTMLTableElement | null>(null);
+  const syncWidthRef = useRef<HTMLDivElement | null>(null);
+
+  const [itemsPerPageLocal, setItemsPerPageLocal] = useState<number>(10);
+  const federationContext = useFederationContext();
+  const [data, setData] = useState<IPageable<T>>();
+  const [isLoading, setIsLoading] = useState(false);
+  const [isLocalStorageLoaded, setIsLocalStorageLoaded] = useState(false);
+  const [tableKey, setTableKey] = useState(0);
+
+  const [hasMounted, setHasMounted] = useState(false);
+
+  const [currentPage, setCurrentPage] = useState<number>(0);
+  const [selectedItems, setSelectedItems] = useState<T[]>([]);
+  const [fulltextSearch, setFulltextSearch] = useState("");
+  const [filterOptions, setFilterOptions] = useState<Record<string, any[]>>({});
+  const [columnFilters, setColumnFilters] = useState<{ [key: string]: any }>(
+    {}
+  );
+  const [showColFilters, setShowColFilters] = useState<boolean>(false);
+  const [sortConfig, setSortConfig] = useState<ISortConfig | null>(null);
+  const prevDepsRef = useRef<any[]>([]);
+  const prevFilterDepsRef = useRef<any[]>([]);
+
+  const createDataPageable = (
+    response: any,
+    itemsPerPage: number
+  ): IPageable<T> => {
+    const isPageable = !!response.data?.content;
+    return {
+      content: response.data.content || response.data,
+      empty: isPageable ? response.data.empty : true,
+      first: isPageable ? response.data.first : true,
+      last: isPageable ? response.data.last : true,
+      number: isPageable ? response.data.number : 0,
+      numberOfElements: response.data.numberOfElements || response.data.length,
+      size: response.data?.size || itemsPerPage,
+      totalElements: response.data?.totalElements || response.data.length,
+      totalPages: response.data?.totalPages || 1,
+      isPageable: isPageable,
+    };
+  };
+
+  const [reloadData, setReloadData] = useState(false);
+
+  const mergedFilters: { [key: string]: any } = useMemo(() => {
+    return showColFilters ? { ...columnFilters, ...filters } : filters || {};
+  }, [columnFilters, filters, showColFilters]);
+  useEffect(() => {
+    const currentDeps = [
+      url,
+      showColFilters,
+      columnFilters,
+      itemsPerPageLocal,
+      currentPage,
+      sortConfig,
+      filters,
+      tableKey,
+    ];
+
+    // Kontrola, jestli se skutečně něco změnilo
+    const hasChanged = currentDeps.some((dep, index) => {
+      return JSON.stringify(dep) !== JSON.stringify(prevDepsRef.current[index]);
+    });
+
+    if (hasChanged) {
+      console.log(
+        "setting reloadData - actual change detected",
+        url,
+        showColFilters,
+        columnFilters,
+        itemsPerPageLocal,
+        currentPage,
+        sortConfig,
+        filters,
+        tableKey,
+        reloadData
+      );
+      setReloadData(true);
+    }
+
+    prevDepsRef.current = currentDeps;
+  }, [
+    url,
+    showColFilters,
+    columnFilters,
+    itemsPerPageLocal,
+    currentPage,
+    sortConfig,
+    filters,
+    tableKey,
+  ]);
+
+  useEffect(() => {
+    console.log("reloadData", reloadData);
+    if (reloadData) {
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+      // Create a new AbortController for the new request
+      abortControllerRef.current = new AbortController();
+      const currentAbortController = abortControllerRef.current;
+      // load data from API
+
+      if (currentPage === undefined) return;
+      setIsLoading(true);
+
+      //odebrani prazdny filteru a transformace multi-select hodnot
+      const filteredMergedFilters = Object.entries(mergedFilters).reduce(
+        (acc: Record<string, any>, [key, value]) => {
+          // Skip null and empty string values
+          if (value === null || value === "") {
+            return acc;
+          }
+
+          // Handle multi-select values (arrays)
+          if (Array.isArray(value)) {
+            if (value.length > 0) {
+              acc[key] = value.join(",");
+            }
+            return acc;
+          }
+
+          // Handle other values
+          acc[key] = value;
+          return acc;
+        },
+        {}
+      );
+
+      federationContext.apiClient
+        .get(url, {
+          signal: currentAbortController.signal,
+          params: {
+            ...filteredMergedFilters,
+            pageSize: itemsPerPageLocal,
+            page: currentPage,
+            sortBy: sortConfig?.sortParam,
+            sortDirection: sortConfig?.direction,
+          },
+        })
+        .then((response) => {
+          const dataPageable: IPageable<T> = createDataPageable(
+            response,
+            itemsPerPageLocal || 10
+          );
+
+          setData(dataPageable);
+          // setData(response.data);
+          setIsLoading(false);
+          onDataLoaded?.(dataPageable);
+        })
+        .catch((error) => {
+          if (error.code === "ERR_CANCELED") {
+            console.log("Request was aborted");
+          } else {
+            console.error("Error fetching data:", error);
+            handleErrors(error, federationContext.emitter);
+            const emptyDataPageable: IPageable<T> = {
+              content: [],
+              empty: true,
+              first: true,
+              last: true,
+              number: 0,
+              numberOfElements: 0,
+              size: itemsPerPageLocal || 10,
+              totalElements: 0,
+              totalPages: 1,
+            };
+            setData(emptyDataPageable);
+            setIsLoading(false);
+            onDataLoaded?.(emptyDataPageable);
+          }
+        });
+
+      setReloadData(false);
+    }
+  }, [reloadData]);
+  // nastaveni currentPage u  jinych datatable na 0
+  useEffect(() => {
+    Object.keys(localStorage)
+      .filter(
+        (key) => key.startsWith("datatable:") && key !== `datatable:${id}`
+      )
+      .forEach((key) => {
+        const storageObject = localStorage.getItem(key);
+        if (storageObject) {
+          const parsedObject: DataTableStorageObject =
+            JSON.parse(storageObject);
+          parsedObject.currentPage = 0;
+          localStorage.setItem(key, JSON.stringify(parsedObject));
+        }
+      });
+  }, [id]);
+
+  //load from localstorage
+  useEffect(() => {
+    if (id) {
+      const storageKey = `datatable:${id}`;
+
+      const storedStorageObject = localStorage.getItem(storageKey);
+      if (storedStorageObject) {
+        const storageObject: DataTableStorageObject =
+          JSON.parse(storedStorageObject);
+        setColumnFilters(storageObject.columnFilters);
+        setShowColFilters(storageObject.showColFilters);
+        setCurrentPage(storageObject.currentPage || 0);
+        setSortConfig(storageObject.sortConfig || null);
+
+        setItemsPerPageLocal(storageObject.itemsPerPage || 10);
+      }
+      setIsLocalStorageLoaded(true);
+    }
+  }, [id]);
+
+  useEffect(() => {
+    const currentFilterDeps = [columns, federationContext.apiClient];
+
+    // Kontrola, jestli se skutečně něco změnilo
+    const hasFilterChanged = currentFilterDeps.some((dep, index) => {
+      const prev = prevFilterDepsRef.current[index];
+      if (index === 1) {
+        // federationContext.apiClient (index 1) - referenční porovnání
+        return dep !== prev;
+      } else {
+        // columns (index 0) - deep porovnání
+        return JSON.stringify(dep) !== JSON.stringify(prev);
+      }
+    });
+
+    if (hasFilterChanged) {
+      const fetchFilterOptions = async (column: DataTableColumn<T>) => {
+        if (column.filterOptions) {
+          return column.filterOptions;
+        } else if (column.filterSource) {
+          try {
+            const response = await federationContext.apiClient.get(
+              column.filterSource
+            );
+
+            const options: IOptionItem[] = [];
+
+            response.data.forEach((item: any) => {
+              const categoryId =
+                item[column.filterValueKey as keyof typeof item]?.toString();
+              const categoryLabel =
+                item[column.filterLabelKey as keyof typeof item]?.toString();
+              const subcategories = item.subcategories;
+
+              if (
+                Array.isArray(subcategories) &&
+                subcategories.length > 0 &&
+                column.filterParam2
+              ) {
+                //add parent categoriz without subcategiries
+                options.push({
+                  value: categoryId,
+                  label: categoryLabel,
+                });
+                // Multiply options by subcategories
+                subcategories.forEach((subcategory: any) => {
+                  const subcategoryId = subcategory.id?.toString();
+                  const subcategoryLabel = subcategory.name?.toString();
+
+                  if (subcategoryId && subcategoryLabel) {
+                    options.push({
+                      value: `${categoryId}-${subcategoryId}`,
+                      label: `${categoryLabel} - ${subcategoryLabel}`,
+                    });
+                  }
+                });
+              } else {
+                // No subcategories, use category only
+                options.push({
+                  value: categoryId,
+                  label: categoryLabel,
+                });
+              }
+            });
+
+            return options;
+          } catch (error) {
+            console.error("Error fetching filter options:", error);
+            return [];
+          }
+        } else {
+          return [];
+        }
+      };
+
+      const updateFilterOptions = async () => {
+        const newFilterOptions: Record<string, any[]> = {};
+
+        for (const column of columns) {
+          if (
+            (column.filterType === "select" ||
+              column.filterType === "multi-select") &&
+            (column.filterSource || column.filterOptions) &&
+            column.filterValueKey &&
+            column.filterLabelKey &&
+            column.filterParam
+          ) {
+            const options = await fetchFilterOptions(column);
+
+            if (options && column.filterType === "select") {
+              // Filter out empty values and add a "clear" option
+              const filteredOptions = options.filter(
+                (option: IOptionItem) =>
+                  option.value !== null &&
+                  option.value !== undefined &&
+                  option.value !== ""
+              );
+              newFilterOptions[column.filterParam as string] = [
+                { value: "__clear__", label: "Všechny" },
+                ...filteredOptions,
+              ];
+            } else if (options && column.filterType === "multi-select") {
+              newFilterOptions[column.filterParam as string] = options;
+            }
+          }
+        }
+
+        setFilterOptions(newFilterOptions);
+      };
+
+      console.log(
+        "updateFilterOptions - actual change detected",
+        columns,
+        federationContext.apiClient
+      );
+      updateFilterOptions();
+    }
+
+    prevFilterDepsRef.current = currentFilterDeps;
+  }, [columns, federationContext.apiClient]);
+
+  const hasSomeColFilters = useMemo(() => {
+    return columns.some((column) => !!column.filterParam);
+  }, [columns]);
+
+  const requestSort = (sortParam: string) => {
+    setSortConfig((prevSortConfig) => {
+      if (
+        prevSortConfig?.sortParam === sortParam &&
+        prevSortConfig.direction !== null
+      ) {
+        return prevSortConfig.direction === "asc"
+          ? { sortParam, direction: "desc" }
+          : null;
+      } else {
+        return { sortParam, direction: "asc" };
+      }
+    });
+  };
+
+  const getSortIcon = (sortParam: string) => {
+    if (sortConfig?.sortParam === sortParam) {
+      return sortConfig.direction === "asc" ? (
+        <MdArrowUpward fontSize="small" />
+      ) : sortConfig.direction === "desc" ? (
+        <MdArrowDownward fontSize="small" />
+      ) : (
+        <MdOutlineUnfoldMore fontSize="small" className=" " />
+      );
+    }
+    return <MdOutlineUnfoldMore fontSize="small" className=" " />;
+  };
+
+  const handleSelectItem = (item: T) => {
+    setSelectedItems((prevSelectedItems) => {
+      if (
+        prevSelectedItems.find(
+          (selectedItem) =>
+            selectedItem[selectedItemKey as keyof T] ===
+            item[selectedItemKey as keyof T]
+        )
+      ) {
+        return prevSelectedItems.filter(
+          (selectedItem) =>
+            selectedItem[selectedItemKey as keyof T] !==
+            item[selectedItemKey as keyof T]
+        );
+      } else {
+        return [...prevSelectedItems, item];
+      }
+    });
+  };
+
+  const handleSelectAll = () => {
+    if (data && selectedItems.length === data.content.length) {
+      setSelectedItems([]);
+    } else if (data) {
+      setSelectedItems(data.content);
+    }
+  };
+
+  const isSelected = useCallback(
+    (item: T) => {
+      return selectedItems.some(
+        (selectedItem) =>
+          selectedItem[selectedItemKey as keyof T] ===
+          item[selectedItemKey as keyof T]
+      );
+    },
+    [selectedItems, selectedItemKey]
+  );
+
+  const nextPage = () => {
+    setCurrentPage((currentPage || 0) + 1);
+  };
+
+  const prevPage = () => {
+    setCurrentPage((currentPage || 0) - 1);
+  };
+
+  const handleSearchChanged = (
+    e: React.ChangeEvent<
+      HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
+    >
+  ) => {
+    setFulltextSearch(e.target?.value);
+    setCurrentPage(0);
+  };
+  // Pagination display logic
+  const paginationDisplay = `Strana ${(currentPage || 0) + 1} z ${data?.totalPages || 1}`;
+
+  const filterHandler = (
+    filterParam: keyof T,
+    value: string | string[],
+    filterParam2?: string,
+    clearFilterParam2?: boolean
+  ) => {
+    setColumnFilters((prev) => {
+      const newFilters = { ...prev };
+
+      // Handle clearing both filters
+      if (
+        value === "" ||
+        value === "__clear__" ||
+        (Array.isArray(value) && value.length === 0)
+      ) {
+        delete newFilters[String(filterParam)];
+        if (filterParam2) {
+          delete newFilters[filterParam2];
+        }
+        return newFilters;
+      }
+
+      // Handle filterParam2 logic
+      if (filterParam2) {
+        // Check if we should clear filterParam2
+        if (clearFilterParam2) {
+          newFilters[String(filterParam)] = value;
+          delete newFilters[filterParam2];
+          return newFilters;
+        }
+
+        // Handle combined values with delimiter
+        if (typeof value === "string" && value.includes("-")) {
+          const parts = value.split("-");
+          if (parts.length === 2) {
+            newFilters[String(filterParam)] = parts[0];
+            newFilters[filterParam2] = parts[1];
+            return newFilters;
+          }
+        }
+
+        // Handle array values (multi-select) with subcategories
+        if (Array.isArray(value)) {
+          const subcategoryIds: string[] = [];
+          value.forEach((val: string) => {
+            if (val.includes("-")) {
+              const parts = val.split("-");
+              if (parts.length === 2) {
+                subcategoryIds.push(parts[1]);
+              }
+            }
+          });
+
+          newFilters[String(filterParam)] =
+            value.length > 0 ? value : undefined;
+          if (subcategoryIds.length > 0) {
+            newFilters[filterParam2] = subcategoryIds;
+          } else {
+            delete newFilters[filterParam2];
+          }
+          return newFilters;
+        }
+
+        // Value without subcategory - clear filterParam2
+        newFilters[String(filterParam)] = value;
+        delete newFilters[filterParam2];
+        return newFilters;
+      }
+
+      // Regular case without filterParam2
+      newFilters[String(filterParam)] = value;
+      return newFilters;
+    });
+    setCurrentPage(0);
+  };
+  const handleToggleShowColFilters = () => {
+    if (showColFilters && columnFilters !== undefined) {
+      setColumnFilters(columnFilters);
+    }
+
+    setShowColFilters(!showColFilters);
+  };
+
+  // osetreni logiky pro useEffect. prvni nacteni filteru currentPage neresetuje
+  useEffect(() => {
+    if (!hasMounted) {
+      setHasMounted(true); // Ensures this block won't run again
+    } else {
+      setCurrentPage(0);
+    }
+  }, [filters]);
+
+  //store table settings in localstorage
+  useEffect(() => {
+    if (id && isLocalStorageLoaded) {
+      const storageKey = `datatable:${id}`;
+
+      const storageObject: DataTableStorageObject = localStorage.getItem(
+        storageKey
+      )
+        ? (JSON.parse(
+            localStorage.getItem(storageKey)!
+          ) as DataTableStorageObject)
+        : ({} as DataTableStorageObject);
+
+      storageObject.columnFilters = columnFilters || {};
+      // if (showColFilters !== undefined) {
+      //   storageObject.showColFilters = showColFilters;
+      // }
+      storageObject.showColFilters = showColFilters || false;
+      storageObject.currentPage = currentPage || 0;
+      storageObject.sortConfig = sortConfig || null;
+
+      storageObject.itemsPerPage = itemsPerPageLocal || 10;
+
+      localStorage.setItem(storageKey, JSON.stringify(storageObject));
+    }
+  }, [
+    columnFilters,
+    showColFilters,
+    currentPage,
+    // id,   // predbihalo se to a ukladaly se sortCOnfigy z predchozich tabulek
+    itemsPerPageLocal,
+    isLocalStorageLoaded,
+    sortConfig,
+  ]);
+
+  const rerenderTable = () => {
+    setTableKey((previous) => previous + 1);
+  };
+
+  const exportToXLSX = useCallback(() => {
+    // load fresh complete data without pagination ,filters
+    setIsLoading(true);
+
+    //odebrani prazdny filteru a transformace multi-select hodnot
+    const filteredMergedFilters = Object.entries(mergedFilters || {}).reduce(
+      (acc: Record<string, any>, [key, value]) => {
+        // Skip null and empty string values
+        if (value === null || value === "") {
+          return acc;
+        }
+
+        // Handle multi-select values (arrays)
+        if (Array.isArray(value)) {
+          if (value.length > 0) {
+            acc[key] = value.join(",");
+          }
+          return acc;
+        }
+
+        // Handle other values
+        acc[key] = value;
+        return acc;
+      },
+      {}
+    );
+
+    federationContext.apiClient
+      .get(url, {
+        params: {
+          ...filteredMergedFilters,
+          pageSize: 1000000,
+          page: 0,
+          sortBy: sortConfig?.sortParam,
+          sortDirection: sortConfig?.direction,
+        },
+      })
+      .then((response) => {
+        setIsLoading(false);
+        const dataPageable: IPageable<T> = createDataPageable(
+          response,
+          1000000
+        );
+
+        const worksheet = XLSX.utils.json_to_sheet(
+          dataPageable.content.map((item: any) => {
+            const row = {};
+            columns.forEach((column) => {
+              let value;
+              if (column.renderXls) {
+                value = column.renderXls(item);
+              } else if (column.render) {
+                value = column.render(item)?.toString();
+              }
+
+              // Handle number formatting
+              if (
+                column.renderXlsOptions?.type === "number" ||
+                typeof value === "number" ||
+                (typeof value === "string" && !isNaN(Number(value)))
+              ) {
+                (row as any)[column.header] = Number(value);
+              } else {
+                (row as any)[column.header] = value?.toString();
+              }
+            });
+            return row;
+          })
+        );
+
+        // Apply number formatting to columns that contain numbers
+        const range = XLSX.utils.decode_range(worksheet["!ref"] || "A1");
+        for (let C = range.s.c; C <= range.e.c; ++C) {
+          const col = XLSX.utils.encode_col(C);
+          let hasNumbers = false;
+
+          // Check if column contains numbers
+          for (let R = range.s.r; R <= range.e.r; ++R) {
+            const cell = worksheet[col + (R + 1)];
+            if (cell && typeof cell.v === "number") {
+              hasNumbers = true;
+              break;
+            }
+          }
+          // Apply number format if column contains numbers
+          if (hasNumbers) {
+            for (let R = range.s.r; R <= range.e.r; ++R) {
+              const cell = worksheet[col + (R + 1)];
+              if (cell && typeof cell.v === "number") {
+                // Get the column index by converting the column letter to number
+                const colIndex = XLSX.utils.decode_col(col);
+                // Find the corresponding column definition
+                const column = columns[colIndex];
+                // Apply the format if specified in renderXlsOptions
+                if (column?.renderXlsOptions?.format) {
+                  cell.z = column.renderXlsOptions.format;
+                } else {
+                  // Check if the number has decimal places
+                  const hasDecimal = cell.v % 1 !== 0;
+                  cell.z = hasDecimal ? "#,##0.##" : "#,##0"; // Use different formats based on whether decimals exist
+                }
+              }
+            }
+          }
+        }
+
+        const workbook = XLSX.utils.book_new();
+        XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
+        XLSX.writeFile(workbook, "export.xlsx");
+      })
+      .catch((error) => {
+        console.error("Error fetching data:", error);
+        handleErrors(error, federationContext.emitter);
+        setIsLoading(false);
+      });
+  }, [
+    setIsLoading,
+    federationContext.apiClient,
+    url,
+    mergedFilters,
+    showColFilters,
+    columnFilters,
+    sortConfig,
+    handleErrors,
+    columns,
+  ]);
+
+  // Update sync width to match table content width
+  const updateSyncWidth = useCallback(() => {
+    if (tableRef.current && syncWidthRef.current && setMinWidth) {
+      syncWidthRef.current.style.width = tableRef.current.scrollWidth + "px";
+    }
+  }, [setMinWidth]);
+
+  // Set up scroll synchronization between top and bottom scrollbars
+  useEffect(() => {
+    if (!setMinWidth) return;
+    const topScrollbar = topScrollbarRef.current;
+    const bottomScrollbar = bottomScrollbarRef.current;
+
+    if (!topScrollbar || !bottomScrollbar) return;
+
+    const handleTopScroll = () => {
+      bottomScrollbar.scrollLeft = topScrollbar.scrollLeft;
+    };
+
+    const handleBottomScroll = () => {
+      topScrollbar.scrollLeft = bottomScrollbar.scrollLeft;
+    };
+
+    topScrollbar.addEventListener("scroll", handleTopScroll);
+    bottomScrollbar.addEventListener("scroll", handleBottomScroll);
+
+    return () => {
+      topScrollbar.removeEventListener("scroll", handleTopScroll);
+      bottomScrollbar.removeEventListener("scroll", handleBottomScroll);
+    };
+  }, [setMinWidth]);
+
+  // Set up ResizeObserver to update sync width when table content changes
+  useEffect(() => {
+    if (!tableRef.current) return;
+
+    const resizeObserver = new ResizeObserver(updateSyncWidth);
+    resizeObserver.observe(tableRef.current);
+
+    // Initial update
+    updateSyncWidth();
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [updateSyncWidth, data, isLoading]);
+
+  const handleItemsPerPageChange = (value: string) => {
+    const selectedItemsPerPage = Number(value);
+    setItemsPerPageLocal(selectedItemsPerPage);
+    setCurrentPage(0); // Reset the current page to 0 when changing items per page
+  };
+
+  return (
+    <>
+      <div
+        className="shadow-lg border border-gray-200 rounded-xl"
+        style={{ overflowY: "visible" }}
+        data-cy={"datatable-container-" + id}
+      >
+        {showHeader && (
+          <div className="p-4 leading-9 flex ">
+            <div className="flex-grow content-center">
+              {title && (
+                <h1 className="font-semibold text-xl leading-[42px]">
+                  {title}
+                </h1>
+              )}
+              {subtitle && (
+                <p className="font-normal text-gray-600">{subtitle}</p>
+              )}{" "}
+              {bulkAction && selectedItems.length > 0 && (
+                <div className="">{bulkAction(selectedItems)}</div>
+              )}
+            </div>
+
+            <DatatableSettings
+              tableId={id}
+              onSuccess={rerenderTable}
+              onExport={exportToXLSX}
+            ></DatatableSettings>
+            {hasSomeColFilters && (
+              <div
+                className="flex items-center text-xl h-full p-3 cursor-pointer text-gray-500  hover:text-black"
+                title={
+                  showColFilters
+                    ? "Zrušit filtr podle sloupců"
+                    : "Filtrovat podle sloupců"
+                }
+                onClick={handleToggleShowColFilters}
+                data-cy="datatable-filter-toggle"
+              >
+                {!showColFilters && <MdOutlineFilterAlt />}
+                {showColFilters && (
+                  <MdOutlineFilterAltOff className="text-danger" />
+                )}
+              </div>
+            )}
+            {allowSearch && (
+              <div className="ml-5">
+                <FormField
+                  placeholder="Vyhledávání"
+                  name="search"
+                  onInputChange={handleSearchChanged}
+                  type="text"
+                  value={fulltextSearch}
+                >
+                  <div className=" text-gray-500 leading-5 flex items-center h-full">
+                    {!fulltextSearch && <MdSearch></MdSearch>}
+                    {fulltextSearch && (
+                      <MdClose onClick={() => setFulltextSearch("")} />
+                    )}
+                  </div>
+                </FormField>
+              </div>
+            )}
+          </div>
+        )}
+        {/* Top horizontal scrollbar */}
+        {setMinWidth && (
+          <div ref={topScrollbarRef} className="overflow-x-auto h-4 mb-1 mmmmm">
+            <div ref={syncWidthRef} className="h-full"></div>
+          </div>
+        )}
+
+        {/* Main scrollable content area */}
+        <div
+          ref={bottomScrollbarRef}
+          className="overflow-auto min-h-[500px] relative"
+        >
+          {isLoading && (
+            <div className="absolute inset-0 flex items-center justify-center h-[480px] py-2 z-10">
+              <Spinner />
+            </div>
+          )}
+          {!isLoading && (!data || data?.content?.length === 0) && (
+            <div className="absolute inset-0 flex items-center justify-center  py-2 text-gray-600 font-medium text-xs top-[90px]">
+              Žádná data
+            </div>
+          )}
+          <table
+            ref={tableRef}
+            className="w-full leading-normal"
+            key={tableKey}
+            data-cy={"datatable-table-" + id}
+          >
+            <thead>
+              <tr>
+                {data && bulkAction && (
+                  <th className="w-[20px] h-10 hover:bg-gray-200 bg-gray-50 font-medium text-xs text-center text-gray-600 cursor-pointer border-t border-b border-gray-200">
+                    <label className="w-full h-full flex items-center justify-center cursor-pointer px-2">
+                      <input
+                        id="selectAll"
+                        type="checkbox"
+                        className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded !focus:ring-indigo-200 focus:ring-4"
+                        onChange={handleSelectAll}
+                        checked={
+                          data &&
+                          selectedItems.length === data.content.length &&
+                          data.content.length > 0
+                        }
+                      />
+                    </label>
+                  </th>
+                )}
+                {columns.map(
+                  (
+                    {
+                      key,
+                      header,
+                      actions,
+                      sortParam,
+                      width,
+                      filterType,
+                      filterParam,
+                      filterParam2,
+                    },
+                    index
+                  ) => (
+                    <Resizable
+                      //  key={String(key) + currentPage}
+                      key={String(key)}
+                      tableId={id}
+                      colKey={String(key)}
+                      defaultWidth={width || "auto"}
+                      setMinWidth={setMinWidth}
+                    >
+                      {({ ref }: { ref: any }) => {
+                      // Check if filter is active (non-empty)
+                      const hasActiveFilter = (() => {
+                        if (!filterParam) return false;
+                        
+                        const filterValue = mergedFilters?.[String(filterParam)];
+                        const filterValue2 = filterParam2 ? mergedFilters?.[String(filterParam2)] : null;
+                        
+                        if (filterType === "select") {
+                          return filterValue && filterValue !== "__clear__" && filterValue !== "";
+                        }
+                        
+                        if (filterType === "multi-select") {
+                          return Array.isArray(filterValue) && filterValue.length > 0;
+                        }
+                        
+                        if (filterType === "dateRange") {
+                          return (filterValue && filterValue !== "") || (filterValue2 && filterValue2 !== "");
+                        }
+                        
+                        if (filterType === "date" || filterType === "text") {
+                          return filterValue && filterValue !== "";
+                        }
+                        
+                        return false;
+                      })();
+                      
+                      return (
+                        <th
+                          className={`tableHeader relative  font-medium  text-xs !leading-9 text-left px-3 text-gray-600 
+                             bg-gray-50 border-t border-b border-gray-200  content-start ${
+                               !title && !subtitle ? "border-t-0" : ""
+                             } ${sortParam ? " cursor-pointer " : ""} ${
+                               hasActiveFilter ? "!bg-[#f3f3f3] !shadow-[inset_0_2px_0_0_#525252] !text-black" : ""
+                             }`}
+                          onClick={() =>
+                            sortParam ? requestSort(sortParam) : undefined
+                          }
+                          data-cy={"datatable-header-" + id + "-" + String(key)}
+                        >
+                          <span className="inline-flex items-center gap-2 group select-none w-full">
+                            {header}{" "}
+                            {!actions && sortParam
+                              ? getSortIcon(sortParam)
+                              : ""}
+                          </span>
+                          <div
+                            className={`resizer absolute top-0 right-0 h-full w-2  bg-transparent  ${
+                              index < columns.length - 1
+                                ? "cursor-col-resize hover:border-x border-gray-300 border-r w-1"
+                                : "w-0"
+                            }`}
+                            ref={ref}
+                            onClick={(e) => e.stopPropagation()}
+                          />
+                          {showColFilters && (
+                            <div
+                              className="p-0 m-0 pb-2"
+                              onClick={(e) => e.stopPropagation()}
+                              data-cy={
+                                "datatable-filter-container-" +
+                                id +
+                                "-" +
+                                String(key)
+                              }
+                            >
+                              {filterType === "select" ? (
+                                <Select
+                                  onValueChange={(value) => {
+                                    if (value === "__clear__") {
+                                      filterHandler(
+                                        filterParam as keyof T,
+                                        "",
+                                        filterParam2
+                                      );
+                                    } else {
+                                      // Check if value contains delimiter (has subcategory)
+                                      if (value.includes("-") && filterParam2) {
+                                        filterHandler(
+                                          filterParam as keyof T,
+                                          value,
+                                          filterParam2
+                                        );
+                                      } else {
+                                        // Value without subcategory - clear filterParam2 if it exists
+                                        filterHandler(
+                                          filterParam as keyof T,
+                                          value,
+                                          filterParam2,
+                                          true
+                                        );
+                                      }
+                                    }
+                                  }}
+                                  value={
+                                    filterParam2 &&
+                                    mergedFilters?.[String(filterParam)] &&
+                                    mergedFilters?.[String(filterParam2)]
+                                      ? `${mergedFilters[String(filterParam)]}-${mergedFilters[String(filterParam2)]}`
+                                      : mergedFilters?.[
+                                          String(filterParam)
+                                        ]?.toString() || "__clear__"
+                                  }
+                                  disabled={Object.keys(
+                                    (filters as object) || {}
+                                  ).includes(String(filterParam))}
+                                >
+                                  <SelectTrigger className="flex-1 w-full px-2 font-normal placeholder-muted-foreground">
+                                    <SelectValue placeholder="Zadejte filtr" />
+                                  </SelectTrigger>
+                                  <SelectContent>
+                                    {filterOptions[String(filterParam)]
+                                      ?.filter(
+                                        (option: IOptionItem) =>
+                                          option.value !== null &&
+                                          option.value !== undefined &&
+                                          option.value !== ""
+                                      )
+                                      ?.map((option: IOptionItem) => (
+                                        <SelectItem
+                                          key={option.value}
+                                          value={
+                                            option.value?.toString() ||
+                                            "unknown"
+                                          }
+                                        >
+                                          {option.label}
+                                        </SelectItem>
+                                      ))}
+                                  </SelectContent>
+                                </Select>
+                              ) : filterType === "multi-select" ? (
+                                <MultiSelect
+                                  //    key={JSON.stringify(mergedFilters)}
+                                  options={
+                                    filterOptions[String(filterParam)] || []
+                                  }
+                                  onChange={(values) => {
+                                    filterHandler(
+                                      filterParam as keyof T,
+                                      values,
+                                      filterParam2
+                                    );
+                                  }}
+                                  value={
+                                    Array.isArray(
+                                      mergedFilters?.[String(filterParam)]
+                                    )
+                                      ? mergedFilters[String(filterParam)]
+                                      : mergedFilters?.[String(filterParam)]
+                                        ? [mergedFilters[String(filterParam)]]
+                                        : []
+                                  }
+                                  placeholder={"Zadejte filtr"}
+                                  className="px-0"
+                                  disabled={Object.keys(
+                                    (filters as object) || {}
+                                  ).includes(String(filterParam))}
+                                  variant="secondary"
+                                  maxCount={0}
+                                />
+                              ) : filterType === "dateRange" ? (
+                                <DateRangeField
+                                  //    key={JSON.stringify(mergedFilters)}
+                                  name={String(filterParam)}
+                                  nameEnd={String(filterParam2)}
+                                  onInputChange={(e) =>
+                                    filterHandler(
+                                      e.target.name as keyof T,
+                                      e.target.value
+                                    )
+                                  }
+                                  type={filterType}
+                                  value={{
+                                    startDate:
+                                      mergedFilters?.[String(filterParam)] ||
+                                      "",
+                                    endDate:
+                                      mergedFilters?.[String(filterParam2)] ||
+                                      "",
+                                  }}
+                                  clearable
+                                  className=" px-0 py-0 "
+                                  placeholder={"Zadejte filtr"}
+                                  rounded={true}
+                                  disabled={Object.keys(
+                                    (filters as object) || {}
+                                  ).includes(String(filterParam))}
+                                />
+                              ) : filterType === "date" ? (
+                                <DateField
+                                  //       key={JSON.stringify(mergedFilters)}
+                                  name={String(filterParam)}
+                                  onInputChange={(e) =>
+                                    filterHandler(
+                                      e.target.name as keyof T,
+                                      e.target.value
+                                    )
+                                  }
+                                  type={filterType}
+                                  value={
+                                    mergedFilters?.[String(filterParam)] || ""
+                                  }
+                                  clearable
+                                  className=" px-0 py-0 "
+                                  placeholder={"Zadejte filtr"}
+                                  rounded={true}
+                                  disabled={Object.keys(
+                                    (filters as object) || {}
+                                  ).includes(String(filterParam))}
+                                />
+                              ) : filterType === "text" ? (
+                                <Input
+                                  onChange={(e) =>
+                                    filterHandler(
+                                      filterParam as keyof T,
+                                      e.target.value
+                                    )
+                                  }
+                                  value={
+                                    mergedFilters?.[String(filterParam)] || ""
+                                  }
+                                  disabled={Object.keys(
+                                    (filters as object) || {}
+                                  ).includes(String(filterParam))}
+                                  clearable
+                                  className="min-w-[100px] px-2 font-normal                 placeholder-muted-foreground
+"
+                                  placeholder={"Zadejte filtr"}
+                                  debounceTimeout={1000}
+                                />
+                              ) : null}
+                            </div>
+                          )}
+                        </th>
+                      );
+                      }}
+                    </Resizable>
+                  )
+                )}
+              </tr>
+            </thead>
+            {!isLoading &&
+              data &&
+              data?.content &&
+              data?.content.length > 0 && (
+                <tbody className="relative">
+                  {data.content.map((item, rowIndex) => (
+                    <tr
+                      key={rowIndex}
+                      className={`${
+                        item._isHighlighted || isSelected(item)
+                          ? "bg-gray-50"
+                          : ""
+                      } hover:bg-gray-100 border-gray-200 border-b text-sm`}
+                    >
+                      {bulkAction && (
+                        <td className="w-[20px] h-[52px] hover:bg-gray-200 font-medium text-xs text-center text-gray-600 cursor-pointer">
+                          <label className="w-full h-full flex items-center justify-center cursor-pointer px-2">
+                            <input
+                              type="checkbox"
+                              className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded !focus:ring-indigo-200 focus:ring-4"
+                              checked={isSelected(item) || false}
+                              onChange={() => handleSelectItem(item)}
+                            />
+                          </label>
+                        </td>
+                      )}
+                      {columns.map(({ render, actions, classes }, colIndex) => (
+                        <td
+                          key={`${rowIndex}-${colIndex}`}
+                          onClick={
+                            rowAction ? () => rowAction(item) : undefined
+                          }
+                          className={`px-3 py-2 text-gray-800  ${rowAction ? "cursor-pointer" : ""}  ${
+                            colIndex === 0 ? "font-bold " : ""
+                          } ${classes || ""}`}
+                        >
+                          {render ? render(item) : ""}
+                          {actions &&
+                            actions
+                              .filter((it) => {
+                                if (it.rowAction) return false;
+                                if (it.visible) {
+                                  return it.visible(item);
+                                } else return true;
+                              })
+                              .map((action, actionIndex) => (
+                                <div
+                                  key={`${rowIndex}-${colIndex}-${actionIndex}`}
+                                  className="inline-flex align-middle"
+                                >
+                                  {action.icon && (
+                                    <Button
+                                      variant="icon"
+                                      onClick={() => action.onClick(item)}
+                                    >
+                                      {action.icon}
+                                    </Button>
+                                  )}
+                                  {!action.icon && (
+                                    <Button
+                                      variant="primary"
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        action.onClick(item);
+                                      }}
+                                    >
+                                      {action.label}
+                                    </Button>
+                                  )}
+                                </div>
+                              ))}
+                        </td>
+                      ))}
+                    </tr>
+                  ))}
+                  {data?.content?.length === 0 && (
+                    <tr key="tr-nodata">
+                      <td
+                        key="td-nodata"
+                        className="px-5 py-3 border-b border-gray-200 bg-white text-sm items-center justify-center align-middle"
+                        colSpan={columns.length}
+                      >
+                        No data
+                      </td>
+                    </tr>
+                  )}
+                </tbody>
+              )}
+          </table>
+        </div>
+
+        {data?.isPageable && (
+          <div
+            data-cy="pagination"
+            className="w-full p-5 flex gap-5 justify-between md:flex-row flex-col"
+          >
+            <div className="flex gap-5  text-sm ">
+              {data && (
+                <Button
+                  variant="secondary"
+                  onClick={prevPage}
+                  className="flex items-center"
+                  disabled={data.first || isLoading}
+                  data-cy="prev-page"
+                >
+                  <MdArrowBack className="mr-1.5" /> Předchozí
+                </Button>
+              )}
+              {data && (
+                <Button
+                  variant="secondary"
+                  onClick={nextPage}
+                  className="flex items-center"
+                  disabled={data.last || isLoading}
+                  data-cy="next-page"
+                >
+                  Následující <MdArrowForward className="ml-2" size={20} />
+                </Button>
+              )}
+            </div>
+            <div className="flex items-center justify-center  text-gray-800">
+              {paginationDisplay}
+            </div>
+            <div
+              className="content-center w-auto items-center justify-end flex-row gap-5 flex md:mt-0 mt-5"
+              data-cy="items-per-page"
+            >
+              <span className=" whitespace-nowrap flex-grow">
+                Počet řádků na stránku:
+              </span>
+              <Select
+                onValueChange={handleItemsPerPageChange}
+                value={itemsPerPageLocal?.toString()}
+              >
+                <SelectTrigger className="w-[100px]">
+                  <SelectValue placeholder="Vyberte počet" />
+                </SelectTrigger>
+                <SelectContent>
+                  {itemsPerPageOptions?.map((option) => (
+                    <SelectItem
+                      key={option.value}
+                      value={option.value?.toString() || ""}
+                    >
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}
+
+export default DataTableServer;