Integrate col mgmt modal with table hooks

client/src/app/hooks/table-controls/column/useColumnState.ts

@@ -0,0 +1,60 @@
+import { usePersistentState } from "@app/hooks/usePersistentState";
+import { IFeaturePersistenceArgs } from "../types";
+
+export interface ColumnState<TColumnKey extends string> {
+  id: TColumnKey;
+  label: string;
+  isVisible: boolean;
+  order: number;
+  width?: number;
+}
+
+export interface IColumnState<TColumnKey extends string> {
+  columns: ColumnState<TColumnKey>[];
+  setColumns: (newColumns: ColumnState<TColumnKey>[]) => void;
+}
+
+interface IColumnStateArgs<TColumnKey extends string> {
+  initialColumns: ColumnState<TColumnKey>[];
+}
+
+export const useColumnState = <
+  TColumnKey extends string,
+  TPersistenceKeyPrefix extends string = string,
+>(
+  args: IColumnStateArgs<TColumnKey> &
+    IFeaturePersistenceArgs<TPersistenceKeyPrefix>
+): IColumnState<TColumnKey> => {
+  const { persistTo = "state", persistenceKeyPrefix, initialColumns } = args;
+
+  const [columns, setColumns] = usePersistentState<
+    ColumnState<TColumnKey>[],
+    TPersistenceKeyPrefix,
+    "columns"
+  >({
+    defaultValue: initialColumns,
+    persistenceKeyPrefix,
+    ...(persistTo === "urlParams"
+      ? {
+          persistTo,
+          keys: ["columns"],
+          serialize: (columnsObj) => {
+            return { columns: JSON.stringify(columnsObj) };
+          },
+          deserialize: ({ columns: columnsStr }) => {
+            try {
+              return JSON.parse(columnsStr || "[]");
+            } catch (e) {
+              return initialColumns; // Fallback to initial columns on parse failure
+            }
+          },
+        }
+      : persistTo === "localStorage" || persistTo === "sessionStorage"
+      ? {
+          persistTo,
+          key: "columns",
+        }
+      : { persistTo }),
+  });
+  return { columns, setColumns };
+};

client/src/app/hooks/table-controls/types.ts

@@ -38,6 +38,7 @@ import {
 import { IFilterToolbarProps } from "@app/components/FilterToolbar";
 import { IToolbarBulkSelectorProps } from "@app/components/ToolbarBulkSelector";
 import { IExpansionPropHelpersExternalArgs } from "./expansion/useExpansionPropHelpers";
+import { IColumnState } from "./column/useColumnState";
 
 // Generic type params used here:
 //   TItem - The actual API objects represented by rows in the table. Can be any object.
@@ -56,7 +57,8 @@ export type TableFeature =
   | "pagination"
   | "selection"
   | "expansion"
-  | "activeItem";
+  | "activeItem"
+  | "columns";
 
 /**
  * Identifier for where to persist state for a single table feature or for all table features.
@@ -142,6 +144,9 @@ export type IUseTableControlStateArgs<
    * - Values of this object are rendered in the column headers by default (can be overridden by passing children to <Th>) and used as `dataLabel` for cells in the column.
    */
   columnNames: Record<TColumnKey, string>;
+  /**
+   * Initial state for the columns feature. If omitted, all columns are enabled by default.
+   */
 } & IFilterStateArgs<TItem, TFilterCategoryKey> &
   ISortStateArgs<TSortableColumnKey> &
   IPaginationStateArgs & {
@@ -193,6 +198,10 @@ export type ITableControlState<
    * State for the active item feature. Returned by useActiveItemState.
    */
   activeItemState: IActiveItemState;
+  /**
+   * State for the columns feature. Returned by useColumnState.
+   */
+  columnState: IColumnState<TColumnKey>;
 };
 
 /**
@@ -288,6 +297,10 @@ export type IUseTableControlPropsArgs<
      * @todo this won't be included here when useSelectionState gets moved from lib-ui. It is separated from the other state temporarily and used only at render time.
      */
     selectionState: ReturnType<typeof useSelectionState<TItem>>;
+    /**
+     * The state for the columns feature. Returned by useColumnState.
+     */
+    columnState: IColumnState<TColumnKey>;
   };
 
 /**
@@ -325,9 +338,18 @@ export type ITableControls<
    * Values derived at render time from the expansion feature state. Includes helper functions for convenience.
    */
   expansionDerivedState: IExpansionDerivedState<TItem, TColumnKey>;
+  /**
+   * Values derived at render time from the column feature state. Includes helper functions for convenience.
+   *
+   *
+   *
+   *
+   */
+  columnState: IColumnState<TColumnKey>;
   /**
    * Values derived at render time from the active-item feature state. Includes helper functions for convenience.
    */
+
   activeItemDerivedState: IActiveItemDerivedState<TItem>;
   /**
    * Prop helpers: where it all comes together.

client/src/app/hooks/table-controls/useLocalTableControls.ts

@@ -33,6 +33,8 @@ export const useLocalTableControls = <
 > => {
   const state = useTableControlState(args);
   const derivedState = getLocalTableControlDerivedState({ ...args, ...state });
+  const { columnState } = state;
+  console.log("columnState", columnState);
   return useTableControlProps({
     ...args,
     ...state,
@@ -42,5 +44,6 @@ export const useLocalTableControls = <
       ...args,
       isEqual: (a, b) => a[args.idProperty] === b[args.idProperty],
     }),
+    ...columnState,
   });
 };

client/src/app/hooks/table-controls/useTableControlProps.ts

@@ -74,6 +74,7 @@ export const useTableControlProps = <
     isSelectionEnabled,
     isExpansionEnabled,
     isActiveItemEnabled,
+    columnState: { columns, setColumns },
   } = args;
 
   const columnKeys = objectKeys(columnNames);
@@ -171,6 +172,18 @@ export const useTableControlProps = <
     },
   });
 
+  const getColumnProps = (columnKey: string) => {
+    const column = columns.find((c) => c.id === columnKey);
+    return {
+      isVisible: column?.isVisible,
+      order: column?.order,
+      // Any additional props or handlers for managing columns
+    };
+  };
+  const getColumnVisibility = (columnKey: TColumnKey) => {
+    return columns.find((column) => column.id === columnKey)?.isVisible ?? true;
+  };
+
   return {
     ...args,
     numColumnsBeforeData,

client/src/app/hooks/table-controls/useTableControlState.ts

@@ -9,6 +9,7 @@ import { useSortState } from "./sorting";
 import { usePaginationState } from "./pagination";
 import { useActiveItemState } from "./active-item";
 import { useExpansionState } from "./expansion";
+import { useColumnState } from "./column/useColumnState";
 
 /**
  * Provides the "source of truth" state for all table features.
@@ -66,12 +67,30 @@ export const useTableControlState = <
     ...args,
     persistTo: getPersistTo("activeItem"),
   });
+
+  const { columnNames, ...restArgs } = args;
+
+  const initialColumns = Object.entries(columnNames).map(
+    ([id, label], index) => ({
+      id: id as TColumnKey,
+      label: label as string,
+      isVisible: true,
+      order: index,
+    })
+  );
+
+  const columnState = useColumnState<TColumnKey, TPersistenceKeyPrefix>({
+    ...restArgs,
+    persistTo: getPersistTo("columns"),
+    initialColumns,
+  });
   return {
     ...args,
     filterState,
     sortState,
     paginationState,
     expansionState,
     activeItemState,
+    columnState,
   };
 };