@helpwave/hightide 0.1.18 → 0.1.19

package/dist/components/table/Table.mjs

@@ -1,5 +1,5 @@
 // src/components/table/Table.tsx
-import { useCallback as useCallback3, useEffect as useEffect11, useMemo, useRef as useRef3, useState as useState9 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect12, useMemo, useRef as useRef3, useState as useState10 } from "react";
 
 // src/components/layout-and-navigation/Pagination.tsx
 import { ChevronFirst, ChevronLast, ChevronLeft, ChevronRight } from "lucide-react";
@@ -95,6 +95,7 @@ var useTranslation = (translations, overwriteTranslation = {}) => {
 // src/localization/defaults/form.ts
 var formTranslation = {
   en: {
+    add: "Add",
     all: "All",
     apply: "Apply",
     back: "Back",
@@ -107,6 +108,7 @@ var formTranslation = {
     confirm: "Confirm",
     copy: "Copy",
     copied: "Copied",
+    create: "Create",
     decline: "Decline",
     delete: "Delete",
     discard: "Discard",
@@ -149,6 +151,7 @@ var formTranslation = {
     yes: "Yes"
   },
   de: {
+    add: "Hinzuf\xFCgen",
     all: "Alle",
     apply: "Anwenden",
     back: "Zur\xFCck",
@@ -161,6 +164,7 @@ var formTranslation = {
     confirm: "Best\xE4tigen",
     copy: "Kopieren",
     copied: "Kopiert",
+    create: "Erstellen",
     decline: "Ablehnen",
     delete: "L\xF6schen",
     discard: "Verwerfen",
@@ -485,6 +489,7 @@ var clamp = (value, min = 0, max = 1) => {
 import { useEffect as useEffect6, useState as useState5 } from "react";
 
 // src/components/user-action/Button.tsx
+import { forwardRef as forwardRef2 } from "react";
 import clsx3 from "clsx";
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var ButtonColorUtil = {
@@ -510,7 +515,7 @@ var ButtonUtil = {
   paddingMapping,
   iconPaddingMapping
 };
-var SolidButton = ({
+var SolidButton = forwardRef2(function SolidButton2({
   children,
   disabled = false,
   color = "primary",
@@ -520,7 +525,7 @@ var SolidButton = ({
   onClick,
   className,
   ...restProps
-}) => {
+}, ref) {
   const colorClasses = {
     primary: "bg-button-solid-primary-background text-button-solid-primary-text",
     secondary: "bg-button-solid-secondary-background text-button-solid-secondary-text",
@@ -542,8 +547,9 @@ var SolidButton = ({
   return /* @__PURE__ */ jsxs2(
     "button",
     {
-      onClick: disabled ? void 0 : onClick,
-      disabled: disabled || onClick === void 0,
+      ref,
+      onClick,
+      disabled,
       className: clsx3(
         {
           "text-disabled-text bg-disabled-background cursor-not-allowed": disabled,
@@ -578,13 +584,12 @@ var SolidButton = ({
       ]
     }
   );
-};
+});
 var IconButton = ({
   children,
   disabled = false,
   color = "primary",
   size = "medium",
-  onClick,
   className,
   ...restProps
 }) => {
@@ -601,8 +606,7 @@ var IconButton = ({
   return /* @__PURE__ */ jsx4(
     "button",
     {
-      onClick: disabled ? void 0 : onClick,
-      disabled: disabled || onClick === void 0,
+      disabled,
       className: clsx3(
         {
           "text-disabled-text bg-disabled-background cursor-not-allowed": disabled && color !== "transparent",
@@ -644,10 +648,10 @@ var Pagination = ({
   const changePage = (page) => {
     onPageChanged(page);
   };
-  return /* @__PURE__ */ jsxs3("div", { className: clsx4("row gap-x-1", className), style, children: [
+  return /* @__PURE__ */ jsxs3("div", { className: clsx4("flex-row-1", className), style, children: [
     /* @__PURE__ */ jsx5(IconButton, { color: "transparent", onClick: () => changePage(0), disabled: onFirstPage || noPages, children: /* @__PURE__ */ jsx5(ChevronFirst, {}) }),
     /* @__PURE__ */ jsx5(IconButton, { color: "transparent", onClick: () => changePage(pageIndex - 1), disabled: onFirstPage || noPages, children: /* @__PURE__ */ jsx5(ChevronLeft, {}) }),
-    /* @__PURE__ */ jsxs3("div", { className: "row min-w-56 gap-x-2 items-center justify-center mx-2 text-center", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "flex-row-2 min-w-56 items-center justify-center mx-2 text-center", children: [
       /* @__PURE__ */ jsx5(
         Input,
         {
@@ -677,7 +681,7 @@ var Pagination = ({
       /* @__PURE__ */ jsx5(
         "span",
         {
-          className: "row flex-1 items-center justify-center select-none h-10 bg-surface text-on-surface rounded-md font-bold",
+          className: "flex-row-2 flex-1 items-center justify-center select-none h-10 bg-surface text-on-surface rounded-md font-bold",
           children: pageCount
         }
       )
@@ -740,12 +744,12 @@ import { Check, Minus } from "lucide-react";
 import clsx5 from "clsx";
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var checkboxSizeMapping = {
-  small: "size-4",
+  small: "size-5",
   medium: "size-6",
   large: "size-8"
 };
 var checkboxIconSizeMapping = {
-  small: "size-3",
+  small: "size-4",
   medium: "size-5",
   large: "size-7"
 };
@@ -774,7 +778,7 @@ var Checkbox = ({
     const newValue = checked === "indeterminate" ? false : !checked;
     propagateChange(newValue);
   };
-  return /* @__PURE__ */ jsxs4("div", { className: clsx5("row justify-center items-center", containerClassName), children: [
+  return /* @__PURE__ */ jsxs4("div", { className: clsx5("group flex-row-2 items-center cursor-pointer", containerClassName), onClick: changeValue, children: [
     /* @__PURE__ */ jsx6(
       CheckboxPrimitive.Root,
       {
@@ -784,10 +788,9 @@ var Checkbox = ({
         id,
         className: clsx5(usedSizeClass, `items-center border-2 rounded outline-none `, {
           "text-disabled-text border-disabled-outline bg-disabled-background cursor-not-allowed": disabled,
-          "focus:border-primary": !disabled,
+          "focus:border-primary group-hover:border-primary ": !disabled,
           "bg-surface": !disabled && !checked,
-          "bg-primary/30 border-primary text-primary": !disabled && checked === true || checked === "indeterminate",
-          "hover:border-primary focus:hover:border-primary": !disabled && !checked
+          "bg-primary/30 border-primary text-primary": !disabled && checked === true || checked === "indeterminate"
         }, className),
         children: /* @__PURE__ */ jsxs4(CheckboxPrimitive.Indicator, { children: [
           checked === true && /* @__PURE__ */ jsx6(Check, { className: innerIconSize }),
@@ -795,15 +798,7 @@ var Checkbox = ({
         ] })
       }
     ),
-    label && /* @__PURE__ */ jsx6(
-      Label,
-      {
-        ...label,
-        className: clsx5("cursor-pointer", label.className),
-        htmlFor: id,
-        onClick: changeValue
-      }
-    )
+    label && /* @__PURE__ */ jsx6(Label, { ...label, className: clsx5(label.className), htmlFor: id })
   ] });
 };
 
@@ -811,7 +806,11 @@ var Checkbox = ({
 import { FilterIcon } from "lucide-react";
 
 // src/components/user-action/Menu.tsx
-import { useRef as useRef2 } from "react";
+import {
+  useEffect as useEffect9,
+  useRef as useRef2,
+  useState as useState8
+} from "react";
 import clsx6 from "clsx";
 
 // src/hooks/useOutsideClick.ts
@@ -889,54 +888,151 @@ var BagFunctionUtil = {
   resolve
 };
 
+// src/hooks/usePopoverPosition.ts
+var defaultPopoverPositionOptions = {
+  edgePadding: 16,
+  outerGap: 4,
+  horizontalAlignment: "leftInside",
+  verticalAlignment: "bottomOutside",
+  disabled: false
+};
+var usePopoverPosition = (trigger, options) => {
+  const {
+    edgePadding,
+    outerGap,
+    verticalAlignment,
+    horizontalAlignment,
+    disabled
+  } = { ...defaultPopoverPositionOptions, ...options };
+  if (disabled || !trigger) {
+    return {};
+  }
+  const left = {
+    leftOutside: trigger.left - outerGap,
+    leftInside: trigger.left,
+    rightOutside: trigger.right + outerGap,
+    rightInside: trigger.right,
+    center: trigger.left + trigger.width / 2
+  }[horizontalAlignment];
+  const top = {
+    topOutside: trigger.top - outerGap,
+    topInside: trigger.top,
+    bottomOutside: trigger.bottom + outerGap,
+    bottomInside: trigger.bottom,
+    center: trigger.top + trigger.height / 2
+  }[verticalAlignment];
+  const translateX = {
+    leftOutside: "-100%",
+    leftInside: void 0,
+    rightOutside: void 0,
+    rightInside: "-100%",
+    center: "-50%"
+  }[horizontalAlignment];
+  const translateY = {
+    topOutside: "-100%",
+    topInside: void 0,
+    bottomOutside: void 0,
+    bottomInside: "-100%",
+    center: "-50%"
+  }[verticalAlignment];
+  return {
+    left: Math.max(left, edgePadding),
+    top: Math.max(top, edgePadding),
+    translate: [translateX ?? "0", translateY ?? "0"].join(" ")
+  };
+};
+
 // src/components/user-action/Menu.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+import { Fragment, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function getScrollableParents(element) {
+  const scrollables = [];
+  let parent = element.parentElement;
+  while (parent) {
+    scrollables.push(parent);
+    parent = parent.parentElement;
+  }
+  return scrollables;
+}
 var Menu = ({
   trigger,
   children,
-  alignment = "tl",
+  alignmentHorizontal = "leftInside",
+  alignmentVertical = "bottomOutside",
   showOnHover = false,
+  disabled = false,
   menuClassName = ""
 }) => {
-  const { isHovered: isOpen, setIsHovered: setIsOpen, handlers } = useHoverState({ isDisabled: !showOnHover });
+  const { isHovered: isOpen, setIsHovered: setIsOpen } = useHoverState({ isDisabled: !showOnHover || disabled });
   const triggerRef = useRef2(null);
   const menuRef = useRef2(null);
   useOutsideClick([triggerRef, menuRef], () => setIsOpen(false));
-  const bag = { isOpen, close: () => setIsOpen(false) };
-  return /* @__PURE__ */ jsxs5(
-    "div",
-    {
-      className: "relative",
-      ...handlers,
-      children: [
-        trigger(() => setIsOpen(!isOpen), triggerRef),
-        /* @__PURE__ */ jsx7(
-          "div",
+  const [isHidden, setIsHidden] = useState8(true);
+  const bag = {
+    isOpen,
+    close: () => setIsOpen(false),
+    toggleOpen: () => setIsOpen((prevState) => !prevState),
+    disabled
+  };
+  const menuPosition = usePopoverPosition(
+    triggerRef.current?.getBoundingClientRect(),
+    { verticalAlignment: alignmentVertical, horizontalAlignment: alignmentHorizontal, disabled }
+  );
+  useEffect9(() => {
+    if (!isOpen) return;
+    const triggerEl = triggerRef.current;
+    if (!triggerEl) return;
+    const scrollableParents = getScrollableParents(triggerEl);
+    const close = () => setIsOpen(false);
+    scrollableParents.forEach((parent) => {
+      parent.addEventListener("scroll", close);
+    });
+    window.addEventListener("resize", close);
+    return () => {
+      scrollableParents.forEach((parent) => {
+        parent.removeEventListener("scroll", close);
+      });
+      window.removeEventListener("resize", close);
+    };
+  }, [isOpen, setIsOpen]);
+  useEffect9(() => {
+    if (isOpen) {
+      setIsHidden(false);
+    }
+  }, [isOpen]);
+  return /* @__PURE__ */ jsxs5(Fragment, { children: [
+    trigger(bag, triggerRef),
+    createPortal(/* @__PURE__ */ jsx7(
+      "div",
+      {
+        ref: menuRef,
+        onClick: (e) => e.stopPropagation(),
+        className: clsx6(
+          "absolute rounded-md bg-menu-background text-menu-text shadow-around-lg z-10",
           {
-            ref: menuRef,
-            onClick: (e) => e.stopPropagation(),
-            className: clsx6(
-              "absolute top-full mt-1 min-w-40 rounded-lg bg-menu-background text-menu-text shadow-around-lg z-10",
-              {
-                "top-0": alignment[0] === "t",
-                "bottom-0": alignment[0] === "b",
-                "left-0": alignment[1] === "l",
-                "right-0": alignment[1] === "r",
-                "hidden": !isOpen
-              },
-              menuClassName
-            ),
-            children: BagFunctionUtil.resolve(children, bag)
+            "animate-pop-in": isOpen,
+            "animate-pop-out": !isOpen,
+            "hidden": isHidden
+          },
+          menuClassName
+        ),
+        onAnimationEnd: () => {
+          if (!isOpen) {
+            setIsHidden(true);
           }
-        )
-      ]
-    }
-  );
+        },
+        style: {
+          ...menuPosition
+        },
+        children: BagFunctionUtil.resolve(children, bag)
+      }
+    ), document.body)
+  ] });
 };
 
 // src/components/table/TableFilterButton.tsx
-import { useEffect as useEffect9, useState as useState8 } from "react";
-import { Fragment, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { useEffect as useEffect10, useState as useState9 } from "react";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var defaultTableFilterTranslation = {
   en: {
     filter: "Filter",
@@ -961,16 +1057,16 @@ var TableFilterButton = ({
 }) => {
   const translation = useTranslation([formTranslation, defaultTableFilterTranslation]);
   const columnFilterValue = column.getFilterValue();
-  const [filterValue, setFilterValue] = useState8(columnFilterValue);
+  const [filterValue, setFilterValue] = useState9(columnFilterValue);
   const hasFilter = !!filterValue;
-  useEffect9(() => {
+  useEffect10(() => {
     setFilterValue(columnFilterValue);
   }, [columnFilterValue]);
   return /* @__PURE__ */ jsx8(
     Menu,
     {
-      trigger: (onClick, ref) => /* @__PURE__ */ jsxs6("div", { ref, className: "relative", children: [
-        /* @__PURE__ */ jsx8(IconButton, { color: "neutral", size: "tiny", onClick, children: /* @__PURE__ */ jsx8(FilterIcon, {}) }),
+      trigger: ({ toggleOpen }, ref) => /* @__PURE__ */ jsxs6("div", { ref, className: "relative", children: [
+        /* @__PURE__ */ jsx8(IconButton, { color: "neutral", size: "tiny", onClick: toggleOpen, children: /* @__PURE__ */ jsx8(FilterIcon, {}) }),
         hasFilter && /* @__PURE__ */ jsx8(
           "div",
           {
@@ -979,7 +1075,7 @@ var TableFilterButton = ({
           }
         )
       ] }),
-      children: ({ close }) => /* @__PURE__ */ jsxs6("div", { className: "col gap-y-1 p-2 items-start font-normal text-menu-text", children: [
+      children: ({ close }) => /* @__PURE__ */ jsxs6("div", { className: "flex-col-1 p-2 items-start font-normal text-menu-text", children: [
         /* @__PURE__ */ jsx8("h4", { className: "textstyle-title-sm", children: translation("filter") }),
         filterType === "text" && /* @__PURE__ */ jsx8(
           Input,
@@ -991,7 +1087,7 @@ var TableFilterButton = ({
             className: "h-10"
           }
         ),
-        filterType === "range" && /* @__PURE__ */ jsxs6("div", { className: "row gap-x-2 items-center", children: [
+        filterType === "range" && /* @__PURE__ */ jsxs6("div", { className: "flex-row-2 items-center", children: [
           /* @__PURE__ */ jsx8(
             Input,
             {
@@ -1020,7 +1116,7 @@ var TableFilterButton = ({
             }
           )
         ] }),
-        filterType === "dateRange" && /* @__PURE__ */ jsxs6(Fragment, { children: [
+        filterType === "dateRange" && /* @__PURE__ */ jsxs6(Fragment2, { children: [
           /* @__PURE__ */ jsx8(
             Input,
             {
@@ -1048,7 +1144,7 @@ var TableFilterButton = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs6("div", { className: "row justify-end w-full", children: [
+        /* @__PURE__ */ jsxs6("div", { className: "flex-row-2 justify-end w-full", children: [
           hasFilter && /* @__PURE__ */ jsx8(SolidButton, { color: "negative", size: "small", onClick: () => {
             column.setFilterValue(void 0);
             close();
@@ -1118,9 +1214,9 @@ var TableFilters = {
 };
 
 // src/hooks/useResizeCallbackWrapper.ts
-import { useEffect as useEffect10 } from "react";
+import { useEffect as useEffect11 } from "react";
 var useResizeCallbackWrapper = (callback) => {
-  useEffect10(() => {
+  useEffect11(() => {
     window.addEventListener("resize", callback);
     return () => {
       window.removeEventListener("resize", callback);
@@ -1154,19 +1250,19 @@ var Table = ({
 }) => {
   const ref = useRef3(null);
   const tableRef = useRef3(null);
-  const [columnSizing, setColumnSizing] = useState9(columns.reduce((previousValue, currentValue) => {
+  const [columnSizing, setColumnSizing] = useState10(columns.reduce((previousValue, currentValue) => {
     return {
       ...previousValue,
       [currentValue.id]: currentValue.minSize ?? defaultColumn.minSize
     };
   }, {}));
-  const [columnSizingInfo, setColumnSizingInfo] = useState9();
-  const [pagination, setPagination] = useState9({
+  const [columnSizingInfo, setColumnSizingInfo] = useState10();
+  const [pagination, setPagination] = useState10({
     pageSize: 10,
     pageIndex: 0,
     ...initialState?.pagination
   });
-  const [columnFilters, setColumnFilters] = useState9(initialState?.columnFilters);
+  const [columnFilters, setColumnFilters] = useState10(initialState?.columnFilters);
   const computedColumnMinWidths = useMemo(() => {
     return columns.reduce((previousValue, column) => {
       return {
@@ -1306,8 +1402,8 @@ var Table = ({
     columnResizeMode: "onChange",
     ...tableOptions
   });
-  const [hasInitializedSizing, setHasInitializedSizing] = useState9(false);
-  useEffect11(() => {
+  const [hasInitializedSizing, setHasInitializedSizing] = useState10(false);
+  useEffect12(() => {
     if (!hasInitializedSizing && ref.current) {
       setHasInitializedSizing(true);
       table.setColumnSizing(updateColumnSizes(columnSizing));
@@ -1317,7 +1413,7 @@ var Table = ({
     table.setColumnSizing(updateColumnSizes);
   }, [updateColumnSizes]));
   const pageCount = table.getPageCount();
-  useEffect11(() => {
+  useEffect12(() => {
     const totalPages = pageCount;
     if (totalPages === 0) {
       if (pagination.pageIndex !== 0) {
@@ -1338,98 +1434,106 @@ var Table = ({
     const colSizes = {};
     for (let i = 0; i < headers.length; i++) {
       const header = headers[i];
-      colSizes[`--header-${header.id}-size`] = header.getSize();
-      colSizes[`--col-${header.column.id}-size`] = header.column.getSize();
+      colSizes[`--header-${header.id}-size`] = Math.floor(header.getSize());
+      colSizes[`--col-${header.column.id}-size`] = Math.floor(header.column.getSize());
     }
     return colSizes;
   }, [table.getState().columnSizingInfo, table.getState().columnSizing]);
-  return /* @__PURE__ */ jsxs7("div", { ref, className: clsx10("col gap-y-4", className), children: [
-    /* @__PURE__ */ jsx12(Scrollbars, { autoHeight: true, autoHeightMax: tableRef.current?.offsetHeight, autoHide: true, children: /* @__PURE__ */ jsxs7(
-      "table",
+  return /* @__PURE__ */ jsxs7("div", { ref, className: clsx10("flex-col-4", className), children: [
+    /* @__PURE__ */ jsx12(
+      Scrollbars,
       {
-        ref: tableRef,
-        className: clsx10(tableClassName),
-        style: {
-          ...columnSizeVars,
-          width: Math.max(table.getTotalSize(), ref.current?.offsetWidth ?? table.getTotalSize())
-        },
-        children: [
-          table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx12("colgroup", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx12(
-            "col",
-            {
-              style: {
-                width: `calc(var(--header-${header?.id}-size) * 1px)`,
-                minWidth: header.column.columnDef.minSize,
-                maxWidth: header.column.columnDef.maxSize
-              }
+        autoHeight: true,
+        autoHeightMax: tableRef.current?.offsetHeight + 2,
+        autoHide: true,
+        children: /* @__PURE__ */ jsxs7(
+          "table",
+          {
+            ref: tableRef,
+            className: clsx10(tableClassName),
+            style: {
+              ...columnSizeVars,
+              width: Math.floor(Math.max(table.getTotalSize() - columns.length, ref.current?.offsetWidth ?? table.getTotalSize()))
             },
-            header.id
-          )) }, headerGroup.id)),
-          /* @__PURE__ */ jsx12("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx12("tr", { className: table.options.meta?.headerRowClassName, children: headerGroup.headers.map((header) => {
-            return /* @__PURE__ */ jsxs7(
-              "th",
-              {
-                colSpan: header.colSpan,
-                className: clsx10("relative group", header.column.columnDef.meta?.className),
-                children: [
-                  /* @__PURE__ */ jsx12("div", { className: "row w-full", children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs7("div", { className: "row gap-x-1 items-center", children: [
-                    header.column.getCanSort() && /* @__PURE__ */ jsx12(
-                      TableSortButton,
-                      {
-                        sortDirection: header.column.getIsSorted(),
-                        onClick: () => header.column.toggleSorting()
-                      }
-                    ),
-                    header.column.getCanFilter() && header.column.columnDef.meta?.filterType ? /* @__PURE__ */ jsx12(
-                      TableFilterButton,
-                      {
-                        column: header.column,
-                        filterType: header.column.columnDef.meta.filterType
-                      }
-                    ) : null,
-                    flexRender(
-                      header.column.columnDef.header,
-                      header.getContext()
-                    )
-                  ] }) }),
-                  header.column.getCanResize() && /* @__PURE__ */ jsx12(
-                    "div",
-                    {
-                      onMouseDown: header.getResizeHandler(),
-                      onTouchStart: header.getResizeHandler(),
-                      onDoubleClick: () => {
-                        header.column.resetSize();
-                      },
-                      className: "table-resize-indicator w-2 rounded bg-primary cursor-col-resize select-none touch-none opacity-0 group-hover:opacity-100 transition-opacity",
-                      style: {
-                        opacity: !columnSizingInfo?.columnSizingStart ? void 0 : columnSizingInfo?.columnSizingStart?.findIndex(([id, _]) => id === header.column.id) !== -1 ? 1 : columnSizingInfo?.columnSizingStart?.length !== 0 ? 0 : void 0
-                      }
-                    }
-                  )
-                ]
-              },
-              header.id
-            );
-          }) }, headerGroup.id)) }),
-          /* @__PURE__ */ jsxs7("tbody", { children: [
-            table.getRowModel().rows.map((row) => {
-              return /* @__PURE__ */ jsx12("tr", { onClick: () => onRowClick(row, table), className: table.options.meta?.bodyRowClassName, children: row.getVisibleCells().map((cell) => {
-                return /* @__PURE__ */ jsx12("td", { children: flexRender(
-                  cell.column.columnDef.cell,
-                  cell.getContext()
-                ) }, cell.id);
-              }) }, row.id);
-            }),
-            range(table.getState().pagination.pageSize - table.getRowModel().rows.length, { allowEmptyRange: true }).map((row, index) => {
-              return /* @__PURE__ */ jsx12("tr", { children: columns.map((column) => {
-                return /* @__PURE__ */ jsx12("td", { children: fillerRow ? fillerRow(column.id, table) : /* @__PURE__ */ jsx12(FillerRowElement, {}) }, column.id);
-              }) }, "filler-row-" + index);
-            })
-          ] })
-        ]
+            children: [
+              table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx12("colgroup", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx12(
+                "col",
+                {
+                  style: {
+                    width: `calc(var(--header-${header?.id}-size) * 1px)`,
+                    minWidth: header.column.columnDef.minSize,
+                    maxWidth: header.column.columnDef.maxSize
+                  }
+                },
+                header.id
+              )) }, headerGroup.id)),
+              /* @__PURE__ */ jsx12("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx12("tr", { className: table.options.meta?.headerRowClassName, children: headerGroup.headers.map((header) => {
+                return /* @__PURE__ */ jsxs7(
+                  "th",
+                  {
+                    colSpan: header.colSpan,
+                    className: clsx10("relative group", header.column.columnDef.meta?.className),
+                    children: [
+                      /* @__PURE__ */ jsx12("div", { className: "flex-row-2 w-full", children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs7("div", { className: "flex-row-1 items-center", children: [
+                        header.column.getCanSort() && /* @__PURE__ */ jsx12(
+                          TableSortButton,
+                          {
+                            sortDirection: header.column.getIsSorted(),
+                            onClick: () => header.column.toggleSorting()
+                          }
+                        ),
+                        header.column.getCanFilter() && header.column.columnDef.meta?.filterType ? /* @__PURE__ */ jsx12(
+                          TableFilterButton,
+                          {
+                            column: header.column,
+                            filterType: header.column.columnDef.meta.filterType
+                          }
+                        ) : null,
+                        flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )
+                      ] }) }),
+                      header.column.getCanResize() && /* @__PURE__ */ jsx12(
+                        "div",
+                        {
+                          onMouseDown: header.getResizeHandler(),
+                          onTouchStart: header.getResizeHandler(),
+                          onDoubleClick: () => {
+                            header.column.resetSize();
+                          },
+                          className: "table-resize-indicator w-2 rounded bg-primary cursor-col-resize select-none touch-none opacity-0 group-hover:opacity-100 transition-opacity",
+                          style: {
+                            opacity: !columnSizingInfo?.columnSizingStart ? void 0 : columnSizingInfo?.columnSizingStart?.findIndex(([id, _]) => id === header.column.id) !== -1 ? 1 : columnSizingInfo?.columnSizingStart?.length !== 0 ? 0 : void 0
+                          }
+                        }
+                      )
+                    ]
+                  },
+                  header.id
+                );
+              }) }, headerGroup.id)) }),
+              /* @__PURE__ */ jsxs7("tbody", { children: [
+                table.getRowModel().rows.map((row) => {
+                  return /* @__PURE__ */ jsx12("tr", { onClick: () => onRowClick(row, table), className: table.options.meta?.bodyRowClassName, children: row.getVisibleCells().map((cell) => {
+                    return /* @__PURE__ */ jsx12("td", { children: flexRender(
+                      cell.column.columnDef.cell,
+                      cell.getContext()
+                    ) }, cell.id);
+                  }) }, row.id);
+                }),
+                range(table.getState().pagination.pageSize - table.getRowModel().rows.length, { allowEmptyRange: true }).map((row, index) => {
+                  return /* @__PURE__ */ jsx12("tr", { children: columns.map((column) => {
+                    return /* @__PURE__ */ jsx12("td", { children: fillerRow ? fillerRow(column.id, table) : /* @__PURE__ */ jsx12(FillerRowElement, {}) }, column.id);
+                  }) }, "filler-row-" + index);
+                })
+              ] })
+            ]
+          }
+        )
       }
-    ) }),
-    /* @__PURE__ */ jsx12("div", { className: "row justify-center", children: /* @__PURE__ */ jsx12(
+    ),
+    /* @__PURE__ */ jsx12("div", { className: "flex-row-2 justify-center", children: /* @__PURE__ */ jsx12(
       Pagination,
       {
         pageIndex: table.getState().pagination.pageIndex,
@@ -1440,8 +1544,8 @@ var Table = ({
   ] });
 };
 var TableUncontrolled = ({ data, ...props }) => {
-  const [usedDate, setUsedData] = useState9(data);
-  useEffect11(() => {
+  const [usedDate, setUsedData] = useState10(data);
+  useEffect12(() => {
     setUsedData(data);
   }, [data]);
   return /* @__PURE__ */ jsx12(