@dmsi/wedgekit-react 0.0.206 → 0.0.208

package/dist/components/index.js

@@ -12,18 +12,20 @@ import {
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-RXPS5GVE.js";
+} from "../chunk-EFX3RPW4.js";
 import {
   Menu
-} from "../chunk-2JRZCC2K.js";
-import "../chunk-WE55TGZZ.js";
+} from "../chunk-JITZWSPR.js";
+import "../chunk-NIHZMIOL.js";
 import {
   MenuOption
-} from "../chunk-WXHRJSDG.js";
+} from "../chunk-ERW3AMED.js";
 import {
-  useInfiniteScroll
-} from "../chunk-WNQ53SVY.js";
-import "../chunk-6LN6QT6M.js";
+  useInfiniteScroll,
+  useTableLayout
+} from "../chunk-E6Y7ZHQX.js";
+import "../chunk-VXWSAIB5.js";
+import "../chunk-T3F37S6Z.js";
 import {
   Search
 } from "../chunk-2WRRRPEB.js";
@@ -65,7 +67,7 @@ import {
 } from "../chunk-BBZEL7EG.js";
 
 // src/components/DataGrid/index.tsx
-import React3, { useCallback, useId, useState as useState3 } from "react";
+import React3, { useCallback, useEffect, useId, useState as useState3 } from "react";
 import {
   flexRender as flexRender3,
   getCoreRowModel,
@@ -659,12 +661,29 @@ function DataGrid({
   useMenuDefaultMinWidth
 }) {
   var _a, _b, _c, _d, _e, _f, _g;
-  const [columnOrder, setColumnOrder] = useState3(
-    () => columns.map((c) => c.id)
-  );
   const [localSorting, setLocalSorting] = useState3([]);
   const [localColumnFilters, setLocalColumnFilters] = useState3([]);
   const [localRowSelection, setLocalRowSelection] = useState3({});
+  const {
+    columns: tableColumns,
+    setColumns: setTableColumns,
+    layoutSignal
+  } = useTableLayout(columns, id != null ? id : testid);
+  const [columnOrder, setColumnOrder] = useState3(
+    tableColumns.map((c) => c.id)
+  );
+  const [columnVisibility, setColumnVisibility] = useState3(
+    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];
+      })
+    )
+  );
+  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(
@@ -684,36 +703,32 @@ function DataGrid({
   } : setLocalRowSelection;
   const dndId = useId();
   const containerRef = React3.useRef(null);
-  const [columnVisibility, setColumnVisibility] = useState3(() => {
-    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 = 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 = 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]);
+    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 = useReactTable({
-    columns,
+    columns: tableColumns,
     data,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
@@ -797,7 +812,12 @@ function DataGrid({
       setColumnOrder((prev) => {
         const oldIndex = prev.indexOf(active.id);
         const newIndex = prev.indexOf(over.id);
-        return arrayMove(prev, oldIndex, newIndex);
+        const newOrder = arrayMove(prev, oldIndex, newIndex);
+        setTableColumns((prev2) => {
+          const res = newOrder.map((id2) => prev2.find((col) => col.id === id2)).filter(Boolean);
+          return res;
+        });
+        return newOrder;
       });
     }
   };

package/dist/components/useMenuSystem.cjs

@@ -39,7 +39,7 @@ __export(useMenuSystem_exports, {
   useSubMenuSystem: () => useSubMenuSystem
 });
 module.exports = __toCommonJS(useMenuSystem_exports);
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/hooks/useKeydown.ts
 var import_react = require("react");
@@ -62,23 +62,26 @@ var useMatchesMedia = (query) => {
 };
 var useMatchesMobile = () => useMatchesMedia("(width < 48rem)");
 
+// src/hooks/useTableLayout.ts
+var import_react4 = require("react");
+
 // src/components/useMenuSystem.tsx
 function useSubMenuSystem(mobilePositionTo) {
-  const [activeMenus, setActiveMenus] = (0, import_react4.useState)(
+  const [activeMenus, setActiveMenus] = (0, import_react5.useState)(
     {}
   );
-  const [activeMenu, setActiveMenu] = (0, import_react4.useState)("");
-  const [currentSubMenuLevel, setCurrentSubMenuLevel] = (0, import_react4.useState)(
+  const [activeMenu, setActiveMenu] = (0, import_react5.useState)("");
+  const [currentSubMenuLevel, setCurrentSubMenuLevel] = (0, import_react5.useState)(
     null
   );
-  const menuRootRef = (0, import_react4.useRef)(null);
-  const subMenuRefs = (0, import_react4.useRef)({});
-  const hoverTimeoutRef = (0, import_react4.useRef)(null);
-  const closeTimeoutRef = (0, import_react4.useRef)(null);
-  const mouseStopTimeoutRef = (0, import_react4.useRef)(null);
-  const isMouseMovingRef = (0, import_react4.useRef)(false);
-  const pendingOpenActionRef = (0, import_react4.useRef)(null);
-  const pendingCloseActionRef = (0, import_react4.useRef)(null);
+  const menuRootRef = (0, import_react5.useRef)(null);
+  const subMenuRefs = (0, import_react5.useRef)({});
+  const hoverTimeoutRef = (0, import_react5.useRef)(null);
+  const closeTimeoutRef = (0, import_react5.useRef)(null);
+  const mouseStopTimeoutRef = (0, import_react5.useRef)(null);
+  const isMouseMovingRef = (0, import_react5.useRef)(false);
+  const pendingOpenActionRef = (0, import_react5.useRef)(null);
+  const pendingCloseActionRef = (0, import_react5.useRef)(null);
   const isMobile = useMatchesMobile();
   const toggleMenu = (menuId, level) => {
     if (closeTimeoutRef.current) {
@@ -118,7 +121,7 @@ function useSubMenuSystem(mobilePositionTo) {
       return newActiveMenus;
     });
   };
-  const executePendingActions = (0, import_react4.useCallback)(() => {
+  const executePendingActions = (0, import_react5.useCallback)(() => {
     if (pendingCloseActionRef.current) {
       pendingCloseActionRef.current();
       pendingCloseActionRef.current = null;
@@ -207,7 +210,7 @@ function useSubMenuSystem(mobilePositionTo) {
   const isMenuActive = (menuId, level) => {
     return activeMenus[level] === menuId;
   };
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     const handleClickOutside = (event) => {
       var _a;
       if (Object.keys(activeMenus).length === 0) return;
@@ -226,7 +229,7 @@ function useSubMenuSystem(mobilePositionTo) {
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [activeMenus]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     return () => {
       if (hoverTimeoutRef.current) {
         clearTimeout(hoverTimeoutRef.current);
@@ -304,13 +307,13 @@ function useSubMenuSystem(mobilePositionTo) {
   };
 }
 function useMenuPosition(elementRef, position = "bottom", options) {
-  const [menuPosition, setMenuPosition] = (0, import_react4.useState)({
+  const [menuPosition, setMenuPosition] = (0, import_react5.useState)({
     top: 0,
     left: 0,
     minWidth: 0
   });
   const isMobile = options == null ? void 0 : options.isMobile;
-  const updatePosition = (0, import_react4.useCallback)(() => {
+  const updatePosition = (0, import_react5.useCallback)(() => {
     var _a, _b, _c;
     if (!(elementRef == null ? void 0 : elementRef.current)) return;
     const triggerRect = elementRef.current.getBoundingClientRect();
@@ -358,7 +361,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_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!(options == null ? void 0 : options.isOpen) || !(options == null ? void 0 : options.setIsOpen)) return;
     const handleClickOutside = (event) => {
       var _a, _b, _c, _d, _e;
@@ -384,7 +387,7 @@ function useMenuPosition(elementRef, position = "bottom", options) {
     options == null ? void 0 : options.menuRef,
     options == null ? void 0 : options.additionalRefs
   ]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     updatePosition();
     const resizeObserver = new ResizeObserver(updatePosition);
     if (elementRef == null ? void 0 : elementRef.current) {

package/dist/components/useMenuSystem.js

@@ -2,8 +2,11 @@
 import {
   useMenuPosition,
   useSubMenuSystem
-} from "../chunk-WE55TGZZ.js";
-import "../chunk-WNQ53SVY.js";
+} from "../chunk-NIHZMIOL.js";
+import "../chunk-E6Y7ZHQX.js";
+import "../chunk-VXWSAIB5.js";
+import "../chunk-T3F37S6Z.js";
+import "../chunk-5UH6QUFB.js";
 import "../chunk-BBZEL7EG.js";
 export {
   useMenuPosition,

package/dist/hooks/index.cjs

@@ -2,7 +2,21 @@
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -23,7 +37,8 @@ __export(hooks_exports, {
   useInfiniteScroll: () => useInfiniteScroll,
   useKeydown: () => useKeydown,
   useMatchesMedia: () => useMatchesMedia,
-  useMatchesMobile: () => useMatchesMobile
+  useMatchesMobile: () => useMatchesMobile,
+  useTableLayout: () => useTableLayout
 });
 module.exports = __toCommonJS(hooks_exports);
 
@@ -99,10 +114,59 @@ var useMatchesMedia = (query) => {
   return matches;
 };
 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/hooks/useTableLayout.ts
+var import_react4 = require("react");
+function useTableLayout(initialColumns, key) {
+  const [columns, setColumns] = (0, import_react4.useState)(initialColumns);
+  const [isReady, setIsReady] = (0, import_react4.useState)(false);
+  const [layoutSignal, setLayoutSignal] = (0, import_react4.useState)(0);
+  (0, import_react4.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_react4.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 };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   useInfiniteScroll,
   useKeydown,
   useMatchesMedia,
-  useMatchesMobile
+  useMatchesMobile,
+  useTableLayout
 });

package/dist/hooks/index.js

@@ -2,12 +2,17 @@ import {
   useInfiniteScroll,
   useKeydown,
   useMatchesMedia,
-  useMatchesMobile
-} from "../chunk-WNQ53SVY.js";
+  useMatchesMobile,
+  useTableLayout
+} from "../chunk-E6Y7ZHQX.js";
+import "../chunk-VXWSAIB5.js";
+import "../chunk-T3F37S6Z.js";
+import "../chunk-5UH6QUFB.js";
 import "../chunk-BBZEL7EG.js";
 export {
   useInfiniteScroll,
   useKeydown,
   useMatchesMedia,
-  useMatchesMobile
+  useMatchesMobile,
+  useTableLayout
 };

package/dist/utils/index.cjs

@@ -2,7 +2,21 @@
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -34,6 +48,7 @@ __export(utils_exports, {
   isValidDate: () => isValidDate,
   isValidDateRange: () => isValidDateRange,
   isValidDateRangeOrder: () => isValidDateRangeOrder,
+  mergeObjectArrays: () => mergeObjectArrays,
   parseDateParts: () => parseDateParts,
   parseInputDate: () => parseInputDate
 });
@@ -197,6 +212,15 @@ function isValidDateRangeOrder(fromDate, toDate) {
   const to = new Date(toDate);
   return to >= from;
 }
+
+// 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] || {})
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   calculateCursorPosition,
@@ -213,6 +237,7 @@ function isValidDateRangeOrder(fromDate, toDate) {
   isValidDate,
   isValidDateRange,
   isValidDateRangeOrder,
+  mergeObjectArrays,
   parseDateParts,
   parseInputDate
 });

package/dist/utils/index.js

@@ -10,9 +10,10 @@ import {
   isValidDate,
   isValidDateRange,
   isValidDateRangeOrder,
+  mergeObjectArrays,
   parseDateParts,
   parseInputDate
-} from "../chunk-M3433XEJ.js";
+} from "../chunk-T3F37S6Z.js";
 import {
   formatCurrencyDisplay,
   formatDecimalValue,
@@ -34,6 +35,7 @@ export {
   isValidDate,
   isValidDateRange,
   isValidDateRangeOrder,
+  mergeObjectArrays,
   parseDateParts,
   parseInputDate
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dmsi/wedgekit-react",
   "private": false,
-  "version": "0.0.206",
+  "version": "0.0.208",
   "type": "module",
   "scripts": {
     "build": "tsup",

package/src/components/DataGrid/index.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useInfiniteScroll } from "../../hooks";
+import { useInfiniteScroll, useTableLayout } from "../../hooks";
 import { componentGap, componentPadding } from "../../classNames";
 import {
   Button,
@@ -15,7 +15,7 @@ import {
   Select,
   Subheader,
 } from "..";
-import React, { useCallback, useId, useState } from "react";
+import React, { useCallback, useEffect, useId, useState } from "react";
 import {
   ColumnFiltersState,
   flexRender,
@@ -81,15 +81,35 @@ export function DataGrid<T extends Record<string, unknown>>({
   predeterminedRightPins = [],
   useMenuDefaultMinWidth,
 }: DataGridProps<T>) {
-  const [columnOrder, setColumnOrder] = useState<string[]>(() =>
-    columns.map((c) => c.id!),
-  );
   const [localSorting, setLocalSorting] = useState<SortingState>([]);
   const [localColumnFilters, setLocalColumnFilters] =
     useState<ColumnFiltersState>([]);
   const [localRowSelection, setLocalRowSelection] = useState<
     Record<string, boolean>
   >({});
+  const {
+    columns: tableColumns,
+    setColumns: setTableColumns,
+    layoutSignal,
+  } = useTableLayout<T>(columns, id ?? testid);
+  const [columnOrder, setColumnOrder] = useState<string[]>(
+    tableColumns.map((c) => c.id!),
+  );
+
+  const [columnVisibility, setColumnVisibility] = useState<
+    Record<string, boolean>
+  >(
+    Object.fromEntries(
+      tableColumns
+        .filter((column) => !!column.id)
+        .map((column) => [column.id, column.meta?.visible ?? true]),
+    ),
+  );
+
+  useEffect(() => {
+    setColumnOrder(tableColumns.map((c) => c.id!));
+    resetColumnVisibility();
+  }, [layoutSignal]);
 
   const sortingState = pagination
     ? (externalSorting ?? localSorting)
@@ -149,39 +169,35 @@ export function DataGrid<T extends Record<string, unknown>>({
   const dndId = useId();
   const containerRef = React.useRef<HTMLDivElement>(null);
 
-  const [columnVisibility, setColumnVisibility] = useState<
-    Record<string, boolean>
-  >(() => {
-    const initialVisibility: Record<string, boolean> = {};
-    columns.forEach((column) => {
-      if (column.id) {
-        initialVisibility[column.id] = column.meta?.visible ?? true;
-      }
-    });
-    return initialVisibility;
-  });
-
   const toggleColumnVisibility = useCallback(
     (columnId: string, isVisible: boolean) => {
-      setColumnVisibility((prev) => ({ ...prev, [columnId]: isVisible }));
+      setTableColumns((prev) => {
+        const persistedIndex = prev.findIndex((col) => col.id === columnId);
+        if (persistedIndex !== -1) {
+          prev[persistedIndex].meta = {
+            ...prev[persistedIndex].meta,
+            visible: isVisible,
+          };
+        }
+        return [...prev];
+        // @ts-expect-error Internal usage only
+      }, true);
     },
-    [setColumnVisibility],
+    [setTableColumns],
   );
 
   const resetColumnVisibility = useCallback(() => {
-    setColumnVisibility(() => {
-      const initialVisibility: Record<string, boolean> = {};
-      columns.forEach((column) => {
-        if (column.id) {
-          initialVisibility[column.id] = column.meta?.visible ?? true;
-        }
-      });
-      return initialVisibility;
-    });
-  }, [columns]);
+    setColumnVisibility(
+      Object.fromEntries(
+        tableColumns
+          .filter((column) => !!column.id)
+          .map((column) => [column.id, column.meta?.visible ?? true]),
+      ),
+    );
+  }, [tableColumns]);
 
   const table = useReactTable<T>({
-    columns,
+    columns: tableColumns,
     data,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
@@ -278,7 +294,15 @@ export function DataGrid<T extends Record<string, unknown>>({
       setColumnOrder((prev) => {
         const oldIndex = prev.indexOf(active.id as string);
         const newIndex = prev.indexOf(over.id as string);
-        return arrayMove(prev, oldIndex, newIndex);
+        const newOrder = arrayMove(prev, oldIndex, newIndex);
+        setTableColumns((prev) => {
+          // Mirror columnOrder's string = id
+          const res = newOrder
+            .map((id) => prev.find((col) => col.id === id)!)
+            .filter(Boolean);
+          return res;
+        });
+        return newOrder;
       });
     }
   };
@@ -670,3 +694,5 @@ function adaptTableStateSetter<T>(
 }
 
 export type { ColumnDef } from "@tanstack/react-table";
+
+export default DataGrid;

package/src/hooks/index.ts

@@ -1,3 +1,4 @@
 export { useKeydown } from "./useKeydown";
 export { useInfiniteScroll } from "./useInfiniteScroll";
 export { useMatchesMedia, useMatchesMobile } from "./useMatchesMedia";
+export { useTableLayout } from "./useTableLayout";

package/src/hooks/useTableLayout.ts

@@ -0,0 +1,68 @@
+"use client";
+
+import { mergeObjectArrays } from "../utils";
+import { ColumnDef } from "@dmsi/wedgekit-react/components";
+import { useState, useEffect, SetStateAction, useCallback } from "react";
+export type PersistedTableLayout<T> = {
+  columns: ColumnDef<T>[];
+  setColumns: (setter: SetStateAction<ColumnDef<T>[]>) => ColumnDef<T>[] | null;
+  layoutSignal: number;
+  isReady: boolean;
+};
+
+/**
+ *  Custom hook to manage table layout persistence.
+ * @template T The type of the objects in the arrays.
+ * @param key {string}
+ * @param initialColumns {() => Array<ColumnDef<T>>}
+ * @param dependencyArr {unknown[]}
+ * @returns {{ columns: ColumnDef<T>[]; setColumns: React.Dispatch<React.SetStateAction<ColumnDef<T>[]>> }}
+ */
+export function useTableLayout<T>(
+  initialColumns: Array<ColumnDef<T>>,
+  key?: string,
+): PersistedTableLayout<T> {
+  const [columns, setColumns] = useState<ColumnDef<T>[]>(initialColumns);
+  const [isReady, setIsReady] = useState(false);
+  const [layoutSignal, setLayoutSignal] = useState(0);
+
+  useEffect(() => {
+    if (!key) return setIsReady(true);
+    const savedLayout = localStorage.getItem(`${key}-tableLayout`);
+    if (savedLayout) {
+      setColumns(
+        mergeObjectArrays<ColumnDef<T>>(
+          initialColumns,
+          JSON.parse(savedLayout),
+        ),
+      );
+    }
+    if (!savedLayout) handleSaveLayout(initialColumns, true);
+    setLayoutSignal((prev) => prev + 1);
+    setIsReady(true);
+
+    // Load the layout from local storage on init
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleSaveLayout = useCallback(
+    (setter: React.SetStateAction<ColumnDef<T>[]>, _internal?: boolean) => {
+      if (!isReady && !_internal) return null;
+      // get value from passed setter
+      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 };
+}

package/src/utils/index.ts

@@ -1,2 +1,3 @@
 export * from "./formatting";
 export * from "./date";
+export { mergeObjectArrays } from "./mergeObjectArrays";