Save column width

src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx

@@ -22,6 +22,7 @@ import {
   DocumentsTabPrefs,
   readDocumentsTabPrefs,
   saveDocumentsTabPrefs,
+  saveDocumentsTabPrefsDebounced,
 } from "Explorer/Tabs/DocumentsTabV2/documentsTabPrefs";
 import { getPlatformTheme } from "Explorer/Theme/ThemeUtil";
 import { useSelectedNode } from "Explorer/useSelectedNode";
@@ -1305,6 +1306,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
     {
       id: "id",
       label: isPreferredApiMongoDB ? "_id" : "id",
+      defaultWidthPx: prefs.columnWidths ? prefs.columnWidths["id"] : undefined,
     },
   ];
 
@@ -1313,6 +1315,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
       columnsDefinition.push({
         id: header,
         label: header,
+        defaultWidthPx: prefs.columnWidths ? prefs.columnWidths[header] : undefined,
       });
     });
   }
@@ -1685,6 +1688,15 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
     [createIterator, filterContent],
   );
 
+  const onTableColumnResize = (columnId: string, width: number) => {
+    if (!prefs.columnWidths) {
+      prefs.columnWidths = {};
+    }
+    prefs.columnWidths[columnId] = width;
+    saveDocumentsTabPrefsDebounced(prefs);
+    setPrefs({ ...prefs });
+  };
+
   return (
     <FluentProvider theme={getPlatformTheme(configContext.platform)} style={{ height: "100%" }}>
       <div className="tab-pane active documentsTab" role="tabpanel" style={{ display: "flex" }}>
@@ -1832,6 +1844,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
                   isSelectionDisabled={
                     configContext.platform === Platform.Fabric && userContext.fabricContext?.isReadOnly
                   }
+                  onColumnResize={onTableColumnResize}
                 />
                 {tableItems.length > 0 && (
                   <a

src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx

@@ -45,6 +45,7 @@ export interface IDocumentsTableComponentProps {
   columnsDefinition: ColumnsDefinition;
   style?: React.CSSProperties;
   isSelectionDisabled?: boolean;
+  onColumnResize?: (columnId: string, width: number) => void;
 }
 
 interface TableRowData extends RowStateBase<DocumentsTableComponentItem> {
@@ -58,7 +59,7 @@ interface ReactWindowRenderFnProps extends ListChildComponentProps {
 }
 
 const DEFAULT_COLUMN_WIDTH_PX = 200;
-const MIN_COLUMN_WIDTH_PX = 50;
+const MIN_COLUMN_WIDTH_PX = 20;
 
 export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> = ({
   items,
@@ -68,6 +69,7 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
   size,
   columnsDefinition,
   isSelectionDisabled,
+  onColumnResize: _onColumnResize,
 }: IDocumentsTableComponentProps) => {
   const initialSizingOptions: TableColumnSizingOptions = {};
   columnsDefinition.forEach((column) => {
@@ -79,15 +81,19 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
 
   const [columnSizingOptions, setColumnSizingOptions] = React.useState<TableColumnSizingOptions>(initialSizingOptions);
 
-  const onColumnResize = React.useCallback((_, { columnId, width }) => {
+  const onColumnResize = React.useCallback(
-    setColumnSizingOptions((state) => ({
+    (_, { columnId, width }) => {
-      ...state,
+      setColumnSizingOptions((state) => ({
-      [columnId]: {
+        ...state,
-        ...state[columnId],
+        [columnId]: {
-        idealWidth: width,
+          ...state[columnId],
-      },
+          idealWidth: width,
-    }));
+        },
-  }, []);
+      }));
+      _onColumnResize(columnId, width);
+    },
+    [_onColumnResize],
+  );
 
   // Columns must be a static object and cannot change on re-renders otherwise React will complain about too many refreshes
   const columns: TableColumnDefinition<DocumentsTableComponentItem>[] = useMemo(

src/Explorer/Tabs/DocumentsTabV2/documentsTabPrefs.ts

@@ -4,7 +4,7 @@ import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
 
 export interface DocumentsTabPrefs {
   leftPaneWidthPercent: number;
-  columnWidths?: number[];
+  columnWidths?: { [columnId: string]: number };
 }
 
 const defaultPrefs: DocumentsTabPrefs = {
@@ -19,3 +19,16 @@ export const readDocumentsTabPrefs = (): DocumentsTabPrefs => {
 export const saveDocumentsTabPrefs = (prefs: DocumentsTabPrefs): void => {
   LocalStorageUtility.setEntryObject(StorageKey.DocumentsTabPrefs, prefs);
 };
+
+const DEBOUNCE_TIMEOUT_MS = 300;
+let timeoutId: NodeJS.Timeout | undefined;
+/**
+ * Wait for a short period of time before saving the preferences to avoid too many updates.
+ * @param prefs
+ */
+export const saveDocumentsTabPrefsDebounced = (prefs: DocumentsTabPrefs): void => {
+  if (timeoutId) {
+    clearTimeout(timeoutId);
+  }
+  timeoutId = setTimeout(() => saveDocumentsTabPrefs(prefs), DEBOUNCE_TIMEOUT_MS);
+};