@dmsi/wedgekit-react 0.0.207 → 0.0.209

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;
       });
     }
   };
@@ -377,9 +401,6 @@ export function DataGrid<T extends Record<string, unknown>>({
                       }
 
                       if (typeof header.column.columnDef.header === "string") {
-                        const customHeaderWidth =
-                          header.column.columnDef.meta?.headerWidth;
-
                         const cellValue = table
                           .getRowModel()
                           .rows[0]?.getValue(header.column.id);
@@ -396,7 +417,7 @@ export function DataGrid<T extends Record<string, unknown>>({
                             header={header}
                             locked={header.column.columnDef.meta?.locked}
                             center={centerHeader}
-                            width={customHeaderWidth}
+                            // width={`${header.column.getSize()}px`}
                             className={clsx(
                               header.column.getCanSort()
                                 ? "cursor-pointer"
@@ -670,3 +691,5 @@ function adaptTableStateSetter<T>(
 }
 
 export type { ColumnDef } from "@tanstack/react-table";
+
+export default DataGrid;

package/src/components/DataGridCell.tsx

@@ -14,20 +14,20 @@ import clsx from "clsx";
 import {
   ComponentProps,
   CSSProperties,
-  memo,
   PropsWithChildren,
   RefObject,
   useEffect,
   useRef,
   useState,
+  memo,
 } from "react";
 import { componentPadding, paddingUsingComponentGap } from "../classNames";
-import { AsProps } from "../types";
+import { MenuOption } from "./MenuOption";
+import { Menu } from "./Menu";
 import { Icon } from "./Icon";
 import { Search } from "./Search";
-import { Menu } from "./Menu";
-import { MenuOption } from "./MenuOption";
 import { useSubMenuSystem } from "./useMenuSystem";
+import type { AsProps } from "../types";
 
 type Tags = "td" | "th";
 
@@ -44,6 +44,7 @@ type DataGridCellProps = PropsWithChildren<{
   warning?: boolean;
   center?: boolean;
   width?: string;
+  minWidth?: string;
 }>;
 
 export const DataGridCell = memo(
@@ -63,6 +64,7 @@ export const DataGridCell = memo(
     warning,
     center,
     width,
+    minWidth,
     testid,
     ...props
   }: AsProps<Tags> & DataGridCellProps) => {
@@ -171,7 +173,7 @@ export const DataGridCell = memo(
         id={id}
         data-testid={testid}
         className={clsx("flex h-10", !width && "flex-1")}
-        style={{ width }}
+        style={{ width, minWidth }}
         {...props}
         data-theme={type === "header" && !locked ? "brand" : undefined}
       >
@@ -260,7 +262,7 @@ export function DataCellHeader<T>({
   const style: CSSProperties = {
     position: "relative",
     whiteSpace: "nowrap",
-    width: header.column.columnDef.meta?.headerWidth ?? header.column.getSize(),
+    minWidth: header.column.getSize(),
     "--color-text-primary-normal": "var(--color-text-brand-primary-normal)",
     "--color-icon-on-action-primary-normal":
       "var(--color-text-brand-primary-normal)",
@@ -277,6 +279,7 @@ export function DataCellHeader<T>({
       type="header"
       component="header"
       style={style}
+      minWidth={`${header.column.getSize()}px`}
       onClick={header.column.getToggleSortingHandler()}
       onRightClick={() => setShowMenu(!showMenu)}
       {...props}
@@ -470,7 +473,6 @@ export function DraggableCellHeader<T extends Record<string, any>>({
     transition: "width transform 0.2s ease-in-out",
     whiteSpace: "nowrap",
     zIndex: isDragging ? 1 : 0,
-    width: header.column.columnDef.meta?.headerWidth ?? header.column.getSize(),
     "--color-text-primary-normal": "var(--color-action-000)",
     "--color-icon-on-action-primary-normal": "var(--color-action-000)",
     userSelect: "none",
@@ -510,20 +512,12 @@ export function DragAlongCell<T extends RowData, TValue>({
     position: "relative",
     transform: CSS.Translate.toString(transform),
     transition: "width transform 0.2s ease-in-out",
-    width: cell.column.columnDef.meta?.headerWidth ?? cell.column.getSize(),
+    minWidth: cell.column.getSize(),
     zIndex: isDragging ? 1 : 0,
   };
 
   return (
-    <DataGridCell
-      style={style}
-      ref={setNodeRef}
-      width={
-        (cell.column.columnDef.meta?.headerWidth as string | undefined) ??
-        `${cell.column.getSize()}px`
-      }
-      {...props}
-    >
+    <DataGridCell style={style} ref={setNodeRef} {...props}>
       {children}
     </DataGridCell>
   );

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";

package/src/utils/mergeObjectArrays.ts

@@ -0,0 +1,18 @@
+/**
+ * Merges two arrays of objects element-wise.
+ *
+ * @template T The type of the objects in the arrays.
+ * @param {T[]} arr1 The first array.
+ * @param {T[]} arr2 The second array.
+ * @returns {T[]} A new array containing the merged objects.
+ */
+export function mergeObjectArrays<T extends object>(arr1: T[], arr2: T[]): T[] {
+  const maxLength = Math.max(arr1.length, arr2.length);
+
+  // Create a new array with a length equal to the longer of the two arrays.
+  // For each index, merge the objects from arr1 and arr2.
+  return Array.from(
+    { length: maxLength },
+    (_, i) => ({ ...(arr1[i] || {}), ...(arr2[i] || {}) }) as T,
+  );
+}

package/src/utils.ts

@@ -21,3 +21,4 @@ export function findDocumentRoot(
   }
   return window.document.body;
 }
+export * from "./utils/index";