Save columns definition (schema) along with selected columns.

src/Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil.ts

@@ -1,5 +1,6 @@
 // Definitions of State data
 
+import { ColumnDefinition } from "Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent";
 import { deleteState, loadState, saveState, saveStateDebounced } from "Shared/AppStatePersistenceUtility";
 import { userContext } from "UserContext";
 import * as ViewModels from "../../../Contracts/ViewModels";
@@ -19,7 +20,7 @@ export type ColumnSizesMap = { [columnId: string]: WidthDefinition };
 export type FilterHistory = string[];
 export type WidthDefinition = { idealWidth?: number; minWidth?: number };
 export type TabDivider = { leftPaneWidthPercent: number };
-export type ColumnsSelection = string[];
+export type ColumnsSelection = { selectedColumnIds: string[]; columnDefinitions: ColumnDefinition[] };
 export type ColumnSort = { columnId: string; direction: "ascending" | "descending" };
 
 /**

src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx

@@ -663,10 +663,22 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
       defaultColumnsIds.push(...partitionKeyPropertyHeaders);
     }
 
-    return readSubComponentState<ColumnsSelection>(SubComponentName.ColumnsSelection, _collection, defaultColumnsIds);
+    return defaultColumnsIds;
   };
 
-  const [selectedColumnIds, setSelectedColumnIds] = useState<string[]>(getInitialColumnSelection);
+  const [selectedColumnIds, setSelectedColumnIds] = useState<string[]>(() => {
+    const persistedColumnsSelection = readSubComponentState<ColumnsSelection>(
+      SubComponentName.ColumnsSelection,
+      _collection,
+      undefined,
+    );
+
+    if (!persistedColumnsSelection) {
+      return getInitialColumnSelection();
+    }
+
+    return persistedColumnsSelection.selectedColumnIds;
+  });
 
   // new DocumentId() requires a DocumentTab which we mock with only the required properties
   const newDocumentId = useCallback(
@@ -1515,12 +1527,22 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
   }, []);
 
   // Column definition is a map<id, ColumnDefinition> to garantee uniqueness
-  const [columnDefinitions, setColumnDefinitions] = useState<ColumnDefinition[]>(() =>
+  const [columnDefinitions, setColumnDefinitions] = useState<ColumnDefinition[]>(() => {
-    extractColumnDefinitionsFromDocument({
+    const persistedColumnsSelection = readSubComponentState<ColumnsSelection>(
-      id: "id",
+      SubComponentName.ColumnsSelection,
-    }),
+      _collection,
+      undefined,
     );
 
+    if (!persistedColumnsSelection) {
+      return extractColumnDefinitionsFromDocument({
+        id: "id",
+      });
+    }
+
+    return persistedColumnsSelection.columnDefinitions;
+  });
+
   const onSelectedRowsChange = (selectedRows: Set<TableRowId>) => {
     confirmDiscardingChange(() => {
       if (selectedRows.size === 0) {
@@ -1858,7 +1880,10 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
 
     setSelectedColumnIds(newSelectedColumnIds);
 
-    saveSubComponentState<ColumnsSelection>(SubComponentName.ColumnsSelection, _collection, newSelectedColumnIds);
+    saveSubComponentState<ColumnsSelection>(SubComponentName.ColumnsSelection, _collection, {
+      selectedColumnIds: newSelectedColumnIds,
+      columnDefinitions,
+    });
   };
 
   const prevSelectedColumnIds = usePrevious({ selectedColumnIds, setSelectedColumnIds });