@addsign/moje-agenda-shared-lib 1.0.61 → 2.0.0

package/lib/components/datatable/DataTableServer.tsx

@@ -0,0 +1,939 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+import {
+  Button,
+  DataTableColumn,
+  DateField,
+  DateRangeField,
+  FormField,
+  IPageable,
+  Spinner,
+  handleErrors,
+  useFederationContext,
+} from "../../main";
+import {
+  MdArrowBack,
+  MdArrowDownward,
+  MdArrowForward,
+  MdArrowUpward,
+  MdClose,
+  MdOutlineFilterAlt,
+  MdOutlineFilterAltOff,
+  MdSearch,
+} from "react-icons/md";
+import SelectField from "../form/SelectField";
+import InputField from "../form/InputField";
+import { Resizable } from "./Resizable";
+import { DatatableSettings } from "./DatatableSettings";
+
+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;
+}
+
+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));
+      }
+    });
+};
+function DataTableServer<T extends DataTableInternalItems>({
+  id,
+  url,
+  columns,
+  title,
+  subtitle,
+  allowSearch = false,
+  showHeader = true,
+  rowAction,
+  bulkAction,
+  filters,
+  selectedItemKey = "id",
+}: DataTableServerProps<T>) {
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const [itemsPerPageLocal, setItemsPerPageLocal] = useState<number>();
+  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>();
+  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>();
+  const [sortConfig, setSortConfig] = useState<ISortConfig | null>(null);
+
+  const createDataPageable = (
+    response: any,
+    itemsPerPage: number
+  ): IPageable<T> => {
+    return {
+      content: response.data.content || response.data,
+      empty: response.data?.content ? response.data.empty : true,
+      first: response.data?.content ? response.data.first : true,
+      last: response.data?.content ? response.data.last : true,
+      number: response.data?.content ? 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,
+    };
+  };
+
+  const [reloadData, setReloadData] = useState(false);
+
+  const mergedFilters: { [key: string]: any } = useMemo(() => {
+    return showColFilters ? { ...columnFilters, ...filters } : filters || {};
+  }, [columnFilters, filters, showColFilters]);
+
+  useEffect(() => {
+    setReloadData(true);
+  }, [
+    url,
+    showColFilters,
+    // id,
+    columnFilters,
+    itemsPerPageLocal,
+    currentPage,
+    sortConfig,
+    federationContext.apiClient,
+    federationContext.emitter,
+    filters,
+    tableKey,
+  ]);
+
+  useEffect(() => {
+    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
+      const filteredMergedFilters = Object.entries(mergedFilters).reduce(
+        (acc: Record<string, any>, [key, value]) => {
+          if (value !== null && value !== "") {
+            acc[key] = value;
+          }
+          return acc;
+        },
+        {}
+      );
+
+      federationContext.apiClient
+        .get(url, {
+          signal: currentAbortController.signal, // Pass the AbortController signal to the request
+          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 fetchFilterOptions = async (column: DataTableColumn<T>) => {
+      if (column.filterOptions) {
+        // if filterOptions is provided, use it directly
+        return column.filterOptions;
+      } else if (column.filterSource) {
+        try {
+          const response = await federationContext.apiClient.get(
+            column.filterSource
+          );
+
+          const options = response.data.map((item: any) => ({
+            value: item[column.filterValueKey as keyof typeof item],
+            label: item[column.filterLabelKey as keyof typeof item],
+          }));
+          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.filterSource || column.filterOptions) &&
+          column.filterValueKey &&
+          column.filterLabelKey &&
+          column.filterParam
+        ) {
+          const options = await fetchFilterOptions(column);
+
+          if (options) {
+            newFilterOptions[column.filterParam as string] = [
+              { value: "", label: "" },
+              ...options,
+            ];
+          }
+        }
+      }
+
+      setFilterOptions(newFilterOptions);
+    };
+
+    updateFilterOptions();
+  }, [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" />
+      ) : (
+        <MdArrowUpward
+          fontSize="small"
+          className="text-gray-300 invisible group-hover:visible "
+        />
+      );
+    }
+    return (
+      <MdArrowUpward
+        fontSize="small"
+        className="text-gray-300 invisible group-hover:visible "
+      />
+    );
+  };
+
+  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) => {
+    setColumnFilters((prev) => ({ ...prev, [filterParam]: value }));
+    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);
+
+    federationContext.apiClient
+      .get(url, {
+        params: {
+          ...filters,
+          ...(showColFilters ? columnFilters : {}),
+          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) => {
+              if (column.render) {
+                (row as any)[column.header] = column.render(item)?.toString();
+              }
+            });
+            return row;
+          })
+        );
+        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,
+    filters,
+    showColFilters,
+    columnFilters,
+    sortConfig,
+    handleErrors,
+    columns,
+  ]);
+
+  const handleItemsPerPageChange = (
+    event: React.ChangeEvent<HTMLSelectElement>
+  ) => {
+    const selectedItemsPerPage = Number(event.target.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" }}
+      >
+        {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}
+              >
+                {!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>
+        )}
+        <div className="overflow-auto min-h-[500px]">
+          <table className="w-full leading-normal" key={tableKey}>
+            <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"}
+                    >
+                      {({ 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
+                          }
+                        >
+                          <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()}
+                            >
+                              {filterType === "select" ? (
+                                <SelectField
+                                  //  label={header}
+                                  key={JSON.stringify(mergedFilters)}
+                                  name={String(key) + "_filter"}
+                                  onInputChange={(e) =>
+                                    filterHandler(
+                                      filterParam as keyof T,
+                                      e.target.value
+                                    )
+                                  }
+                                  type={filterType}
+                                  options={
+                                    filterOptions[String(filterParam)] || []
+                                  }
+                                  value={
+                                    mergedFilters?.[String(filterParam)] ?? ""
+                                  }
+                                  clearable
+                                  className=" px-0"
+                                  placeholder={"Zadejte filtr"}
+                                  rounded={true}
+                                  disabled={Object.keys(
+                                    (filters as object) || {}
+                                  ).includes(String(filterParam))}
+                                />
+                              ) : filterType === "dateRange" ? (
+                                <DateRangeField
+                                  //    label={header}
+                                  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
+                                  //    label={header}
+                                  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" ? (
+                                <InputField
+                                  //    label={header}
+                                  key={filterParam}
+                                  name={String(key) + "_filter"}
+                                  onInputChange={(e) =>
+                                    filterHandler(
+                                      filterParam as keyof T,
+                                      e.target.value
+                                    )
+                                  }
+                                  type={filterType}
+                                  value={
+                                    mergedFilters?.[String(filterParam)] || ""
+                                  }
+                                  disabled={Object.keys(
+                                    (filters as object) || {}
+                                  ).includes(String(filterParam))}
+                                  clearable
+                                  className=" min-w-[100px] px-0 "
+                                  rounded={true}
+                                  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 ${rowAction ? "cursor-pointer" : ""}  ${
+                            colIndex === 0
+                              ? "font-medium text-gray-900"
+                              : "text-gray-700"
+                          } ${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="flex 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>
+              )}
+            {isLoading && (
+              <tbody className="relative">
+                <tr>
+                  <td colSpan={100}>
+                    <div className="w-full flex items-center justify-center h-[500px] py-2">
+                      <Spinner />
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            )}
+            {!isLoading && (!data || data?.content?.length === 0) && (
+              <tbody className="relative h-[440px]">
+                <tr>
+                  <td colSpan={100}>
+                    <div className="w-full flex items-center justify-center h-full py-2 text-gray-600 font-medium text-xs ">
+                      Žádná data
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            )}
+          </table>
+        </div>
+        <div className="w-full p-5 flex gap-5 justify-between">
+          <div className="flex gap-5  text-sm ">
+            {data && (
+              <Button
+                variant="secondary"
+                onClick={prevPage}
+                className="flex items-center"
+                disabled={data.first || isLoading}
+              >
+                <MdArrowBack className="mr-1.5" /> Předchozí
+              </Button>
+            )}
+            {data && (
+              <Button
+                variant="secondary"
+                onClick={nextPage}
+                className="flex items-center"
+                disabled={data.last || isLoading}
+              >
+                Následující <MdArrowForward className="ml-2" size={20} />
+              </Button>
+            )}
+            <div className="flex items-center justify-end  text-gray-800">
+              {paginationDisplay}
+            </div>
+          </div>{" "}
+          <div className="content-center w-auto items-center justify-end flex-row gap-5 flex">
+            <span className=" whitespace-nowrap flex-grow">
+              Počet řádků na stránku:
+            </span>
+            <SelectField
+              name="itemsPerPage"
+              onInputChange={handleItemsPerPageChange}
+              className="!w-[100px]"
+              options={[
+                { value: 10, label: "10" },
+                { value: 50, label: "50" },
+                { value: 100, label: "100" },
+              ]}
+              value={itemsPerPageLocal}
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default DataTableServer;