Revert "Enable column selection and sorting in DocumentsTab (with persistence) (#1881)" (#1960)

This reverts commit 7e95f5d8c8.

package-lock.json

@@ -2527,13 +2527,13 @@
       }
     },
     "node_modules/@babel/preset-env/node_modules/babel-plugin-polyfill-corejs3": {
-      "version": "0.10.6",
+      "version": "0.10.4",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.10.6.tgz",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.10.4.tgz",
-      "integrity": "sha512-b37+KR2i/khY5sKmWNVQAnitvquQbNdWy6lJdsr0kmquCKEEUgMKK4SboVM3HtfnZilfjr4MMQ7vY58FVWDtIA==",
+      "integrity": "sha512-25J6I8NGfa5YkCDogHRID3fVCadIR8/pGl1/spvCkzb6lVn6SR3ojpx9nOn9iEBcUsjY24AmdKm5khcfKdylcg==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-define-polyfill-provider": "^0.6.2",
+        "@babel/helper-define-polyfill-provider": "^0.6.1",
-        "core-js-compat": "^3.38.0"
+        "core-js-compat": "^3.36.1"
       },
       "peerDependencies": {
         "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
@@ -2932,10 +2932,10 @@
       }
     },
     "node_modules/@floating-ui/core": {
-      "version": "1.6.2",
+      "version": "1.6.3",
       "license": "MIT",
       "dependencies": {
-        "@floating-ui/utils": "^0.2.0"
+        "@floating-ui/utils": "^0.2.3"
       }
     },
     "node_modules/@floating-ui/devtools": {
@@ -2945,15 +2945,15 @@
       }
     },
     "node_modules/@floating-ui/dom": {
-      "version": "1.6.5",
+      "version": "1.6.6",
       "license": "MIT",
       "dependencies": {
         "@floating-ui/core": "^1.0.0",
-        "@floating-ui/utils": "^0.2.0"
+        "@floating-ui/utils": "^0.2.3"
       }
     },
     "node_modules/@floating-ui/utils": {
-      "version": "0.2.2",
+      "version": "0.2.3",
       "license": "MIT"
     },
     "node_modules/@fluentui/date-time-utilities": {
@@ -3501,7 +3501,7 @@
       "resolved": "https://registry.npmjs.org/@fluentui/react-hooks/-/react-hooks-8.8.10.tgz",
       "integrity": "sha512-Xvnn6uKMsinMg/zo79KBNCDABnl0gpmArQYNQya9FCNRzvmHUCDvuQCqv4IKslvPvuC0Ya8mR2NORm2w0JoZiw==",
       "dependencies": {
-        "@fluentui/react-window-provider": "^2.2.28",
+        "@fluentui/react-window-provider": "^2.2.27",
         "@fluentui/set-version": "^8.2.23",
         "@fluentui/utilities": "^8.15.13",
         "tslib": "^2.1.0"
@@ -4426,9 +4426,9 @@
       }
     },
     "node_modules/@fluentui/react-window-provider": {
-      "version": "2.2.28",
+      "version": "2.2.27",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-window-provider/-/react-window-provider-2.2.28.tgz",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-window-provider/-/react-window-provider-2.2.27.tgz",
-      "integrity": "sha512-YdZ74HTaoDwlvLDzoBST80/17ExIl93tLJpTxnqK5jlJOAUVQ+mxLPF2HQEJq+SZr5IMXHsQ56w/KaZVRn72YA==",
+      "integrity": "sha512-Dg0G9bizjryV0Q/r0CPtCVTPa2II/EsT9E6JT3jPSALjQADDLlW4/+ZXbcEC7geZ/40+KpZDmhplvk/AJSFBKg==",
       "dependencies": {
         "@fluentui/set-version": "^8.2.23",
         "tslib": "^2.1.0"
@@ -4512,7 +4512,7 @@
       "dependencies": {
         "@fluentui/dom-utilities": "^2.3.7",
         "@fluentui/merge-styles": "^8.6.12",
-        "@fluentui/react-window-provider": "^2.2.28",
+        "@fluentui/react-window-provider": "^2.2.27",
         "@fluentui/set-version": "^8.2.23",
         "tslib": "^2.1.0"
       },
@@ -14966,9 +14966,9 @@
       "license": "MIT"
     },
     "node_modules/browserslist": {
-      "version": "4.23.3",
+      "version": "4.23.2",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.3.tgz",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.2.tgz",
-      "integrity": "sha512-btwCFJVjI4YWDNfau8RhZ+B1Q/VLoUITrm3RlP6y1tYGWIOa+InuYiRGXUBXo8nA1qKmHMyLB/iVQg5TT4eFoA==",
+      "integrity": "sha512-qkqSyistMYdxAcw+CzbZwlBy8AGmS/eEWs+sEV5TnLRGDOL+C5M2EnH6tlZyg0YoAxGJAFKh61En9BR941GnHA==",
       "funding": [
         {
           "type": "opencollective",
@@ -14984,9 +14984,9 @@
         }
       ],
       "dependencies": {
-        "caniuse-lite": "^1.0.30001646",
+        "caniuse-lite": "^1.0.30001640",
-        "electron-to-chromium": "^1.5.4",
+        "electron-to-chromium": "^1.4.820",
-        "node-releases": "^2.0.18",
+        "node-releases": "^2.0.14",
         "update-browserslist-db": "^1.1.0"
       },
       "bin": {
@@ -15142,9 +15142,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001651",
+      "version": "1.0.30001645",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001651.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001645.tgz",
-      "integrity": "sha512-9Cf+Xv1jJNe1xPZLGuUXLNkE1BoDkqRqYyFJ9TDYSqhduqA4hu4oR9HluGoWYQC/aj8WHjsGVV+bwkh0+tegRg==",
+      "integrity": "sha512-GFtY2+qt91kzyMk6j48dJcwJVq5uTkk71XxE3RtScx7XWRLsO7bU44LOFkOZYR8w9YMS0UhPSYpN/6rAMImmLw==",
       "funding": [
         {
           "type": "opencollective",
@@ -16063,12 +16063,12 @@
       "license": "MIT"
     },
     "node_modules/core-js-compat": {
-      "version": "3.38.0",
+      "version": "3.37.1",
-      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.38.0.tgz",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.37.1.tgz",
-      "integrity": "sha512-75LAicdLa4OJVwFxFbQR3NdnZjNgX6ILpVcVzcC4T2smerB5lELMrJQQQoWV6TiuC/vlaFqgU2tKQx9w5s0e0A==",
+      "integrity": "sha512-9TNiImhKvQqSUkOvk/mMRZzOANTiEVC7WaBNhHcKM7x+/5E1l5NvsysR19zuDQScE8k+kfQXWRN3AtS/eOSHpg==",
       "dev": true,
       "dependencies": {
-        "browserslist": "^4.23.3"
+        "browserslist": "^4.23.0"
       },
       "funding": {
         "type": "opencollective",

src/Explorer/Explorer.tsx

@@ -1119,7 +1119,7 @@ export default class Explorer {
     }
   }
 
-  public openUploadItemsPane(): void {
+  public openUploadItemsPanePane(): void {
     useSidePanel.getState().openSidePanel("Upload " + getUploadName(), <UploadItemsPane />);
   }
   public openExecuteSprocParamsPanel(storedProcedure: StoredProcedure): void {

src/Explorer/Panes/TableColumnSelectionPane/TableColumnSelectionPane.tsx

@@ -1,148 +0,0 @@
-import {
-  Button,
-  Checkbox,
-  CheckboxOnChangeData,
-  InputOnChangeData,
-  makeStyles,
-  SearchBox,
-  SearchBoxChangeEvent,
-  Text,
-} from "@fluentui/react-components";
-import { configContext } from "ConfigContext";
-import { ColumnDefinition } from "Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent";
-import { CosmosFluentProvider, getPlatformTheme } from "Explorer/Theme/ThemeUtil";
-import React from "react";
-import { useSidePanel } from "../../../hooks/useSidePanel";
-
-const useColumnSelectionStyles = makeStyles({
-  paneContainer: {
-    height: "100%",
-    display: "flex",
-  },
-  searchBox: {
-    width: "100%",
-  },
-  checkboxContainer: {
-    display: "flex",
-    flexDirection: "column",
-    flex: 1,
-  },
-  checkboxLabel: {
-    padding: "4px 8px",
-    marginBottom: "0px",
-  },
-});
-export interface TableColumnSelectionPaneProps {
-  columnDefinitions: ColumnDefinition[];
-  selectedColumnIds: string[];
-  onSelectionChange: (newSelectedColumnIds: string[]) => void;
-  defaultSelection: string[];
-}
-
-export const TableColumnSelectionPane: React.FC<TableColumnSelectionPaneProps> = ({
-  columnDefinitions,
-  selectedColumnIds,
-  onSelectionChange,
-  defaultSelection,
-}: TableColumnSelectionPaneProps): JSX.Element => {
-  const closeSidePanel = useSidePanel((state) => state.closeSidePanel);
-  const originalSelectedColumnIds = React.useMemo(() => selectedColumnIds, []);
-  const [columnSearchText, setColumnSearchText] = React.useState<string>("");
-  const [newSelectedColumnIds, setNewSelectedColumnIds] = React.useState<string[]>(originalSelectedColumnIds);
-  const styles = useColumnSelectionStyles();
-
-  const selectedColumnIdsSet = new Set(newSelectedColumnIds);
-  const onCheckedValueChange = (id: string, checkedData?: CheckboxOnChangeData): void => {
-    const checked = checkedData?.checked;
-    if (checked === "mixed" || checked === undefined) {
-      return;
-    }
-
-    if (checked) {
-      selectedColumnIdsSet.add(id);
-    } else {
-      if (selectedColumnIdsSet.size === 1 && selectedColumnIdsSet.has(id)) {
-        // Don't allow unchecking the last column
-        return;
-      }
-      selectedColumnIdsSet.delete(id);
-    }
-    setNewSelectedColumnIds([...selectedColumnIdsSet]);
-  };
-
-  const onSave = (): void => {
-    onSelectionChange(newSelectedColumnIds);
-    closeSidePanel();
-  };
-
-  const onSearchChange: (event: SearchBoxChangeEvent, data: InputOnChangeData) => void = (_, data) =>
-    // eslint-disable-next-line react/prop-types
-    setColumnSearchText(data.value);
-
-  const theme = getPlatformTheme(configContext.platform);
-
-  // Filter and move partition keys to the top
-  const columnDefinitionList = columnDefinitions
-    .filter((def) => !columnSearchText || def.label.toLowerCase().includes(columnSearchText.toLowerCase()))
-    .sort((a, b) => {
-      const ID = "id";
-      // "id" always at the top, then partition keys, then everything else sorted
-      if (a.id === ID) {
-        return b.id === ID ? 0 : -1;
-      } else if (b.id === ID) {
-        return a.id === ID ? 0 : 1;
-      } else if (a.isPartitionKey && !b.isPartitionKey) {
-        return -1;
-      } else if (b.isPartitionKey && !a.isPartitionKey) {
-        return 1;
-      } else {
-        return a.label.localeCompare(b.label);
-      }
-    });
-
-  return (
-    <div className={styles.paneContainer}>
-      <CosmosFluentProvider>
-        <div className="panelFormWrapper">
-          <div className="panelMainContent" style={{ display: "flex", flexDirection: "column" }}>
-            <Text>Select which columns to display in your view of items in your container.</Text>
-            <div /* Wrap <SearchBox> to avoid margin-bottom set by panelMainContent css */>
-              <SearchBox
-                className={styles.searchBox}
-                value={columnSearchText}
-                onChange={onSearchChange}
-                placeholder="Search fields"
-              />
-            </div>
-
-            <div className={styles.checkboxContainer}>
-              {columnDefinitionList.map((columnDefinition) => (
-                <Checkbox
-                  style={{ marginBottom: 0 }}
-                  key={columnDefinition.id}
-                  label={{
-                    className: styles.checkboxLabel,
-                    children: `${columnDefinition.label}${columnDefinition.isPartitionKey ? " (partition key)" : ""}`,
-                  }}
-                  checked={selectedColumnIdsSet.has(columnDefinition.id)}
-                  onChange={(_, data) => onCheckedValueChange(columnDefinition.id, data)}
-                />
-              ))}
-            </div>
-            <Button appearance="secondary" size="small" onClick={() => setNewSelectedColumnIds(defaultSelection)}>
-              Reset
-            </Button>
-          </div>
-          <div className="panelFooter" style={{ display: "flex", gap: theme.spacingHorizontalS }}>
-            <Button appearance="primary" onClick={onSave}>
-              Save
-            </Button>
-            <Button appearance="secondary" onClick={closeSidePanel}>
-              Cancel
-            </Button>
-          </div>
-        </div>
-      </CosmosFluentProvider>
-    </div>
-  );
-};

src/Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil.ts

@@ -1,6 +1,5 @@
 // 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";
@@ -12,16 +11,11 @@ export enum SubComponentName {
   ColumnSizes = "ColumnSizes",
   FilterHistory = "FilterHistory",
   MainTabDivider = "MainTabDivider",
-  ColumnsSelection = "ColumnsSelection",
-  ColumnSort = "ColumnSort",
 }
 
 export type ColumnSizesMap = { [columnId: string]: WidthDefinition };
-export type FilterHistory = string[];
 export type WidthDefinition = { widthPx: number };
 export type TabDivider = { leftPaneWidthPercent: number };
-export type ColumnsSelection = { selectedColumnIds: string[]; columnDefinitions: ColumnDefinition[] };
-export type ColumnSort = { columnId: string; direction: "ascending" | "descending" };
 
 /**
  *

src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.test.tsx

@@ -92,13 +92,7 @@ async function waitForComponentToPaint<P = unknown>(wrapper: ReactWrapper<P> | S
 describe("Documents tab (noSql API)", () => {
   describe("buildQuery", () => {
     it("should generate the right select query for SQL API", () => {
-      expect(
+      expect(buildQuery(false, "")).toContain("select");
-        buildQuery(false, "", ["pk"], {
-          paths: ["pk"],
-          kind: "Hash",
-          version: 2,
-        }),
-      ).toContain("select");
     });
   });
 

src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx

@@ -1,9 +1,10 @@
 import { Item, ItemDefinition, PartitionKey, PartitionKeyDefinition, QueryIterator, Resource } from "@azure/cosmos";
 import { Button, Input, TableRowId, makeStyles, shorthands } from "@fluentui/react-components";
-import { Dismiss16Filled } from "@fluentui/react-icons";
+import { ArrowClockwise16Filled, Dismiss16Filled } from "@fluentui/react-icons";
 import { KeyCodes, QueryCopilotSampleContainerId, QueryCopilotSampleDatabaseId } from "Common/Constants";
 import { getErrorMessage, getErrorStack } from "Common/ErrorHandlingUtils";
 import MongoUtility from "Common/MongoUtility";
+import { StyleConstants } from "Common/StyleConstants";
 import { createDocument } from "Common/dataAccess/createDocument";
 import {
   deleteDocument as deleteNoSqlDocument,
@@ -20,14 +21,11 @@ import Explorer from "Explorer/Explorer";
 import { useCommandBar } from "Explorer/Menus/CommandBar/CommandBarComponentAdapter";
 import { querySampleDocuments, readSampleDocument } from "Explorer/QueryCopilot/QueryCopilotUtilities";
 import {
-  ColumnsSelection,
-  FilterHistory,
   SubComponentName,
   TabDivider,
   readSubComponentState,
   saveSubComponentState,
 } from "Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil";
-import { usePrevious } from "Explorer/Tabs/DocumentsTabV2/SelectionHelper";
 import { CosmosFluentProvider, LayoutConstants, cosmosShorthands, tokens } from "Explorer/Theme/ThemeUtil";
 import { useSelectedNode } from "Explorer/useSelectedNode";
 import { KeyboardAction, KeyboardActionGroup, useKeyboardActionGroup } from "KeyboardShortcuts";
@@ -53,11 +51,11 @@ import * as ViewModels from "../../../Contracts/ViewModels";
 import { CollectionBase } from "../../../Contracts/ViewModels";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 import * as QueryUtils from "../../../Utils/QueryUtils";
-import { defaultQueryFields, extractPartitionKeyValues } from "../../../Utils/QueryUtils";
+import { extractPartitionKeyValues } from "../../../Utils/QueryUtils";
 import DocumentId from "../../Tree/DocumentId";
 import ObjectId from "../../Tree/ObjectId";
 import TabsBase from "../TabsBase";
-import { ColumnDefinition, DocumentsTableComponent, DocumentsTableComponentItem } from "./DocumentsTableComponent";
+import { DocumentsTableComponent, DocumentsTableComponentItem } from "./DocumentsTableComponent";
 
 const MAX_FILTER_HISTORY_COUNT = 100; // Datalist will become scrollable, so we can afford to keep more items than fit on the screen
 
@@ -103,6 +101,17 @@ export const useDocumentsTabStyles = makeStyles({
       ...shorthands.outline("1px", "dotted"),
     },
   },
+  floatingControlsContainer: {
+    position: "relative",
+  },
+  floatingControls: {
+    position: "absolute",
+    top: "6px",
+    right: 0,
+    float: "right",
+    backgroundColor: "white",
+    zIndex: 1,
+  },
 });
 
 export class DocumentsTabV2 extends TabsBase {
@@ -272,7 +281,7 @@ const createUploadButton = (container: Explorer): CommandButtonComponentProps =>
     iconAlt: label,
     onCommandClick: () => {
       const selectedCollection: ViewModels.Collection = useSelectedNode.getState().findSelectedCollection();
-      selectedCollection && container.openUploadItemsPane();
+      selectedCollection && container.openUploadItemsPanePane();
     },
     commandButtonLabel: label,
     ariaLabel: label,
@@ -460,33 +469,17 @@ export const showPartitionKey = (collection: ViewModels.CollectionBase, isPrefer
 };
 
 // Export to expose to unit tests
-/**
- * Build default query
- * @param isMongo true if mongo api
- * @param filter
- * @param partitionKeyProperties optional for mongo
- * @param partitionKey  optional for mongo
- * @param additionalField
- * @returns
- */
 export const buildQuery = (
   isMongo: boolean,
   filter: string,
   partitionKeyProperties?: string[],
   partitionKey?: DataModels.PartitionKey,
-  additionalField?: string[],
 ): string => {
   if (isMongo) {
     return filter || "{}";
   }
 
-  // Filter out fields starting with "/" (partition keys)
+  return QueryUtils.buildDocumentsQuery(filter, partitionKeyProperties, partitionKey);
-  return QueryUtils.buildDocumentsQuery(
-    filter,
-    partitionKeyProperties,
-    partitionKey,
-    additionalField?.filter((f) => !f.startsWith("/")) || [],
-  );
 };
 
 /**
@@ -529,12 +522,6 @@ const getDefaultSqlFilters = (partitionKeys: string[]) =>
   );
 const defaultMongoFilters = ['{"id":"foo"}', "{ qty: { $gte: 20 } }"];
 
-// Extend DocumentId to include fields displayed in the table
-type ExtendedDocumentId = DocumentId & { tableFields?: DocumentsTableComponentItem };
-
-// This is based on some heuristics
-const calculateOffset = (columnNumber: number): number => columnNumber * 16 - 29;
-
 // Export to expose to unit tests
 export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabComponentProps> = ({
   isPreferredApiMongoDB,
@@ -553,7 +540,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
   const [isFilterFocused, setIsFilterFocused] = useState<boolean>(false);
   const [appliedFilter, setAppliedFilter] = useState<string>("");
   const [filterContent, setFilterContent] = useState<string>("");
-  const [documentIds, setDocumentIds] = useState<ExtendedDocumentId[]>([]);
+  const [documentIds, setDocumentIds] = useState<DocumentId[]>([]);
   const [isExecuting, setIsExecuting] = useState<boolean>(false);
   const filterInput = useRef<HTMLInputElement>(null);
   const styles = useDocumentsTabStyles();
@@ -584,7 +571,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
 
   // State
   const [tabStateData, setTabStateData] = useState<TabDivider>(() =>
-    readSubComponentState<TabDivider>(SubComponentName.MainTabDivider, _collection, {
+    readSubComponentState(SubComponentName.MainTabDivider, _collection, {
       leftPaneWidthPercent: 35,
     }),
   );
@@ -598,8 +585,8 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
   const [continuationToken, setContinuationToken] = useState<string>(undefined);
 
   // User's filter history
-  const [lastFilterContents, setLastFilterContents] = useState<FilterHistory>(() =>
+  const [lastFilterContents, setLastFilterContents] = useState<string[]>(() =>
-    readSubComponentState<FilterHistory>(SubComponentName.FilterHistory, _collection, [] as FilterHistory),
+    readSubComponentState(SubComponentName.FilterHistory, _collection, []),
   );
 
   const setKeyboardActions = useKeyboardActionGroup(KeyboardActionGroup.ACTIVE_TAB);
@@ -648,37 +635,10 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
     [partitionKeyPropertyHeaders],
   );
 
-  const getInitialColumnSelection = () => {
-    const defaultColumnsIds = ["id"];
-    if (showPartitionKey(_collection, isPreferredApiMongoDB)) {
-      defaultColumnsIds.push(...partitionKeyPropertyHeaders);
-    }
-
-    return defaultColumnsIds;
-  };
-
-  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(
-    (
+    (rawDocument: DataModels.DocumentId, partitionKeyProperties: string[], partitionKeyValue: string[]) =>
-      rawDocument: DataModels.DocumentId,
+      new DocumentId(
-      partitionKeyProperties: string[],
-      partitionKeyValue: string[],
-    ): ExtendedDocumentId => {
-      const extendedDocumentId = new DocumentId(
         {
           partitionKey,
           partitionKeyProperties,
@@ -688,10 +648,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
         },
         rawDocument,
         partitionKeyValue,
-      ) as ExtendedDocumentId;
+      ),
-      extendedDocumentId.tableFields = { ...rawDocument };
-      return extendedDocumentId;
-    },
     [partitionKey],
   );
 
@@ -853,10 +810,6 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
 
           setDocumentIds(ids);
           setEditorState(ViewModels.DocumentExplorerState.existingDocumentNoEdits);
-
-          // Update column choices
-          setColumnDefinitionsFromDocument(savedDocument);
-
           TelemetryProcessor.traceSuccess(
             Action.CreateDocument,
             {
@@ -939,10 +892,6 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
             },
             startKey,
           );
-
-          // Update column choices
-          selectedDocumentId.tableFields = { ...documentContent };
-          setColumnDefinitionsFromDocument(documentContent);
         },
         (error) => {
           onExecutionErrorChange(true);
@@ -1144,13 +1093,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
     const _queryAbortController = new AbortController();
     setQueryAbortController(_queryAbortController);
     const filter: string = filterContent.trim();
-    const query: string = buildQuery(
+    const query: string = buildQuery(isPreferredApiMongoDB, filter, partitionKeyProperties, partitionKey);
-      isPreferredApiMongoDB,
-      filter,
-      partitionKeyProperties,
-      partitionKey,
-      selectedColumnIds,
-    );
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const options: any = {};
     // TODO: Property 'enableCrossPartitionQuery' does not exist on type 'FeedOptions'.
@@ -1173,7 +1116,6 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
     resourceTokenPartitionKey,
     isQueryCopilotSampleContainer,
     _collection,
-    selectedColumnIds,
   ]);
 
   const onHideFilterClick = (): void => {
@@ -1319,6 +1261,16 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
     documentsIterator, // loadNextPage: disabled as it will trigger a circular dependency and infinite loop
   ]);
 
+  const onRefreshKeyInput: KeyboardEventHandler<HTMLButtonElement> = (event) => {
+    if (event.key === " " || event.key === "Enter") {
+      const focusElement = event.target as HTMLElement;
+      refreshDocumentsGrid(false);
+      focusElement && focusElement.focus();
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  };
+
   const onLoadMoreKeyInput: KeyboardEventHandler<HTMLAnchorElement> = (event) => {
     if (event.key === " " || event.key === "Enter") {
       const focusElement = event.target as HTMLElement;
@@ -1350,7 +1302,9 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
 
   // Table config here
   const tableItems: DocumentsTableComponentItem[] = documentIds.map((documentId) => {
-    const item: DocumentsTableComponentItem = documentId.tableFields || { id: documentId.id() };
+    const item: Record<string, string> & { id: string } = {
+      id: documentId.id(),
+    };
 
     if (partitionKeyPropertyHeaders && documentId.stringPartitionKeyValues) {
       for (let i = 0; i < partitionKeyPropertyHeaders.length; i++) {
@@ -1361,44 +1315,6 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
     return item;
   });
 
-  const extractColumnDefinitionsFromDocument = (document: unknown): ColumnDefinition[] => {
-    let columnDefinitions: ColumnDefinition[] = Object.keys(document)
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      .filter((key) => typeof (document as any)[key] === "string" || typeof (document as any)[key] === "number") // Only allow safe types for displayable React children
-      .map((key) =>
-        key === "id"
-          ? { id: key, label: isPreferredApiMongoDB ? "_id" : "id", isPartitionKey: false }
-          : { id: key, label: key, isPartitionKey: false },
-      );
-
-    if (showPartitionKey(_collection, isPreferredApiMongoDB)) {
-      columnDefinitions.push(
-        ...partitionKeyPropertyHeaders.map((key) => ({ id: key, label: key, isPartitionKey: true })),
-      );
-
-      // Remove properties that are the partition keys, since they are already included
-      columnDefinitions = columnDefinitions.filter(
-        (columnDefinition) => !partitionKeyProperties.includes(columnDefinition.id),
-      );
-    }
-
-    return columnDefinitions;
-  };
-
-  /**
-   * Extract column definitions from document and add to the definitions
-   * @param document
-   */
-  const setColumnDefinitionsFromDocument = (document: unknown): void => {
-    const currentIds = new Set(columnDefinitions.map((columnDefinition) => columnDefinition.id));
-    extractColumnDefinitionsFromDocument(document).forEach((columnDefinition) => {
-      if (!currentIds.has(columnDefinition.id)) {
-        columnDefinitions.push(columnDefinition);
-      }
-    });
-    setColumnDefinitions([...columnDefinitions]);
-  };
-
   /**
    * replicate logic of selectedDocument.click();
    * Document has been clicked on in table
@@ -1414,9 +1330,6 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
     (_isQueryCopilotSampleContainer ? readSampleDocument(documentId) : readDocument(_collection, documentId)).then(
       (content) => {
         initDocumentEditor(documentId, content);
-
-        // Update columns
-        setColumnDefinitionsFromDocument(content);
       },
     );
 
@@ -1507,22 +1420,10 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
     return () => resizeObserver.disconnect(); // clean up
   }, []);
 
-  // Column definition is a map<id, ColumnDefinition> to garantee uniqueness
+  const columnHeaders = {
-  const [columnDefinitions, setColumnDefinitions] = useState<ColumnDefinition[]>(() => {
+    idHeader: isPreferredApiMongoDB ? "_id" : "id",
-    const persistedColumnsSelection = readSubComponentState<ColumnsSelection>(
+    partitionKeyHeaders: (showPartitionKey(_collection, isPreferredApiMongoDB) && partitionKeyPropertyHeaders) || [],
-      SubComponentName.ColumnsSelection,
+  };
-      _collection,
-      undefined,
-    );
-
-    if (!persistedColumnsSelection) {
-      return extractColumnDefinitionsFromDocument({
-        id: "id",
-      });
-    }
-
-    return persistedColumnsSelection.columnDefinitions;
-  });
 
   const onSelectedRowsChange = (selectedRows: Set<TableRowId>) => {
     confirmDiscardingChange(() => {
@@ -1754,7 +1655,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
       setIsExecuting(true);
       onExecutionErrorChange(false);
       const filter: string = filterContent.trim();
-      const query: string = buildQuery(isPreferredApiMongoDB, filter, selectedColumnIds);
+      const query: string = buildQuery(isPreferredApiMongoDB, filter);
 
       return MongoProxyClient.queryDocuments(
         _collection.databaseId,
@@ -1820,7 +1721,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
     const limitedLastFilterContents = lastFilterContents.slice(0, MAX_FILTER_HISTORY_COUNT);
 
     setLastFilterContents(limitedLastFilterContents);
-    saveSubComponentState<FilterHistory>(SubComponentName.FilterHistory, _collection, lastFilterContents);
+    saveSubComponentState(SubComponentName.FilterHistory, _collection, lastFilterContents);
   };
 
   const refreshDocumentsGrid = useCallback(
@@ -1853,41 +1754,6 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
     [createIterator, filterContent],
   );
 
-  const onColumnSelectionChange = (newSelectedColumnIds: string[]): void => {
-    // Do not allow to unselecting all columns
-    if (newSelectedColumnIds.length === 0) {
-      return;
-    }
-
-    setSelectedColumnIds(newSelectedColumnIds);
-
-    saveSubComponentState<ColumnsSelection>(SubComponentName.ColumnsSelection, _collection, {
-      selectedColumnIds: newSelectedColumnIds,
-      columnDefinitions,
-    });
-  };
-
-  const prevSelectedColumnIds = usePrevious({ selectedColumnIds, setSelectedColumnIds });
-
-  useEffect(() => {
-    // If we are adding a field, let's refresh to include the field in the query
-    let addedField = false;
-    for (const field of selectedColumnIds) {
-      if (
-        !defaultQueryFields.includes(field) &&
-        prevSelectedColumnIds &&
-        !prevSelectedColumnIds.selectedColumnIds.includes(field)
-      ) {
-        addedField = true;
-        break;
-      }
-    }
-
-    if (addedField) {
-      refreshDocumentsGrid(false);
-    }
-  }, [prevSelectedColumnIds, refreshDocumentsGrid, selectedColumnIds]);
-
   return (
     <CosmosFluentProvider className={styles.container}>
       <div className="tab-pane active" role="tabpanel" style={{ display: "flex" }}>
@@ -1982,40 +1848,42 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
           <Allotment
             onDragEnd={(sizes: number[]) => {
               tabStateData.leftPaneWidthPercent = (100 * sizes[0]) / (sizes[0] + sizes[1]);
-              saveSubComponentState<TabDivider>(SubComponentName.MainTabDivider, _collection, tabStateData);
+              saveSubComponentState(SubComponentName.MainTabDivider, _collection, tabStateData);
               setTabStateData(tabStateData);
             }}
           >
             <Allotment.Pane preferredSize={`${tabStateData.leftPaneWidthPercent}%`} minSize={55}>
               <div style={{ height: "100%", width: "100%", overflow: "hidden" }} ref={tableContainerRef}>
-                <div className={styles.tableContainer}>
+                <div className={styles.floatingControlsContainer}>
-                  <div
+                  <div className={styles.floatingControls}>
-                    style={
+                    <Button
-                      {
+                      appearance="transparent"
-                        height: "100%",
+                      aria-label="Refresh"
-                        width: `calc(100% + ${calculateOffset(selectedColumnIds.length)}px)`,
+                      size="small"
-                      } /* Fix to make table not resize beyond parent's width */
+                      icon={<ArrowClockwise16Filled />}
-                    }
+                      style={{
-                  >
+                        color: StyleConstants.AccentMedium,
-                    <DocumentsTableComponent
+                      }}
-                      onRefreshTable={() => refreshDocumentsGrid(false)}
+                      onClick={() => refreshDocumentsGrid(false)}
-                      items={tableItems}
+                      onKeyDown={onRefreshKeyInput}
-                      onItemClicked={(index) => onDocumentClicked(index, documentIds)}
-                      onSelectedRowsChange={onSelectedRowsChange}
-                      selectedRows={selectedRows}
-                      size={tableContainerSizePx}
-                      selectedColumnIds={selectedColumnIds}
-                      columnDefinitions={columnDefinitions}
-                      isRowSelectionDisabled={
-                        configContext.platform === Platform.Fabric && userContext.fabricContext?.isReadOnly
-                      }
-                      onColumnSelectionChange={onColumnSelectionChange}
-                      defaultColumnSelection={getInitialColumnSelection()}
-                      collection={_collection}
-                      isColumnSelectionDisabled={isPreferredApiMongoDB}
                     />
                   </div>
                 </div>
+                <div className={styles.tableContainer}>
+                  <DocumentsTableComponent
+                    items={tableItems}
+                    onItemClicked={(index) => onDocumentClicked(index, documentIds)}
+                    onSelectedRowsChange={onSelectedRowsChange}
+                    selectedRows={selectedRows}
+                    size={tableContainerSizePx}
+                    columnHeaders={columnHeaders}
+                    isSelectionDisabled={
+                      (partitionKey.systemKey && !isPreferredApiMongoDB) ||
+                      (configContext.platform === Platform.Fabric && userContext.fabricContext?.isReadOnly)
+                    }
+                    collection={_collection}
+                  />
+                </div>
                 {tableItems.length > 0 && (
                   <a
                     className={styles.loadMore}

src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.test.tsx

@@ -21,19 +21,15 @@ describe("DocumentsTableComponent", () => {
       height: 0,
       width: 0,
     },
-    columnDefinitions: [
+    columnHeaders: {
-      { id: ID_HEADER, label: "ID", isPartitionKey: false },
+      idHeader: ID_HEADER,
-      { id: PARTITION_KEY_HEADER, label: "Partition Key", isPartitionKey: true },
+      partitionKeyHeaders: [PARTITION_KEY_HEADER],
-    ],
+    },
-    isRowSelectionDisabled: false,
+    isSelectionDisabled: false,
     collection: {
       databaseId: "db",
       id: ((): string => "coll") as ko.Observable<string>,
     } as ViewModels.CollectionBase,
-    onRefreshTable: (): void => {
-      throw new Error("Function not implemented.");
-    },
-    selectedColumnIds: [],
   });
 
   it("should render documents and partition keys in header", () => {
@@ -44,7 +40,7 @@ describe("DocumentsTableComponent", () => {
 
   it("should not render selection column when isSelectionDisabled is true", () => {
     const props: IDocumentsTableComponentProps = createMockProps();
-    props.isRowSelectionDisabled = true;
+    props.isSelectionDisabled = true;
     const wrapper = mount(<DocumentsTableComponent {...props} />);
     expect(wrapper).toMatchSnapshot();
   });

src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx

@@ -1,48 +1,30 @@
 import {
-  Button,
+  createTableColumn,
   Menu,
-  MenuDivider,
   MenuItem,
   MenuList,
   MenuPopover,
   MenuTrigger,
   TableRowData as RowStateBase,
-  SortDirection,
   Table,
   TableBody,
   TableCell,
   TableCellLayout,
   TableColumnDefinition,
-  TableColumnId,
   TableColumnSizingOptions,
   TableHeader,
   TableHeaderCell,
   TableRow,
   TableRowId,
   TableSelectionCell,
-  tokens,
   useArrowNavigationGroup,
   useTableColumnSizing_unstable,
   useTableFeatures,
   useTableSelection,
-  useTableSort,
 } from "@fluentui/react-components";
-import {
-  ArrowClockwise16Regular,
-  ArrowResetRegular,
-  DeleteRegular,
-  EditRegular,
-  MoreHorizontalRegular,
-  TableResizeColumnRegular,
-  TextSortAscendingRegular,
-  TextSortDescendingRegular,
-} from "@fluentui/react-icons";
 import { NormalizedEventKey } from "Common/Constants";
-import { TableColumnSelectionPane } from "Explorer/Panes/TableColumnSelectionPane/TableColumnSelectionPane";
 import {
   ColumnSizesMap,
-  ColumnSort,
-  deleteSubComponentState,
   readSubComponentState,
   saveSubComponentState,
   SubComponentName,
@@ -50,37 +32,29 @@ import {
 import { INITIAL_SELECTED_ROW_INDEX, useDocumentsTabStyles } from "Explorer/Tabs/DocumentsTabV2/DocumentsTabV2";
 import { selectionHelper } from "Explorer/Tabs/DocumentsTabV2/SelectionHelper";
 import { LayoutConstants } from "Explorer/Theme/ThemeUtil";
-import { userContext } from "UserContext";
 import { isEnvironmentCtrlPressed, isEnvironmentShiftPressed } from "Utils/KeyboardUtils";
-import { useSidePanel } from "hooks/useSidePanel";
 import React, { useCallback, useMemo } from "react";
 import { FixedSizeList as List, ListChildComponentProps } from "react-window";
 import * as ViewModels from "../../../Contracts/ViewModels";
 
 export type DocumentsTableComponentItem = {
   id: string;
-} & Record<string, string | number>;
+} & Record<string, string>;
 
-export type ColumnDefinition = {
+export type ColumnHeaders = {
-  id: string;
+  idHeader: string;
-  label: string;
+  partitionKeyHeaders: string[];
-  isPartitionKey: boolean;
 };
 export interface IDocumentsTableComponentProps {
-  onRefreshTable: () => void;
   items: DocumentsTableComponentItem[];
   onItemClicked: (index: number) => void;
   onSelectedRowsChange: (selectedItemsIndices: Set<TableRowId>) => void;
   selectedRows: Set<TableRowId>;
   size: { height: number; width: number };
-  selectedColumnIds: string[];
+  columnHeaders: ColumnHeaders;
-  columnDefinitions: ColumnDefinition[];
   style?: React.CSSProperties;
-  isRowSelectionDisabled?: boolean;
+  isSelectionDisabled?: boolean;
   collection: ViewModels.CollectionBase;
-  onColumnSelectionChange?: (newSelectedColumnIds: string[]) => void;
-  defaultColumnSelection?: string[];
-  isColumnSelectionDisabled?: boolean;
 }
 
 interface TableRowData extends RowStateBase<DocumentsTableComponentItem> {
@@ -93,33 +67,25 @@ interface ReactWindowRenderFnProps extends ListChildComponentProps {
   data: TableRowData[];
 }
 
-const COLUMNS_MENU_NAME = "columnsMenu";
-
 const defaultSize = {
   idealWidth: 200,
   minWidth: 50,
 };
 export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> = ({
-  onRefreshTable,
   items,
   onSelectedRowsChange,
   selectedRows,
   style,
   size,
-  selectedColumnIds,
+  columnHeaders,
-  columnDefinitions,
+  isSelectionDisabled,
-  isRowSelectionDisabled: isSelectionDisabled,
   collection,
-  onColumnSelectionChange,
-  defaultColumnSelection,
-  isColumnSelectionDisabled,
 }: IDocumentsTableComponentProps) => {
-  const styles = useDocumentsTabStyles();
-
   const [columnSizingOptions, setColumnSizingOptions] = React.useState<TableColumnSizingOptions>(() => {
+    const columnIds = ["id"].concat(columnHeaders.partitionKeyHeaders);
     const columnSizesMap: ColumnSizesMap = readSubComponentState(SubComponentName.ColumnSizes, collection, {});
     const columnSizesPx: TableColumnSizingOptions = {};
-    selectedColumnIds.forEach((columnId) => {
+    columnIds.forEach((columnId) => {
       if (
         !columnSizesMap ||
         !columnSizesMap[columnId] ||
@@ -137,24 +103,7 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
     return columnSizesPx;
   });
 
-  const [sortState, setSortState] = React.useState<{
+  const styles = useDocumentsTabStyles();
-    sortDirection: "ascending" | "descending";
-    sortColumn: TableColumnId | undefined;
-  }>(() => {
-    const sort = readSubComponentState<ColumnSort>(SubComponentName.ColumnSort, collection, undefined);
-
-    if (!sort) {
-      return {
-        sortDirection: undefined,
-        sortColumn: undefined,
-      };
-    }
-
-    return {
-      sortDirection: sort.direction,
-      sortColumn: sort.columnId,
-    };
-  });
 
   const onColumnResize = React.useCallback((_, { columnId, width }: { columnId: string; width: number }) => {
     setColumnSizingOptions((state) => {
@@ -173,123 +122,42 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
         return acc;
       }, {} as ColumnSizesMap);
 
-      saveSubComponentState<ColumnSizesMap>(SubComponentName.ColumnSizes, collection, persistentSizes, true);
+      saveSubComponentState(SubComponentName.ColumnSizes, collection, persistentSizes, true);
 
       return newSizingOptions;
     });
   }, []);
 
-  // const restoreFocusTargetAttribute = useRestoreFocusTarget();
-
-  const onSortClick = (event: React.SyntheticEvent, columnId: string, direction: SortDirection) => {
-    setColumnSort(event, columnId, direction);
-
-    if (columnId === undefined || direction === undefined) {
-      deleteSubComponentState(SubComponentName.ColumnSort, collection);
-      return;
-    }
-
-    saveSubComponentState<ColumnSort>(SubComponentName.ColumnSort, collection, { columnId, direction });
-  };
-
   // 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(
     () =>
-      columnDefinitions
+      [
-        .filter((column) => selectedColumnIds.includes(column.id))
+        createTableColumn<DocumentsTableComponentItem>({
-        .map((column) => ({
+          columnId: "id",
-          columnId: column.id,
+          compare: (a, b) => a.id.localeCompare(b.id),
-          compare: (a, b) => {
+          renderHeaderCell: () => columnHeaders.idHeader,
-            if (typeof a[column.id] === "string") {
-              return (a[column.id] as string).localeCompare(b[column.id] as string);
-            } else if (typeof a[column.id] === "number") {
-              return (a[column.id] as number) - (b[column.id] as number);
-            } else {
-              // Should not happen
-              return 0;
-            }
-          },
-          renderHeaderCell: () => (
-            <>
-              <span title={column.label}>{column.label}</span>
-              <Menu>
-                <MenuTrigger disableButtonEnhancement>
-                  <Button
-                    // {...restoreFocusTargetAttribute}
-                    appearance="transparent"
-                    aria-label="Select column"
-                    size="small"
-                    icon={<MoreHorizontalRegular />}
-                    style={{ position: "absolute", right: 0, backgroundColor: tokens.colorNeutralBackground1 }}
-                  />
-                </MenuTrigger>
-                <MenuPopover>
-                  <MenuList>
-                    <MenuItem key="refresh" icon={<ArrowClockwise16Regular />} onClick={onRefreshTable}>
-                      Refresh
-                    </MenuItem>
-                    {userContext.features.enableDocumentsTableColumnSelection && (
-                      <>
-                        <MenuItem
-                          icon={<TextSortAscendingRegular />}
-                          onClick={(e) => onSortClick(e, column.id, "ascending")}
-                        >
-                          Sort ascending
-                        </MenuItem>
-                        <MenuItem
-                          icon={<TextSortDescendingRegular />}
-                          onClick={(e) => onSortClick(e, column.id, "descending")}
-                        >
-                          Sort descending
-                        </MenuItem>
-                        <MenuItem icon={<ArrowResetRegular />} onClick={(e) => onSortClick(e, undefined, undefined)}>
-                          Reset sorting
-                        </MenuItem>
-                        {!isColumnSelectionDisabled && (
-                          <MenuItem key="editcolumns" icon={<EditRegular />} onClick={openColumnSelectionPane}>
-                            Edit columns
-                          </MenuItem>
-                        )}
-                        <MenuDivider />
-                        <MenuItem
-                          key="keyboardresize"
-                          icon={<TableResizeColumnRegular />}
-                          onClick={columnSizing.enableKeyboardMode(column.id)}
-                        >
-                          Resize with left/right arrow keys
-                        </MenuItem>
-                        {!isColumnSelectionDisabled && (
-                          <MenuItem
-                            key="remove"
-                            icon={<DeleteRegular />}
-                            onClick={() => {
-                              // Remove column id from selectedColumnIds
-                              const index = selectedColumnIds.indexOf(column.id);
-                              if (index === -1) {
-                                return;
-                              }
-                              const newSelectedColumnIds = [...selectedColumnIds];
-                              newSelectedColumnIds.splice(index, 1);
-                              onColumnSelectionChange(newSelectedColumnIds);
-                            }}
-                          >
-                            Remove column
-                          </MenuItem>
-                        )}
-                      </>
-                    )}
-                  </MenuList>
-                </MenuPopover>
-              </Menu>
-            </>
-          ),
           renderCell: (item) => (
-            <TableCellLayout truncate title={`${item[column.id]}`}>
+            <TableCellLayout truncate title={item.id}>
-              {item[column.id]}
+              {item.id}
             </TableCellLayout>
           ),
-        })),
+        }),
-    [columnDefinitions, onColumnSelectionChange, selectedColumnIds],
+      ].concat(
+        columnHeaders.partitionKeyHeaders.map((pkHeader) =>
+          createTableColumn<DocumentsTableComponentItem>({
+            columnId: pkHeader,
+            compare: (a, b) => a[pkHeader].localeCompare(b[pkHeader]),
+            // Show Refresh button on last column
+            renderHeaderCell: () => <span title={pkHeader}>{pkHeader}</span>,
+            renderCell: (item) => (
+              <TableCellLayout truncate title={item[pkHeader]}>
+                {item[pkHeader]}
+              </TableCellLayout>
+            ),
+          }),
+        ),
+      ),
+    [columnHeaders],
   );
 
   const [selectionStartIndex, setSelectionStartIndex] = React.useState<number>(INITIAL_SELECTED_ROW_INDEX);
@@ -379,7 +247,6 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
     columnSizing_unstable: columnSizing,
     tableRef,
     selection: { allRowsSelected, someRowsSelected, toggleAllRows, toggleRow, isRowSelected },
-    sort: { getSortDirection, setColumnSort, sort },
   } = useTableFeatures(
     {
       columns,
@@ -393,36 +260,25 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
         // eslint-disable-next-line react/prop-types
         onSelectionChange: (e, data) => onSelectedRowsChange(data.selectedItems),
       }),
-      useTableSort({
-        sortState,
-        onSortChange: (e, nextSortState) => setSortState(nextSortState),
-      }),
     ],
   );
 
-  const headerSortProps = (columnId: TableColumnId) => ({
+  const rows: TableRowData[] = getRows((row) => {
-    // onClick: (e: React.MouseEvent) => toggleColumnSort(e, columnId),
+    const selected = isRowSelected(row.rowId);
-    sortDirection: getSortDirection(columnId),
+    return {
+      ...row,
+      onClick: (e: React.MouseEvent) => toggleRow(e, row.rowId),
+      onKeyDown: (e: React.KeyboardEvent) => {
+        if (e.key === " ") {
+          e.preventDefault();
+          toggleRow(e, row.rowId);
+        }
+      },
+      selected,
+      appearance: selected ? ("brand" as const) : ("none" as const),
+    };
   });
 
-  const rows: TableRowData[] = sort(
-    getRows((row) => {
-      const selected = isRowSelected(row.rowId);
-      return {
-        ...row,
-        onClick: (e: React.MouseEvent) => toggleRow(e, row.rowId),
-        onKeyDown: (e: React.KeyboardEvent) => {
-          if (e.key === " ") {
-            e.preventDefault();
-            toggleRow(e, row.rowId);
-          }
-        },
-        selected,
-        appearance: selected ? ("brand" as const) : ("none" as const),
-      };
-    }),
-  );
-
   const toggleAllKeydown = React.useCallback(
     (e: React.KeyboardEvent<HTMLDivElement>) => {
       if (e.key === " ") {
@@ -448,50 +304,37 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
     ...style,
   };
 
-  const checkedValues: { [COLUMNS_MENU_NAME]: string[] } = {
-    [COLUMNS_MENU_NAME]: [],
-  };
-  columnDefinitions.forEach(
-    (columnDefinition) =>
-      selectedColumnIds.includes(columnDefinition.id) && checkedValues[COLUMNS_MENU_NAME].push(columnDefinition.id),
-  );
-
-  const openColumnSelectionPane = (): void => {
-    useSidePanel
-      .getState()
-      .openSidePanel(
-        "Select columns",
-        <TableColumnSelectionPane
-          selectedColumnIds={selectedColumnIds}
-          columnDefinitions={columnDefinitions}
-          onSelectionChange={onColumnSelectionChange}
-          defaultSelection={defaultColumnSelection}
-        />,
-      );
-  };
-
   return (
-    <Table noNativeElements sortable {...tableProps}>
+    <Table noNativeElements {...tableProps}>
       <TableHeader>
         <TableRow className={styles.tableRow} style={{ width: size ? size.width - 15 : "100%" }}>
           {!isSelectionDisabled && (
             <TableSelectionCell
-              key="selectcell"
               checked={allRowsSelected ? true : someRowsSelected ? "mixed" : false}
               onClick={toggleAllRows}
               onKeyDown={toggleAllKeydown}
               checkboxIndicator={{ "aria-label": "Select all rows " }}
             />
           )}
-          {columns.map((column) => (
+          {columns.map((column /* index */) => (
-            <TableHeaderCell
+            <Menu openOnContext key={column.columnId}>
-              className={styles.tableCell}
+              <MenuTrigger>
-              key={column.columnId}
+                <TableHeaderCell
-              {...columnSizing.getTableHeaderCellProps(column.columnId)}
+                  className={styles.tableCell}
-              {...headerSortProps(column.columnId)}
+                  key={column.columnId}
-            >
+                  {...columnSizing.getTableHeaderCellProps(column.columnId)}
-              {column.renderHeaderCell()}
+                >
-            </TableHeaderCell>
+                  {column.renderHeaderCell()}
+                </TableHeaderCell>
+              </MenuTrigger>
+              <MenuPopover>
+                <MenuList>
+                  <MenuItem onClick={columnSizing.enableKeyboardMode(column.columnId)}>
+                    Keyboard Column Resizing
+                  </MenuItem>
+                </MenuList>
+              </MenuPopover>
+            </Menu>
           ))}
         </TableRow>
       </TableHeader>

src/Explorer/Tabs/DocumentsTabV2/SelectionHelper.ts

@@ -1,5 +1,3 @@
-import { useEffect, useRef } from "react";
-
 /**
  * Utility class to help with selection.
  * This emulates File Explorer selection behavior.
@@ -92,12 +90,3 @@ export const selectionHelper = (
     }
   }
 };
-
-// To get previous values of a state in useEffect
-export const usePrevious = <T>(value: T): T | undefined => {
-  const ref = useRef<T>();
-  useEffect(() => {
-    ref.current = value;
-  });
-  return ref.current;
-};

src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTabV2.test.tsx.snap

@@ -55,57 +55,53 @@ exports[`Documents tab (noSql API) when rendered should render the page 1`] = `
             }
           >
             <div
-              className="___9o87uj0_0000000 ffefeo0"
+              className="___77lcry0_0000000 f10pi13n"
             >
               <div
-                style={
+                className="___1rwkz4r_0000000 f1euv43f f1l8gmrm f1e31b4d f150nix6 fy6ml6n f19g0ac"
-                  {
-                    "height": "100%",
-                    "width": "calc(100% + -13px)",
-                  }
-                }
               >
-                <DocumentsTableComponent
+                <Button
-                  collection={
+                  appearance="transparent"
+                  aria-label="Refresh"
+                  icon={<ArrowClockwise16Filled />}
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  size="small"
+                  style={
                     {
-                      "databaseId": "databaseId",
+                      "color": undefined,
-                      "id": [Function],
-                    }
-                  }
-                  columnDefinitions={
-                    [
-                      {
-                        "id": "id",
-                        "isPartitionKey": false,
-                        "label": "id",
-                      },
-                    ]
-                  }
-                  defaultColumnSelection={
-                    [
-                      "id",
-                    ]
-                  }
-                  isColumnSelectionDisabled={false}
-                  isRowSelectionDisabled={true}
-                  items={[]}
-                  onColumnSelectionChange={[Function]}
-                  onItemClicked={[Function]}
-                  onRefreshTable={[Function]}
-                  onSelectedRowsChange={[Function]}
-                  selectedColumnIds={
-                    [
-                      "id",
-                    ]
-                  }
-                  selectedRows={
-                    Set {
-                      0,
                     }
                   }
                 />
               </div>
             </div>
+            <div
+              className="___9o87uj0_0000000 ffefeo0"
+            >
+              <DocumentsTableComponent
+                collection={
+                  {
+                    "databaseId": "databaseId",
+                    "id": [Function],
+                  }
+                }
+                columnHeaders={
+                  {
+                    "idHeader": "id",
+                    "partitionKeyHeaders": [],
+                  }
+                }
+                isSelectionDisabled={true}
+                items={[]}
+                onItemClicked={[Function]}
+                onSelectedRowsChange={[Function]}
+                selectedRows={
+                  Set {
+                    0,
+                  }
+                }
+              />
+            </div>
           </div>
         </Allotment.Pane>
         <Allotment.Pane

src/Platform/Hosted/extractFeatures.ts

@@ -38,7 +38,6 @@ export type Features = {
   readonly copilotChatFixedMonacoEditorHeight: boolean;
   readonly enablePriorityBasedExecution: boolean;
   readonly disableConnectionStringLogin: boolean;
-  readonly enableDocumentsTableColumnSelection: boolean;
 
   // can be set via both flight and feature flag
   autoscaleDefault: boolean;
@@ -109,7 +108,6 @@ export function extractFeatures(given = new URLSearchParams(window.location.sear
     copilotChatFixedMonacoEditorHeight: "true" === get("copilotchatfixedmonacoeditorheight"),
     enablePriorityBasedExecution: "true" === get("enableprioritybasedexecution"),
     disableConnectionStringLogin: "true" === get("disableconnectionstringlogin"),
-    enableDocumentsTableColumnSelection: "true" === get("enabledocumentstablecolumnselection"),
   };
 }
 

src/Shared/StorageUtility.ts

@@ -29,7 +29,6 @@ export enum StorageKey {
   GalleryCalloutDismissed,
   VisitedAccounts,
   PriorityLevel,
-  DocumentsTabPrefs,
   DefaultQueryResultsView,
   AppState,
 }

src/Utils/QueryUtils.ts

@@ -2,28 +2,18 @@ import { PartitionKey, PartitionKeyDefinition } from "@azure/cosmos";
 import * as DataModels from "../Contracts/DataModels";
 import * as ViewModels from "../Contracts/ViewModels";
 
-export const defaultQueryFields = ["id", "_self", "_rid", "_ts"];
-
 export function buildDocumentsQuery(
   filter: string,
   partitionKeyProperties: string[],
   partitionKey: DataModels.PartitionKey,
-  additionalField: string[] = [],
 ): string {
-  const fieldSet = new Set<string>(defaultQueryFields);
-  additionalField.forEach((prop) => fieldSet.add(prop));
-
-  const objectListSpec = [...fieldSet]
-    .filter((f) => !partitionKeyProperties.includes(f))
-    .map((prop) => `c.${prop}`)
-    .join(",");
   let query =
     partitionKeyProperties && partitionKeyProperties.length > 0
-      ? `select ${objectListSpec}, [${buildDocumentsQueryPartitionProjections(
+      ? `select c.id, c._self, c._rid, c._ts, [${buildDocumentsQueryPartitionProjections(
           "c",
           partitionKey,
         )}] as _partitionKeyValue from c`
-      : `select ${objectListSpec} from c`;
+      : `select c.id, c._self, c._rid, c._ts from c`;
 
   if (filter) {
     query += " " + filter;