@dmsi/wedgekit-react 0.0.207 → 0.0.208

package/dist/components/index.cjs

@@ -134,7 +134,7 @@ var CSS = /* @__PURE__ */ Object.freeze({
 
 // src/components/DataGridCell.tsx
 var import_clsx8 = __toESM(require("clsx"), 1);
-var import_react10 = require("react");
+var import_react11 = require("react");
 
 // src/classNames.ts
 var import_clsx = __toESM(require("clsx"), 1);
@@ -883,11 +883,11 @@ Search.displayName = "Search";
 
 // src/components/Menu.tsx
 var import_clsx5 = __toESM(require("clsx"), 1);
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/components/useMenuSystem.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/hooks/useKeydown.ts
 var import_react4 = require("react");
@@ -936,23 +936,94 @@ var useMatchesMedia = (query) => {
 };
 var useMatchesMobile = () => useMatchesMedia("(width < 48rem)");
 
+// src/utils/mergeObjectArrays.ts
+function mergeObjectArrays(arr1, arr2) {
+  const maxLength = Math.max(arr1.length, arr2.length);
+  return Array.from(
+    { length: maxLength },
+    (_, i) => __spreadValues(__spreadValues({}, arr1[i] || {}), arr2[i] || {})
+  );
+}
+
+// src/utils.ts
+function findDocumentRoot(element) {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    throw new Error(
+      "findDocumentRoot can only be used in a browser environment."
+    );
+  }
+  if (!element || !(element instanceof Node)) {
+    return window.document.body;
+  }
+  let currentElement = element;
+  while (currentElement && currentElement.parentNode) {
+    if (currentElement.parentNode === document) {
+      return document.body;
+    } else if (currentElement.parentNode instanceof DocumentFragment) {
+      return currentElement.parentNode;
+    } else {
+      currentElement = currentElement.parentNode;
+    }
+  }
+  return window.document.body;
+}
+
+// src/hooks/useTableLayout.ts
+var import_react7 = require("react");
+function useTableLayout(initialColumns, key) {
+  const [columns, setColumns] = (0, import_react7.useState)(initialColumns);
+  const [isReady, setIsReady] = (0, import_react7.useState)(false);
+  const [layoutSignal, setLayoutSignal] = (0, import_react7.useState)(0);
+  (0, import_react7.useEffect)(() => {
+    if (!key) return setIsReady(true);
+    const savedLayout = localStorage.getItem(`${key}-tableLayout`);
+    if (savedLayout) {
+      setColumns(
+        mergeObjectArrays(
+          initialColumns,
+          JSON.parse(savedLayout)
+        )
+      );
+    }
+    if (!savedLayout) handleSaveLayout(initialColumns, true);
+    setLayoutSignal((prev) => prev + 1);
+    setIsReady(true);
+  }, []);
+  const handleSaveLayout = (0, import_react7.useCallback)(
+    (setter, _internal) => {
+      if (!isReady && !_internal) return null;
+      const newColumns = typeof setter === "function" ? setter(columns) : setter;
+      if (JSON.stringify(newColumns) === JSON.stringify(columns) && !_internal)
+        return null;
+      if (key) {
+        localStorage.setItem(`${key}-tableLayout`, JSON.stringify(newColumns));
+      }
+      setColumns(newColumns);
+      setLayoutSignal((prev) => prev + 1);
+      return newColumns;
+    },
+    [columns, isReady, key]
+  );
+  return { columns, setColumns: handleSaveLayout, layoutSignal, isReady };
+}
+
 // src/components/useMenuSystem.tsx
 function useSubMenuSystem(mobilePositionTo) {
-  const [activeMenus, setActiveMenus] = (0, import_react7.useState)(
+  const [activeMenus, setActiveMenus] = (0, import_react8.useState)(
     {}
   );
-  const [activeMenu, setActiveMenu] = (0, import_react7.useState)("");
-  const [currentSubMenuLevel, setCurrentSubMenuLevel] = (0, import_react7.useState)(
+  const [activeMenu, setActiveMenu] = (0, import_react8.useState)("");
+  const [currentSubMenuLevel, setCurrentSubMenuLevel] = (0, import_react8.useState)(
     null
   );
-  const menuRootRef = (0, import_react7.useRef)(null);
-  const subMenuRefs = (0, import_react7.useRef)({});
-  const hoverTimeoutRef = (0, import_react7.useRef)(null);
-  const closeTimeoutRef = (0, import_react7.useRef)(null);
-  const mouseStopTimeoutRef = (0, import_react7.useRef)(null);
-  const isMouseMovingRef = (0, import_react7.useRef)(false);
-  const pendingOpenActionRef = (0, import_react7.useRef)(null);
-  const pendingCloseActionRef = (0, import_react7.useRef)(null);
+  const menuRootRef = (0, import_react8.useRef)(null);
+  const subMenuRefs = (0, import_react8.useRef)({});
+  const hoverTimeoutRef = (0, import_react8.useRef)(null);
+  const closeTimeoutRef = (0, import_react8.useRef)(null);
+  const mouseStopTimeoutRef = (0, import_react8.useRef)(null);
+  const isMouseMovingRef = (0, import_react8.useRef)(false);
+  const pendingOpenActionRef = (0, import_react8.useRef)(null);
+  const pendingCloseActionRef = (0, import_react8.useRef)(null);
   const isMobile = useMatchesMobile();
   const toggleMenu = (menuId, level) => {
     if (closeTimeoutRef.current) {
@@ -992,7 +1063,7 @@ function useSubMenuSystem(mobilePositionTo) {
       return newActiveMenus;
     });
   };
-  const executePendingActions = (0, import_react7.useCallback)(() => {
+  const executePendingActions = (0, import_react8.useCallback)(() => {
     if (pendingCloseActionRef.current) {
       pendingCloseActionRef.current();
       pendingCloseActionRef.current = null;
@@ -1081,7 +1152,7 @@ function useSubMenuSystem(mobilePositionTo) {
   const isMenuActive = (menuId, level) => {
     return activeMenus[level] === menuId;
   };
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     const handleClickOutside = (event) => {
       var _a;
       if (Object.keys(activeMenus).length === 0) return;
@@ -1100,7 +1171,7 @@ function useSubMenuSystem(mobilePositionTo) {
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [activeMenus]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     return () => {
       if (hoverTimeoutRef.current) {
         clearTimeout(hoverTimeoutRef.current);
@@ -1178,13 +1249,13 @@ function useSubMenuSystem(mobilePositionTo) {
   };
 }
 function useMenuPosition(elementRef, position = "bottom", options) {
-  const [menuPosition, setMenuPosition] = (0, import_react7.useState)({
+  const [menuPosition, setMenuPosition] = (0, import_react8.useState)({
     top: 0,
     left: 0,
     minWidth: 0
   });
   const isMobile = options == null ? void 0 : options.isMobile;
-  const updatePosition = (0, import_react7.useCallback)(() => {
+  const updatePosition = (0, import_react8.useCallback)(() => {
     var _a, _b, _c;
     if (!(elementRef == null ? void 0 : elementRef.current)) return;
     const triggerRect = elementRef.current.getBoundingClientRect();
@@ -1232,7 +1303,7 @@ function useMenuPosition(elementRef, position = "bottom", options) {
       minWidth: triggerRect.width
     });
   }, [elementRef, position, options == null ? void 0 : options.menuRef, options == null ? void 0 : options.topOffset, isMobile]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!(options == null ? void 0 : options.isOpen) || !(options == null ? void 0 : options.setIsOpen)) return;
     const handleClickOutside = (event) => {
       var _a, _b, _c, _d, _e;
@@ -1258,7 +1329,7 @@ function useMenuPosition(elementRef, position = "bottom", options) {
     options == null ? void 0 : options.menuRef,
     options == null ? void 0 : options.additionalRefs
   ]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     updatePosition();
     const resizeObserver = new ResizeObserver(updatePosition);
     if (elementRef == null ? void 0 : elementRef.current) {
@@ -1275,29 +1346,6 @@ function useMenuPosition(elementRef, position = "bottom", options) {
   return { menuPosition, updatePosition };
 }
 
-// src/utils.ts
-function findDocumentRoot(element) {
-  if (typeof window === "undefined" || typeof document === "undefined") {
-    throw new Error(
-      "findDocumentRoot can only be used in a browser environment."
-    );
-  }
-  if (!element || !(element instanceof Node)) {
-    return window.document.body;
-  }
-  let currentElement = element;
-  while (currentElement && currentElement.parentNode) {
-    if (currentElement.parentNode === document) {
-      return document.body;
-    } else if (currentElement.parentNode instanceof DocumentFragment) {
-      return currentElement.parentNode;
-    } else {
-      currentElement = currentElement.parentNode;
-    }
-  }
-  return window.document.body;
-}
-
 // src/components/Menu.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var Menu = (_a) => {
@@ -1340,9 +1388,9 @@ var Menu = (_a) => {
     "menuName",
     "calculateMinMaxHeight"
   ]);
-  const internalRef = (0, import_react8.useRef)(null);
+  const internalRef = (0, import_react9.useRef)(null);
   const actualRef = ref || internalRef;
-  const [maxHeight, setMaxHeight] = (0, import_react8.useState)("180px");
+  const [maxHeight, setMaxHeight] = (0, import_react9.useState)("180px");
   const isMobile = useMatchesMobile();
   const { menuPosition, updatePosition } = useMenuPosition(
     isMobile && mobilePositionTo ? mobilePositionTo : positionTo,
@@ -1355,7 +1403,7 @@ var Menu = (_a) => {
       isMobile: !!(isMobile && mobilePositionTo)
     }
   );
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (calculateMinMaxHeight) {
       return;
     }
@@ -1379,7 +1427,7 @@ var Menu = (_a) => {
       cancelAnimationFrame(raf);
     };
   }, [actualRef.current, customMaxHeight, calculateMinMaxHeight]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!calculateMinMaxHeight) {
       return;
     }
@@ -1390,14 +1438,14 @@ var Menu = (_a) => {
       setMaxHeight(`${calculatedMaxHeight}px`);
     }
   }, [actualRef.current, positionTo == null ? void 0 : positionTo.current, calculateMinMaxHeight]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!show) {
       return;
     }
     initializeMenuFocus();
     updatePosition();
   }, [show, updatePosition]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!show || !setShow) {
       return;
     }
@@ -1552,7 +1600,7 @@ Menu.displayName = "Menu";
 
 // src/components/MenuOption.tsx
 var import_clsx7 = __toESM(require("clsx"), 1);
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/components/Paragraph.tsx
 var import_clsx6 = __toESM(require("clsx"), 1);
@@ -1635,10 +1683,10 @@ var MenuOption = ({
   menuValue,
   onMouseMove
 }) => {
-  const uniqueId = (0, import_react9.useId)();
-  const internalRef = (0, import_react9.useRef)(null);
+  const uniqueId = (0, import_react10.useId)();
+  const internalRef = (0, import_react10.useRef)(null);
   const actualRef = ref || internalRef;
-  const menuId = (0, import_react9.useRef)(`menu-${uniqueId}`);
+  const menuId = (0, import_react10.useRef)(`menu-${uniqueId}`);
   const isMobile = useMatchesMobile();
   const handleMouseEnter = () => {
     if (subMenu && onSubMenuHover && !disabled) {
@@ -1789,7 +1837,7 @@ function highlightMatch(text, searchValue) {
 
 // src/components/DataGridCell.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var DataGridCell = (0, import_react10.memo)(
+var DataGridCell = (0, import_react11.memo)(
   (_a) => {
     var _b = _a, {
       id,
@@ -1827,10 +1875,10 @@ var DataGridCell = (0, import_react10.memo)(
       "testid"
     ]);
     const Element = type === "header" ? "th" : "td";
-    const timerRef = (0, import_react10.useRef)(null);
-    const [isGrabbing, setIsGrabbing] = (0, import_react10.useState)(false);
-    const [isPointerPressed, setIsPointerPressed] = (0, import_react10.useState)(false);
-    (0, import_react10.useEffect)(() => {
+    const timerRef = (0, import_react11.useRef)(null);
+    const [isGrabbing, setIsGrabbing] = (0, import_react11.useState)(false);
+    const [isPointerPressed, setIsPointerPressed] = (0, import_react11.useState)(false);
+    (0, import_react11.useEffect)(() => {
       return () => {
         if (timerRef.current) {
           clearTimeout(timerRef.current);
@@ -1939,12 +1987,12 @@ function DataCellHeader(_a) {
     "useMenuDefaultMinWidth"
   ]);
   var _a2, _b2, _c;
-  const [showMenu, setShowMenu] = (0, import_react10.useState)(false);
-  const [filter, setFilter] = (0, import_react10.useState)(
+  const [showMenu, setShowMenu] = (0, import_react11.useState)(false);
+  const [filter, setFilter] = (0, import_react11.useState)(
     (_a2 = header.column.getFilterValue()) != null ? _a2 : ""
   );
-  const ref = (0, import_react10.useRef)(null);
-  const predeterminedPinned = (0, import_react10.useRef)(false);
+  const ref = (0, import_react11.useRef)(null);
+  const predeterminedPinned = (0, import_react11.useRef)(false);
   const {
     menuRootRef,
     isMenuActive,
@@ -1952,7 +2000,7 @@ function DataCellHeader(_a) {
     listeners: subMenuListeners,
     mobileHide
   } = useSubMenuSystem(node ? node : ref);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     var _a3;
     const columnPinning = (_a3 = header.getContext().table.options.initialState) == null ? void 0 : _a3.columnPinning;
     const left = (columnPinning == null ? void 0 : columnPinning.left) ? columnPinning.left : [];
@@ -1961,7 +2009,7 @@ function DataCellHeader(_a) {
       header.column.id
     );
   }, []);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     const handler = setTimeout(() => {
       header.column.setFilterValue(filter);
     }, 500);
@@ -2235,7 +2283,7 @@ function DragAlongCell(_a) {
 DragAlongCell.displayName = "DragAlongCell";
 
 // src/components/DataGrid/index.tsx
-var import_react15 = __toESM(require("react"), 1);
+var import_react16 = __toESM(require("react"), 1);
 var import_react_table3 = require("@tanstack/react-table");
 var import_core = require("@dnd-kit/core");
 var import_sortable2 = require("@dnd-kit/sortable");
@@ -2263,7 +2311,7 @@ function getSortIcon(sort, nextSort = false) {
 }
 
 // src/components/DataGrid/PinnedColumns.tsx
-var import_react14 = __toESM(require("react"), 1);
+var import_react15 = __toESM(require("react"), 1);
 
 // src/components/DataGrid/TableBody/index.tsx
 var import_react_virtual = require("@tanstack/react-virtual");
@@ -2272,7 +2320,7 @@ var import_clsx11 = __toESM(require("clsx"), 1);
 // src/components/DataGrid/TableBody/TableBodyRow.tsx
 var import_clsx10 = __toESM(require("clsx"), 1);
 var import_react_table = require("@tanstack/react-table");
-var import_react11 = __toESM(require("react"), 1);
+var import_react12 = __toESM(require("react"), 1);
 var import_jsx_runtime10 = require("react/jsx-runtime");
 function TableBodyRow({
   id,
@@ -2328,7 +2376,7 @@ function TableBodyRow({
             return;
           }
           const cellValue = cell.getValue();
-          return ((_a2 = cell.column.columnDef.meta) == null ? void 0 : _a2.useCustomRenderer) ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react11.default.Fragment, { children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()) }, cell.id) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          return ((_a2 = cell.column.columnDef.meta) == null ? void 0 : _a2.useCustomRenderer) ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react12.default.Fragment, { children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()) }, cell.id) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             CellElement,
             {
               id: id ? `${id}-row-${row.id}-cell-${cell.id}` : void 0,
@@ -2532,10 +2580,10 @@ function TableBody({
 }
 
 // src/components/DataGrid/ColumnSelectorHeaderCell/index.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 
 // src/components/DataGrid/ColumnSelectorHeaderCell/ColumnSelectorMenuOption.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 function ColumnSelectorMenuOption({
   id,
@@ -2543,7 +2591,7 @@ function ColumnSelectorMenuOption({
   column,
   toggleColumnVisibility
 }) {
-  const [isVisible, setIsVisible] = (0, import_react12.useState)(column.getIsVisible());
+  const [isVisible, setIsVisible] = (0, import_react13.useState)(column.getIsVisible());
   const label = typeof column.columnDef.header === "string" ? column.columnDef.header : null;
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MenuOption, { id, testid, selected: isVisible, defaultChecked: isVisible, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     Checkbox,
@@ -2569,8 +2617,8 @@ function ColumnSelectorHeaderCell({
   toggleColumnVisibility,
   resetColumnVisibility
 }) {
-  const ref = (0, import_react13.useRef)(null);
-  const [show, setShow] = (0, import_react13.useState)(false);
+  const ref = (0, import_react14.useRef)(null);
+  const [show, setShow] = (0, import_react14.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     DataGridCell,
     {
@@ -2733,7 +2781,7 @@ function PinnedColumns(_a) {
                       header.id
                     );
                   }
-                  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react14.default.Fragment, { children: ((_c = header.column.columnDef.meta) == null ? void 0 : _c.checkbox) ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DataGridCell, { type: "header", component: "checkbox", locked: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react15.default.Fragment, { children: ((_c = header.column.columnDef.meta) == null ? void 0 : _c.checkbox) ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DataGridCell, { type: "header", component: "checkbox", locked: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                     Checkbox,
                     {
                       checked: allSelectedAcrossPages,
@@ -2811,12 +2859,29 @@ function DataGrid({
   useMenuDefaultMinWidth
 }) {
   var _a, _b, _c, _d, _e, _f, _g;
-  const [columnOrder, setColumnOrder] = (0, import_react15.useState)(
-    () => columns.map((c) => c.id)
+  const [localSorting, setLocalSorting] = (0, import_react16.useState)([]);
+  const [localColumnFilters, setLocalColumnFilters] = (0, import_react16.useState)([]);
+  const [localRowSelection, setLocalRowSelection] = (0, import_react16.useState)({});
+  const {
+    columns: tableColumns,
+    setColumns: setTableColumns,
+    layoutSignal
+  } = useTableLayout(columns, id != null ? id : testid);
+  const [columnOrder, setColumnOrder] = (0, import_react16.useState)(
+    tableColumns.map((c) => c.id)
+  );
+  const [columnVisibility, setColumnVisibility] = (0, import_react16.useState)(
+    Object.fromEntries(
+      tableColumns.filter((column) => !!column.id).map((column) => {
+        var _a2, _b2;
+        return [column.id, (_b2 = (_a2 = column.meta) == null ? void 0 : _a2.visible) != null ? _b2 : true];
+      })
+    )
   );
-  const [localSorting, setLocalSorting] = (0, import_react15.useState)([]);
-  const [localColumnFilters, setLocalColumnFilters] = (0, import_react15.useState)([]);
-  const [localRowSelection, setLocalRowSelection] = (0, import_react15.useState)({});
+  (0, import_react16.useEffect)(() => {
+    setColumnOrder(tableColumns.map((c) => c.id));
+    resetColumnVisibility();
+  }, [layoutSignal]);
   const sortingState = pagination ? externalSorting != null ? externalSorting : localSorting : localSorting;
   const setSortingState = pagination ? (updaterOrValue) => {
     const value = typeof updaterOrValue === "function" ? updaterOrValue(
@@ -2834,38 +2899,34 @@ function DataGrid({
     const value = typeof updaterOrValue === "function" ? updaterOrValue(externalRowSelection != null ? externalRowSelection : {}) : updaterOrValue;
     (onRowSelectionChange != null ? onRowSelectionChange : setLocalRowSelection)(value);
   } : setLocalRowSelection;
-  const dndId = (0, import_react15.useId)();
-  const containerRef = import_react15.default.useRef(null);
-  const [columnVisibility, setColumnVisibility] = (0, import_react15.useState)(() => {
-    const initialVisibility = {};
-    columns.forEach((column) => {
-      var _a2, _b2;
-      if (column.id) {
-        initialVisibility[column.id] = (_b2 = (_a2 = column.meta) == null ? void 0 : _a2.visible) != null ? _b2 : true;
-      }
-    });
-    return initialVisibility;
-  });
-  const toggleColumnVisibility = (0, import_react15.useCallback)(
+  const dndId = (0, import_react16.useId)();
+  const containerRef = import_react16.default.useRef(null);
+  const toggleColumnVisibility = (0, import_react16.useCallback)(
     (columnId, isVisible) => {
-      setColumnVisibility((prev) => __spreadProps(__spreadValues({}, prev), { [columnId]: isVisible }));
+      setTableColumns((prev) => {
+        const persistedIndex = prev.findIndex((col) => col.id === columnId);
+        if (persistedIndex !== -1) {
+          prev[persistedIndex].meta = __spreadProps(__spreadValues({}, prev[persistedIndex].meta), {
+            visible: isVisible
+          });
+        }
+        return [...prev];
+      }, true);
     },
-    [setColumnVisibility]
+    [setTableColumns]
   );
-  const resetColumnVisibility = (0, import_react15.useCallback)(() => {
-    setColumnVisibility(() => {
-      const initialVisibility = {};
-      columns.forEach((column) => {
-        var _a2, _b2;
-        if (column.id) {
-          initialVisibility[column.id] = (_b2 = (_a2 = column.meta) == null ? void 0 : _a2.visible) != null ? _b2 : true;
-        }
-      });
-      return initialVisibility;
-    });
-  }, [columns]);
+  const resetColumnVisibility = (0, import_react16.useCallback)(() => {
+    setColumnVisibility(
+      Object.fromEntries(
+        tableColumns.filter((column) => !!column.id).map((column) => {
+          var _a2, _b2;
+          return [column.id, (_b2 = (_a2 = column.meta) == null ? void 0 : _a2.visible) != null ? _b2 : true];
+        })
+      )
+    );
+  }, [tableColumns]);
   const table = (0, import_react_table3.useReactTable)({
-    columns,
+    columns: tableColumns,
     data,
     getCoreRowModel: (0, import_react_table3.getCoreRowModel)(),
     getSortedRowModel: (0, import_react_table3.getSortedRowModel)(),
@@ -2949,7 +3010,12 @@ function DataGrid({
       setColumnOrder((prev) => {
         const oldIndex = prev.indexOf(active.id);
         const newIndex = prev.indexOf(over.id);
-        return (0, import_sortable2.arrayMove)(prev, oldIndex, newIndex);
+        const newOrder = (0, import_sortable2.arrayMove)(prev, oldIndex, newIndex);
+        setTableColumns((prev2) => {
+          const res = newOrder.map((id2) => prev2.find((col) => col.id === id2)).filter(Boolean);
+          return res;
+        });
+        return newOrder;
       });
     }
   };
@@ -3092,7 +3158,7 @@ function DataGrid({
                                     header.id
                                   );
                                 }
-                                return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react15.default.Fragment, { children: ((_d2 = header.column.columnDef.meta) == null ? void 0 : _d2.checkbox) ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                                return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react16.default.Fragment, { children: ((_d2 = header.column.columnDef.meta) == null ? void 0 : _d2.checkbox) ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                                   DataGridCell,
                                   {
                                     id: id ? `${id}-header-${header.id}` : void 0,
@@ -3296,7 +3362,7 @@ function adaptTableStateSetter(setter) {
 }
 
 // src/components/Select.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_clsx14 = __toESM(require("clsx"), 1);
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var Select = (_a) => {
@@ -3329,11 +3395,11 @@ var Select = (_a) => {
     "displayValue",
     "value"
   ]);
-  const inputRef = (0, import_react16.useRef)(null);
-  const inputContainerRef = (0, import_react16.useRef)(null);
-  const preventFocusOnInitialRender = (0, import_react16.useRef)(true);
-  const [show, setShow] = (0, import_react16.useState)(false);
-  (0, import_react16.useEffect)(() => {
+  const inputRef = (0, import_react17.useRef)(null);
+  const inputContainerRef = (0, import_react17.useRef)(null);
+  const preventFocusOnInitialRender = (0, import_react17.useRef)(true);
+  const [show, setShow] = (0, import_react17.useState)(false);
+  (0, import_react17.useEffect)(() => {
     var _a2;
     if (preventFocusOnInitialRender.current) {
       preventFocusOnInitialRender.current = false;
@@ -3712,7 +3778,7 @@ Button.displayName = "Button";
 
 // src/components/Tooltip.tsx
 var import_clsx18 = __toESM(require("clsx"), 1);
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_react_dom2 = require("react-dom");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var Tooltip = ({
@@ -3725,11 +3791,11 @@ var Tooltip = ({
   offset = 8,
   keepHidden = false
 }) => {
-  const ref = (0, import_react17.useRef)(null);
-  const tooltipRef = (0, import_react17.useRef)(null);
-  const [tooltipPosition, setTooltipPosition] = (0, import_react17.useState)({ top: 0, left: 0 });
-  const [isVisible, setIsVisible] = (0, import_react17.useState)(false);
-  const [removeOpacity, setRemoveOpacity] = (0, import_react17.useState)(false);
+  const ref = (0, import_react18.useRef)(null);
+  const tooltipRef = (0, import_react18.useRef)(null);
+  const [tooltipPosition, setTooltipPosition] = (0, import_react18.useState)({ top: 0, left: 0 });
+  const [isVisible, setIsVisible] = (0, import_react18.useState)(false);
+  const [removeOpacity, setRemoveOpacity] = (0, import_react18.useState)(false);
   const updatePosition = () => {
     if (!ref.current || !tooltipRef.current) return;
     const rect = ref.current.getBoundingClientRect();
@@ -3768,14 +3834,14 @@ var Tooltip = ({
     setIsVisible(false);
     setRemoveOpacity(false);
   };
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (isVisible && tooltipRef.current) {
       requestAnimationFrame(() => {
         updatePosition();
       });
     }
   }, [isVisible]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (isVisible) {
       window.addEventListener("resize", updatePosition);
       return () => window.removeEventListener("resize", updatePosition);