✨ Integrate col mgmt modal feature with table hooks

Signed-off-by: Ian Bolton <[email protected]>

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

@@ -0,0 +1,25 @@
+import { useState } from "react";
+
+export interface ColumnState<TColumnKey extends string> {
+  id: TColumnKey;
+  label: string;
+  isVisible: boolean;
+}
+
+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>(
+  args: IColumnStateArgs<TColumnKey>
+): IColumnState<TColumnKey> => {
+  const [columns, setColumns] = useState<ColumnState<TColumnKey>[]>(
+    args.initialColumns
+  );
+  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.
@@ -406,6 +428,12 @@ export type ITableControls<
      * The two Trs for the expandable row and expanded content row should be contained in a Tbody with no other Tr components.
      */
     getExpandedContentTdProps: (args: { item: TItem }) => Omit<TdProps, "ref">;
+
+    /**
+     * Returns the visibility of a column
+     */
+
+    getColumnVisibility: (columnKey: TColumnKey) => boolean;
   };
 };
 

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,10 @@ export const useTableControlProps = <
     },
   });
 
+  const getColumnVisibility = (columnKey: TColumnKey) => {
+    return columns.find((column) => column.id === columnKey)?.isVisible ?? true;
+  };
+
   return {
     ...args,
     numColumnsBeforeData,
@@ -191,6 +196,7 @@ export const useTableControlProps = <
       getSelectCheckboxTdProps,
       getSingleExpandButtonTdProps,
       getExpandedContentTdProps,
+      getColumnVisibility,
     },
   };
 };

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,28 @@ 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,
+    })
+  );
+
+  const columnState = useColumnState<TColumnKey>({
+    ...restArgs,
+    initialColumns,
+  });
   return {
     ...args,
     filterState,
     sortState,
     paginationState,
     expansionState,
     activeItemState,
+    columnState,
   };
 };