Cleanup checkbox styles

Merge branch 'master' into users/languy/save-documentstab-prefs
Add more default filters (#1955 )
2025-12-23 02:41:39 +00:00 · 2024-09-05 11:40:14 +02:00 · 2024-09-05 09:41:58 +02:00 · 2024-09-05 07:16:48 +02:00 · 2024-09-04 13:07:27 -07:00 · 2024-09-04 11:35:32 -07:00
25 changed files with 1200 additions and 1437 deletions
--- a/less/documentDB.less
+++ b/less/documentDB.less
@@ -1906,8 +1906,14 @@ input::-webkit-calendar-picker-indicator::after {
 }

 .nav-tabs-margin {
-  padding-top: 5px;
+  height: 32px;
  background-color: #f2f2f2;
+
+  .nav-tabs {
+    display: flex;
+    align-items: flex-end;
+    height: 100%;
+  }
 }

 .navTabHeight {
--- a/less/documentDBFabric.less
+++ b/less/documentDBFabric.less
@@ -31,7 +31,6 @@ a:focus {
  margin-top: 0px;
  margin-bottom: 0px;
  background-color: #ffffff;
-  width: auto; // Override width: 100% coming from Allotment
 }

 .tabsManagerContainer {
--- a/package-lock.json
+++ b/package-lock.json
@@ -2527,13 +2527,13 @@
      }
    },
    "node_modules/@babel/preset-env/node_modules/babel-plugin-polyfill-corejs3": {
-      "version": "0.10.4",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.10.4.tgz",
-      "integrity": "sha512-25J6I8NGfa5YkCDogHRID3fVCadIR8/pGl1/spvCkzb6lVn6SR3ojpx9nOn9iEBcUsjY24AmdKm5khcfKdylcg==",
+      "version": "0.10.6",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.10.6.tgz",
+      "integrity": "sha512-b37+KR2i/khY5sKmWNVQAnitvquQbNdWy6lJdsr0kmquCKEEUgMKK4SboVM3HtfnZilfjr4MMQ7vY58FVWDtIA==",
      "dev": true,
      "dependencies": {
-        "@babel/helper-define-polyfill-provider": "^0.6.1",
-        "core-js-compat": "^3.36.1"
+        "@babel/helper-define-polyfill-provider": "^0.6.2",
+        "core-js-compat": "^3.38.0"
      },
      "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.3",
+      "version": "1.6.2",
      "license": "MIT",
      "dependencies": {
-        "@floating-ui/utils": "^0.2.3"
+        "@floating-ui/utils": "^0.2.0"
      }
    },
    "node_modules/@floating-ui/devtools": {
@@ -2945,15 +2945,15 @@
      }
    },
    "node_modules/@floating-ui/dom": {
-      "version": "1.6.6",
+      "version": "1.6.5",
      "license": "MIT",
      "dependencies": {
        "@floating-ui/core": "^1.0.0",
-        "@floating-ui/utils": "^0.2.3"
+        "@floating-ui/utils": "^0.2.0"
      }
    },
    "node_modules/@floating-ui/utils": {
-      "version": "0.2.3",
+      "version": "0.2.2",
      "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.27",
+        "@fluentui/react-window-provider": "^2.2.28",
        "@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.27",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-window-provider/-/react-window-provider-2.2.27.tgz",
-      "integrity": "sha512-Dg0G9bizjryV0Q/r0CPtCVTPa2II/EsT9E6JT3jPSALjQADDLlW4/+ZXbcEC7geZ/40+KpZDmhplvk/AJSFBKg==",
+      "version": "2.2.28",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-window-provider/-/react-window-provider-2.2.28.tgz",
+      "integrity": "sha512-YdZ74HTaoDwlvLDzoBST80/17ExIl93tLJpTxnqK5jlJOAUVQ+mxLPF2HQEJq+SZr5IMXHsQ56w/KaZVRn72YA==",
      "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.27",
+        "@fluentui/react-window-provider": "^2.2.28",
        "@fluentui/set-version": "^8.2.23",
        "tslib": "^2.1.0"
      },
@@ -14966,9 +14966,9 @@
      "license": "MIT"
    },
    "node_modules/browserslist": {
-      "version": "4.23.2",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.2.tgz",
-      "integrity": "sha512-qkqSyistMYdxAcw+CzbZwlBy8AGmS/eEWs+sEV5TnLRGDOL+C5M2EnH6tlZyg0YoAxGJAFKh61En9BR941GnHA==",
+      "version": "4.23.3",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.3.tgz",
+      "integrity": "sha512-btwCFJVjI4YWDNfau8RhZ+B1Q/VLoUITrm3RlP6y1tYGWIOa+InuYiRGXUBXo8nA1qKmHMyLB/iVQg5TT4eFoA==",
      "funding": [
        {
          "type": "opencollective",
@@ -14984,9 +14984,9 @@
        }
      ],
      "dependencies": {
-        "caniuse-lite": "^1.0.30001640",
-        "electron-to-chromium": "^1.4.820",
-        "node-releases": "^2.0.14",
+        "caniuse-lite": "^1.0.30001646",
+        "electron-to-chromium": "^1.5.4",
+        "node-releases": "^2.0.18",
        "update-browserslist-db": "^1.1.0"
      },
      "bin": {
@@ -15142,9 +15142,9 @@
      }
    },
    "node_modules/caniuse-lite": {
-      "version": "1.0.30001645",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001645.tgz",
-      "integrity": "sha512-GFtY2+qt91kzyMk6j48dJcwJVq5uTkk71XxE3RtScx7XWRLsO7bU44LOFkOZYR8w9YMS0UhPSYpN/6rAMImmLw==",
+      "version": "1.0.30001651",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001651.tgz",
+      "integrity": "sha512-9Cf+Xv1jJNe1xPZLGuUXLNkE1BoDkqRqYyFJ9TDYSqhduqA4hu4oR9HluGoWYQC/aj8WHjsGVV+bwkh0+tegRg==",
      "funding": [
        {
          "type": "opencollective",
@@ -16063,12 +16063,12 @@
      "license": "MIT"
    },
    "node_modules/core-js-compat": {
-      "version": "3.37.1",
-      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.37.1.tgz",
-      "integrity": "sha512-9TNiImhKvQqSUkOvk/mMRZzOANTiEVC7WaBNhHcKM7x+/5E1l5NvsysR19zuDQScE8k+kfQXWRN3AtS/eOSHpg==",
+      "version": "3.38.0",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.38.0.tgz",
+      "integrity": "sha512-75LAicdLa4OJVwFxFbQR3NdnZjNgX6ILpVcVzcC4T2smerB5lELMrJQQQoWV6TiuC/vlaFqgU2tKQx9w5s0e0A==",
      "dev": true,
      "dependencies": {
-        "browserslist": "^4.23.0"
+        "browserslist": "^4.23.3"
      },
      "funding": {
        "type": "opencollective",
--- a/src/ConfigContext.ts
+++ b/src/ConfigContext.ts
@@ -87,7 +87,7 @@ let configContext: Readonly<ConfigContext> = {
    `^https:\\/\\/.*\\.analysis-df\\.net$`,
    `^https:\\/\\/.*\\.analysis-df\\.windows\\.net$`,
    `^https:\\/\\/.*\\.azure-test\\.net$`,
-    `^https:\\/\\/cosmos-explorer-preview\\.azurewebsites\\.net`,
+    `^https:\\/\\/cosmos-explorer-preview\\.azurewebsites\\.net$`,
  ], // Webpack injects this at build time
  gitSha: process.env.GIT_SHA,
  hostedExplorerURL: "https://cosmos.azure.com/",
--- a/src/Explorer/Controls/TreeComponent/Styles.ts
+++ b/src/Explorer/Controls/TreeComponent/Styles.ts
@@ -17,7 +17,7 @@ export const useTreeStyles = makeStyles({
    minWidth: "100%",
    rowGap: "0px",
    paddingTop: "0px",
-    [treeIconWidth]: "20px",
+    [treeIconWidth]: "16px",
    [leafNodeSpacing]: "24px",
  },
  nodeIcon: {
@@ -32,7 +32,6 @@ export const useTreeStyles = makeStyles({
    fontSize: tokens.fontSizeBase300,
    height: tokens.layoutRowHeight,
    ...cosmosShorthands.borderBottom(),
-    paddingLeft: `calc(var(${treeItemLevelToken}, 1) * ${tokens.spacingHorizontalXXL})`,

    // Some sneaky CSS variables stuff to change the background color of the action button on hover.
    [actionButtonBackground]: tokens.colorNeutralBackground1,
--- a/src/Explorer/Controls/TreeComponent/TreeNodeComponent.tsx
+++ b/src/Explorer/Controls/TreeComponent/TreeNodeComponent.tsx
@@ -149,15 +149,16 @@ export const TreeNodeComponent: React.FC<TreeNodeComponentProps> = ({

  // We use the expandIcon slot to hold the node icon too.
  // We only show a node icon for leaf nodes, even if a branch node has an iconSrc.
-  const expandIcon = isLoading ? (
-    <Spinner size="extra-tiny" />
-  ) : !isBranch ? (
-    typeof node.iconSrc === "string" ? (
+  const treeIcon =
+    node.iconSrc === undefined ? undefined : typeof node.iconSrc === "string" ? (
      <img src={node.iconSrc} className={treeStyles.nodeIcon} alt="" />
    ) : (
      node.iconSrc
-    )
-  ) : openItems.includes(treeNodeId) ? (
+    );
+
+  const expandIcon = isLoading ? (
+    <Spinner size="extra-tiny" />
+  ) : !isBranch ? undefined : openItems.includes(treeNodeId) ? (
    <ChevronDown20Regular data-test="TreeNode/CollapseIcon" />
  ) : (
    <ChevronRight20Regular data-text="TreeNode/ExpandIcon" />
@@ -174,7 +175,6 @@ export const TreeNodeComponent: React.FC<TreeNodeComponentProps> = ({
      <TreeItemLayout
        className={mergeClasses(
          treeStyles.treeItemLayout,
-          expandIcon ? undefined : treeStyles.treeItemLayoutNoIcon,
          shouldShowAsSelected && treeStyles.selectedItem,
          node.className && treeStyles[node.className],
        )}
@@ -200,6 +200,7 @@ export const TreeNodeComponent: React.FC<TreeNodeComponentProps> = ({
            ),
          }
        }
+        iconBefore={treeIcon}
        expandIcon={expandIcon}
      >
        <span className={treeStyles.nodeLabel}>{node.label}</span>
--- a/src/Explorer/Controls/TreeComponent/snapshots/TreeNodeComponent.test.tsx.snap
+++ b/src/Explorer/Controls/TreeComponent/snapshots/TreeNodeComponent.test.tsx.snap
@@ -10,13 +10,20 @@ exports[`TreeNodeComponent does not render children if the node is loading 1`] =
 >
  <TreeItemLayout
    actions={false}
-    className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
+    className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
    data-test="TreeNode:root"
    expandIcon={
      <ChevronRight20Regular
        data-text="TreeNode/ExpandIcon"
      />
    }
+    iconBefore={
+      <img
+        alt=""
+        className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+        src="rootIcon"
+      />
+    }
  >
    <span
      className="___1h29e9h_0000000 fz5stix"
@@ -156,7 +163,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
            "itemType": "branch",
            "layoutRef": {
              "current": <div
-                class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                class="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                data-test="TreeNode:root"
              >
                <div
@@ -179,6 +186,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                    />
                  </svg>
                </div>
+                <div
+                  aria-hidden="true"
+                  class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                >
+                  <img
+                    alt=""
+                    class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+                    src="rootIcon"
+                  />
+                </div>
                <div
                  class="fui-TreeItemLayout__main rklbe47"
                >
@@ -208,7 +225,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                tabindex="-1"
              >
                <div
-                  class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                  class="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                  data-test="TreeNode:root"
                >
                  <div
@@ -231,6 +248,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                      />
                    </svg>
                  </div>
+                  <div
+                    aria-hidden="true"
+                    class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                  >
+                    <img
+                      alt=""
+                      class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+                      src="rootIcon"
+                    />
+                  </div>
                  <div
                    class="fui-TreeItemLayout__main rklbe47"
                  >
@@ -242,7 +269,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                  </div>
                </div>
                <div
-                  class="fui-Tree rnv2ez3 ___jy13a00_lpffjy0 f1acs6jw f11qra4b fepn2xe f1nbblvp fhxm7u5 fzz4f4n"
+                  class="fui-Tree rnv2ez3 ___17a32do_7zrvj80 f1acs6jw f11qra4b fepn2xe f1nbblvp f19d5ny4 fzz4f4n"
                  data-test="Tree:root"
                  role="tree"
                >
@@ -256,7 +283,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                    tabindex="0"
                  >
                    <div
-                      class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                      class="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                      data-test="TreeNode:root/child1Label"
                    >
                      <div
@@ -279,6 +306,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                          />
                        </svg>
                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                      >
+                        <img
+                          alt=""
+                          class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+                          src="child1Icon"
+                        />
+                      </div>
                      <div
                        class="fui-TreeItemLayout__main rklbe47"
                      >
@@ -300,7 +337,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                    tabindex="-1"
                  >
                    <div
-                      class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                      class="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                      data-test="TreeNode:root/child2LoadingLabel"
                    >
                      <div
@@ -323,6 +360,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                          />
                        </svg>
                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                      >
+                        <img
+                          alt=""
+                          class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+                          src="child2LoadingIcon"
+                        />
+                      </div>
                      <div
                        class="fui-TreeItemLayout__main rklbe47"
                      >
@@ -343,7 +390,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                    tabindex="-1"
                  >
                    <div
-                      class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vrg09j fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                      class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_vz3p260 fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                      data-test="TreeNode:root/child3ExpandingLabel"
                    >
                      <div
@@ -363,6 +410,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                          </span>
                        </div>
                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                      >
+                        <img
+                          alt=""
+                          class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+                          src="child3ExpandingIcon"
+                        />
+                      </div>
                      <div
                        class="fui-TreeItemLayout__main rklbe47"
                      >
@@ -383,16 +440,23 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
      >
        <TreeItemLayout
          actions={false}
-          className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
+          className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
          data-test="TreeNode:root"
          expandIcon={
            <ChevronRight20Regular
              data-text="TreeNode/ExpandIcon"
            />
          }
+          iconBefore={
+            <img
+              alt=""
+              className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+              src="rootIcon"
+            />
+          }
        >
          <div
-            className="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+            className="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
            data-test="TreeNode:root"
          >
            <div
@@ -419,6 +483,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                </svg>
              </ChevronRight20Regular>
            </div>
+            <div
+              aria-hidden={true}
+              className="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+            >
+              <img
+                alt=""
+                className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+                src="rootIcon"
+              />
+            </div>
            <div
              className="fui-TreeItemLayout__main rklbe47"
            >
@@ -431,7 +505,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
          </div>
        </TreeItemLayout>
        <Tree
-          className="___jy13a00_0000000 f1acs6jw f11qra4b fepn2xe f1nbblvp fhxm7u5 fzz4f4n"
+          className="___17a32do_0000000 f1acs6jw f11qra4b fepn2xe f1nbblvp f19d5ny4 fzz4f4n"
          data-test="Tree:root"
        >
          <TreeProvider
@@ -499,7 +573,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
              }
            >
              <div
-                className="fui-Tree rnv2ez3 ___jy13a00_lpffjy0 f1acs6jw f11qra4b fepn2xe f1nbblvp fhxm7u5 fzz4f4n"
+                className="fui-Tree rnv2ez3 ___17a32do_7zrvj80 f1acs6jw f11qra4b fepn2xe f1nbblvp f19d5ny4 fzz4f4n"
                data-test="Tree:root"
                role="tree"
              >
@@ -587,7 +661,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                            "itemType": "branch",
                            "layoutRef": {
                              "current": <div
-                                class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                                class="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                                data-test="TreeNode:root/child1Label"
                              >
                                <div
@@ -610,6 +684,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                    />
                                  </svg>
                                </div>
+                                <div
+                                  aria-hidden="true"
+                                  class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                                >
+                                  <img
+                                    alt=""
+                                    class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+                                    src="child1Icon"
+                                  />
+                                </div>
                                <div
                                  class="fui-TreeItemLayout__main rklbe47"
                                >
@@ -639,7 +723,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                tabindex="0"
                              >
                                <div
-                                  class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                                  class="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                                  data-test="TreeNode:root/child1Label"
                                >
                                  <div
@@ -662,6 +746,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                      />
                                    </svg>
                                  </div>
+                                  <div
+                                    aria-hidden="true"
+                                    class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                                  >
+                                    <img
+                                      alt=""
+                                      class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+                                      src="child1Icon"
+                                    />
+                                  </div>
                                  <div
                                    class="fui-TreeItemLayout__main rklbe47"
                                  >
@@ -680,16 +774,23 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                      >
                        <TreeItemLayout
                          actions={false}
-                          className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
+                          className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                          data-test="TreeNode:root/child1Label"
                          expandIcon={
                            <ChevronRight20Regular
                              data-text="TreeNode/ExpandIcon"
                            />
                          }
+                          iconBefore={
+                            <img
+                              alt=""
+                              className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+                              src="child1Icon"
+                            />
+                          }
                        >
                          <div
-                            className="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                            className="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                            data-test="TreeNode:root/child1Label"
                          >
                            <div
@@ -716,6 +817,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                </svg>
                              </ChevronRight20Regular>
                            </div>
+                            <div
+                              aria-hidden={true}
+                              className="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                            >
+                              <img
+                                alt=""
+                                className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+                                src="child1Icon"
+                              />
+                            </div>
                            <div
                              className="fui-TreeItemLayout__main rklbe47"
                            >
@@ -728,7 +839,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                          </div>
                        </TreeItemLayout>
                        <Tree
-                          className="___jy13a00_0000000 f1acs6jw f11qra4b fepn2xe f1nbblvp fhxm7u5 fzz4f4n"
+                          className="___17a32do_0000000 f1acs6jw f11qra4b fepn2xe f1nbblvp f19d5ny4 fzz4f4n"
                          data-test="Tree:root/child1Label"
                        >
                          <TreeProvider
@@ -821,7 +932,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                            "itemType": "branch",
                            "layoutRef": {
                              "current": <div
-                                class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                                class="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                                data-test="TreeNode:root/child2LoadingLabel"
                              >
                                <div
@@ -844,6 +955,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                    />
                                  </svg>
                                </div>
+                                <div
+                                  aria-hidden="true"
+                                  class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                                >
+                                  <img
+                                    alt=""
+                                    class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+                                    src="child2LoadingIcon"
+                                  />
+                                </div>
                                <div
                                  class="fui-TreeItemLayout__main rklbe47"
                                >
@@ -873,7 +994,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                tabindex="-1"
                              >
                                <div
-                                  class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                                  class="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                                  data-test="TreeNode:root/child2LoadingLabel"
                                >
                                  <div
@@ -896,6 +1017,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                      />
                                    </svg>
                                  </div>
+                                  <div
+                                    aria-hidden="true"
+                                    class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                                  >
+                                    <img
+                                      alt=""
+                                      class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+                                      src="child2LoadingIcon"
+                                    />
+                                  </div>
                                  <div
                                    class="fui-TreeItemLayout__main rklbe47"
                                  >
@@ -914,16 +1045,23 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                      >
                        <TreeItemLayout
                          actions={false}
-                          className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
+                          className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                          data-test="TreeNode:root/child2LoadingLabel"
                          expandIcon={
                            <ChevronRight20Regular
                              data-text="TreeNode/ExpandIcon"
                            />
                          }
+                          iconBefore={
+                            <img
+                              alt=""
+                              className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+                              src="child2LoadingIcon"
+                            />
+                          }
                        >
                          <div
-                            className="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                            className="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                            data-test="TreeNode:root/child2LoadingLabel"
                          >
                            <div
@@ -950,6 +1088,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                </svg>
                              </ChevronRight20Regular>
                            </div>
+                            <div
+                              aria-hidden={true}
+                              className="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                            >
+                              <img
+                                alt=""
+                                className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+                                src="child2LoadingIcon"
+                              />
+                            </div>
                            <div
                              className="fui-TreeItemLayout__main rklbe47"
                            >
@@ -1039,7 +1187,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                            "itemType": "leaf",
                            "layoutRef": {
                              "current": <div
-                                class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vrg09j fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                                class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_vz3p260 fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                                data-test="TreeNode:root/child3ExpandingLabel"
                              >
                                <div
@@ -1059,6 +1207,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                    </span>
                                  </div>
                                </div>
+                                <div
+                                  aria-hidden="true"
+                                  class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                                >
+                                  <img
+                                    alt=""
+                                    class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+                                    src="child3ExpandingIcon"
+                                  />
+                                </div>
                                <div
                                  class="fui-TreeItemLayout__main rklbe47"
                                >
@@ -1087,7 +1245,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                tabindex="-1"
                              >
                                <div
-                                  class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vrg09j fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                                  class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_vz3p260 fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                                  data-test="TreeNode:root/child3ExpandingLabel"
                                >
                                  <div
@@ -1107,6 +1265,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                      </span>
                                    </div>
                                  </div>
+                                  <div
+                                    aria-hidden="true"
+                                    class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                                  >
+                                    <img
+                                      alt=""
+                                      class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+                                      src="child3ExpandingIcon"
+                                    />
+                                  </div>
                                  <div
                                    class="fui-TreeItemLayout__main rklbe47"
                                  >
@@ -1125,9 +1293,9 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                      >
                        <TreeItemLayout
                          actions={false}
-                          className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
+                          className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                          data-test="TreeNode:root/child3ExpandingLabel"
-                          expandIcon={
+                          iconBefore={
                            <img
                              alt=""
                              className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
@@ -1136,12 +1304,12 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                          }
                        >
                          <div
-                            className="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vrg09j fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                            className="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_vz3p260 fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                            data-test="TreeNode:root/child3ExpandingLabel"
                          >
                            <div
                              aria-hidden={true}
-                              className="fui-TreeItemLayout__expandIcon rh4pu5o"
+                              className="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
                            >
                              <img
                                alt=""
@@ -1184,9 +1352,9 @@ exports[`TreeNodeComponent renders a loading spinner if the node is loading: loa
 >
  <TreeItemLayout
    actions={false}
-    className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
+    className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
    data-test="TreeNode:root"
-    expandIcon={
+    iconBefore={
      <img
        alt=""
        className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
@@ -1213,13 +1381,20 @@ exports[`TreeNodeComponent renders a loading spinner if the node is loading: loa
 >
  <TreeItemLayout
    actions={false}
-    className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
+    className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
    data-test="TreeNode:root"
    expandIcon={
      <Spinner
        size="extra-tiny"
      />
    }
+    iconBefore={
+      <img
+        alt=""
+        className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+        src="rootIcon"
+      />
+    }
  >
    <span
      className="___1h29e9h_0000000 fz5stix"
@@ -1240,13 +1415,20 @@ exports[`TreeNodeComponent renders a node as expandable if it has empty, but def
 >
  <TreeItemLayout
    actions={false}
-    className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
+    className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
    data-test="TreeNode:root"
    expandIcon={
      <ChevronRight20Regular
        data-text="TreeNode/ExpandIcon"
      />
    }
+    iconBefore={
+      <img
+        alt=""
+        className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+        src="rootIcon"
+      />
+    }
  >
    <span
      className="___1h29e9h_0000000 fz5stix"
@@ -1313,9 +1495,9 @@ exports[`TreeNodeComponent renders a node with a menu 1`] = `
            "className": "___1r8p62d_0000000 f1xg1ack f1e31b4d",
          }
        }
-        className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
+        className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
        data-test="TreeNode:root"
-        expandIcon={
+        iconBefore={
          <img
            alt=""
            className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
@@ -1363,9 +1545,9 @@ exports[`TreeNodeComponent renders a single node 1`] = `
 >
  <TreeItemLayout
    actions={false}
-    className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
+    className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
    data-test="TreeNode:root"
-    expandIcon={
+    iconBefore={
      <img
        alt=""
        className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
@@ -1392,9 +1574,9 @@ exports[`TreeNodeComponent renders an icon if the node has one 1`] = `
 >
  <TreeItemLayout
    actions={false}
-    className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
+    className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
    data-test="TreeNode:root"
-    expandIcon={
+    iconBefore={
      <img
        alt=""
        className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
@@ -1421,13 +1603,20 @@ exports[`TreeNodeComponent renders selected parent node as selected if no descen
 >
  <TreeItemLayout
    actions={false}
-    className="___kqkdor0_ihxn0o0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1nfm20t f1do9gdl"
+    className="___rq9vxg0_1ykn2d2 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1nfm20t f1do9gdl"
    data-test="TreeNode:root"
    expandIcon={
      <ChevronRight20Regular
        data-text="TreeNode/ExpandIcon"
      />
    }
+    iconBefore={
+      <img
+        alt=""
+        className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+        src="rootIcon"
+      />
+    }
  >
    <span
      className="___1h29e9h_0000000 fz5stix"
@@ -1436,7 +1625,7 @@ exports[`TreeNodeComponent renders selected parent node as selected if no descen
    </span>
  </TreeItemLayout>
  <Tree
-    className="___jy13a00_0000000 f1acs6jw f11qra4b fepn2xe f1nbblvp fhxm7u5 fzz4f4n"
+    className="___17a32do_0000000 f1acs6jw f11qra4b fepn2xe f1nbblvp f19d5ny4 fzz4f4n"
    data-test="Tree:root"
  >
    <TreeNodeComponent
@@ -1497,13 +1686,20 @@ exports[`TreeNodeComponent renders selected parent node as unselected if any des
 >
  <TreeItemLayout
    actions={false}
-    className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
+    className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
    data-test="TreeNode:root"
    expandIcon={
      <ChevronRight20Regular
        data-text="TreeNode/ExpandIcon"
      />
    }
+    iconBefore={
+      <img
+        alt=""
+        className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+        src="rootIcon"
+      />
+    }
  >
    <span
      className="___1h29e9h_0000000 fz5stix"
@@ -1512,7 +1708,7 @@ exports[`TreeNodeComponent renders selected parent node as unselected if any des
    </span>
  </TreeItemLayout>
  <Tree
-    className="___jy13a00_0000000 f1acs6jw f11qra4b fepn2xe f1nbblvp fhxm7u5 fzz4f4n"
+    className="___17a32do_0000000 f1acs6jw f11qra4b fepn2xe f1nbblvp f19d5ny4 fzz4f4n"
    data-test="Tree:root"
  >
    <TreeNodeComponent
@@ -1574,9 +1770,9 @@ exports[`TreeNodeComponent renders single selected leaf node as selected 1`] = `
 >
  <TreeItemLayout
    actions={false}
-    className="___kqkdor0_ihxn0o0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1nfm20t f1do9gdl"
+    className="___rq9vxg0_1ykn2d2 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1nfm20t f1do9gdl"
    data-test="TreeNode:root"
-    expandIcon={
+    iconBefore={
      <img
        alt=""
        className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
--- a/src/Explorer/Explorer.tsx
+++ b/src/Explorer/Explorer.tsx
@@ -1119,7 +1119,7 @@ export default class Explorer {
    }
  }

-  public openUploadItemsPanePane(): void {
+  public openUploadItemsPane(): void {
    useSidePanel.getState().openSidePanel("Upload " + getUploadName(), <UploadItemsPane />);
  }
  public openExecuteSprocParamsPanel(storedProcedure: StoredProcedure): void {
--- a/src/Explorer/Panes/TableColumnSelectionPane/TableColumnSelectionPane.tsx
+++ b/src/Explorer/Panes/TableColumnSelectionPane/TableColumnSelectionPane.tsx
@@ -0,0 +1,148 @@
+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>
+  );
+};
--- a/src/Explorer/Sidebar.tsx
+++ b/src/Explorer/Sidebar.tsx
@@ -86,7 +86,7 @@ const useSidebarStyles = makeStyles({
    },
  },
  globalCommandsMenuButton: {
-    display: "initial",
+    display: "inline-flex",
    "@container (min-width: 250px)": {
      display: "none",
    },
@@ -280,7 +280,7 @@ export const SidebarContainer: React.FC<SidebarProps> = ({ explorer }) => {
      {/* Collections Tree - Start */}
      {hasSidebar && (
        // When collapsed, we force the pane to 24 pixels wide and make it non-resizable.
-        <Allotment.Pane minSize={24} preferredSize={300}>
+        <Allotment.Pane minSize={24} preferredSize={250}>
          <CosmosFluentProvider className={mergeClasses(styles.sidebar)}>
            <div className={styles.sidebarContainer}>
              {loading && (
--- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil.ts
+++ b/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";
@@ -11,11 +12,16 @@ 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" };

 /**
 *
--- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.test.tsx
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.test.tsx
@@ -92,7 +92,13 @@ 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(buildQuery(false, "")).toContain("select");
+      expect(
+        buildQuery(false, "", ["pk"], {
+          paths: ["pk"],
+          kind: "Hash",
+          version: 2,
+        }),
+      ).toContain("select");
    });
  });

--- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
@@ -1,10 +1,9 @@
 import { Item, ItemDefinition, PartitionKey, PartitionKeyDefinition, QueryIterator, Resource } from "@azure/cosmos";
 import { Button, Input, TableRowId, makeStyles, shorthands } from "@fluentui/react-components";
-import { ArrowClockwise16Filled, Dismiss16Filled } from "@fluentui/react-icons";
+import { 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,
@@ -21,11 +20,14 @@ 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";
@@ -51,11 +53,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 { extractPartitionKeyValues } from "../../../Utils/QueryUtils";
+import { defaultQueryFields, extractPartitionKeyValues } from "../../../Utils/QueryUtils";
 import DocumentId from "../../Tree/DocumentId";
 import ObjectId from "../../Tree/ObjectId";
 import TabsBase from "../TabsBase";
-import { DocumentsTableComponent, DocumentsTableComponentItem } from "./DocumentsTableComponent";
+import { ColumnDefinition, 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

@@ -101,17 +103,6 @@ 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 {
@@ -281,7 +272,7 @@ const createUploadButton = (container: Explorer): CommandButtonComponentProps =>
    iconAlt: label,
    onCommandClick: () => {
      const selectedCollection: ViewModels.Collection = useSelectedNode.getState().findSelectedCollection();
-      selectedCollection && container.openUploadItemsPanePane();
+      selectedCollection && container.openUploadItemsPane();
    },
    commandButtonLabel: label,
    ariaLabel: label,
@@ -469,17 +460,33 @@ 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 || "{}";
  }

-  return QueryUtils.buildDocumentsQuery(filter, partitionKeyProperties, partitionKey);
+  // Filter out fields starting with "/" (partition keys)
+  return QueryUtils.buildDocumentsQuery(
+    filter,
+    partitionKeyProperties,
+    partitionKey,
+    additionalField?.filter((f) => !f.startsWith("/")) || [],
+  );
 };

 /**
@@ -516,9 +523,18 @@ export interface IDocumentsTabComponentProps {

 const getUniqueId = (collection: ViewModels.CollectionBase): string => `${collection.databaseId}-${collection.id()}`;

-const defaultSqlFilters = ['WHERE c.id = "foo"', "ORDER BY c._ts DESC", 'WHERE c.id = "foo" ORDER BY c._ts DESC'];
+const getDefaultSqlFilters = (partitionKeys: string[]) =>
+  ['WHERE c.id = "foo"', "ORDER BY c._ts DESC", 'WHERE c.id = "foo" ORDER BY c._ts DESC', "ORDER BY c._ts ASC"].concat(
+    partitionKeys.map((partitionKey) => `WHERE c.${partitionKey} = "foo"`),
+  );
 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,
@@ -537,7 +553,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<DocumentId[]>([]);
+  const [documentIds, setDocumentIds] = useState<ExtendedDocumentId[]>([]);
  const [isExecuting, setIsExecuting] = useState<boolean>(false);
  const filterInput = useRef<HTMLInputElement>(null);
  const styles = useDocumentsTabStyles();
@@ -568,7 +584,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone

  // State
  const [tabStateData, setTabStateData] = useState<TabDivider>(() =>
-    readSubComponentState(SubComponentName.MainTabDivider, _collection, {
+    readSubComponentState<TabDivider>(SubComponentName.MainTabDivider, _collection, {
      leftPaneWidthPercent: 35,
    }),
  );
@@ -582,8 +598,8 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
  const [continuationToken, setContinuationToken] = useState<string>(undefined);

  // User's filter history
-  const [lastFilterContents, setLastFilterContents] = useState<string[]>(() =>
-    readSubComponentState(SubComponentName.FilterHistory, _collection, []),
+  const [lastFilterContents, setLastFilterContents] = useState<FilterHistory>(() =>
+    readSubComponentState<FilterHistory>(SubComponentName.FilterHistory, _collection, [] as FilterHistory),
  );

  const setKeyboardActions = useKeyboardActionGroup(KeyboardActionGroup.ACTIVE_TAB);
@@ -632,10 +648,37 @@ 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[]) =>
-      new DocumentId(
+    (
+      rawDocument: DataModels.DocumentId,
+      partitionKeyProperties: string[],
+      partitionKeyValue: string[],
+    ): ExtendedDocumentId => {
+      const extendedDocumentId = new DocumentId(
        {
          partitionKey,
          partitionKeyProperties,
@@ -645,7 +688,10 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
        },
        rawDocument,
        partitionKeyValue,
-      ),
+      ) as ExtendedDocumentId;
+      extendedDocumentId.tableFields = { ...rawDocument };
+      return extendedDocumentId;
+    },
    [partitionKey],
  );

@@ -807,6 +853,10 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone

          setDocumentIds(ids);
          setEditorState(ViewModels.DocumentExplorerState.existingDocumentNoEdits);
+
+          // Update column choices
+          setColumnDefinitionsFromDocument(savedDocument);
+
          TelemetryProcessor.traceSuccess(
            Action.CreateDocument,
            {
@@ -889,6 +939,10 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
            },
            startKey,
          );
+
+          // Update column choices
+          selectedDocumentId.tableFields = { ...documentContent };
+          setColumnDefinitionsFromDocument(documentContent);
        },
        (error) => {
          onExecutionErrorChange(true);
@@ -1090,7 +1144,13 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
    const _queryAbortController = new AbortController();
    setQueryAbortController(_queryAbortController);
    const filter: string = filterContent.trim();
-    const query: string = buildQuery(isPreferredApiMongoDB, filter, partitionKeyProperties, partitionKey);
+    const query: string = buildQuery(
+      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'.
@@ -1113,6 +1173,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
    resourceTokenPartitionKey,
    isQueryCopilotSampleContainer,
    _collection,
+    selectedColumnIds,
  ]);

  const onHideFilterClick = (): void => {
@@ -1258,16 +1319,6 @@ 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;
@@ -1299,9 +1350,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone

  // Table config here
  const tableItems: DocumentsTableComponentItem[] = documentIds.map((documentId) => {
-    const item: Record<string, string> & { id: string } = {
-      id: documentId.id(),
-    };
+    const item: DocumentsTableComponentItem = documentId.tableFields || { id: documentId.id() };

    if (partitionKeyPropertyHeaders && documentId.stringPartitionKeyValues) {
      for (let i = 0; i < partitionKeyPropertyHeaders.length; i++) {
@@ -1312,6 +1361,44 @@ 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
@@ -1327,6 +1414,9 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
    (_isQueryCopilotSampleContainer ? readSampleDocument(documentId) : readDocument(_collection, documentId)).then(
      (content) => {
        initDocumentEditor(documentId, content);
+
+        // Update columns
+        setColumnDefinitionsFromDocument(content);
      },
    );

@@ -1417,10 +1507,22 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
    return () => resizeObserver.disconnect(); // clean up
  }, []);

-  const columnHeaders = {
-    idHeader: isPreferredApiMongoDB ? "_id" : "id",
-    partitionKeyHeaders: (showPartitionKey(_collection, isPreferredApiMongoDB) && partitionKeyPropertyHeaders) || [],
-  };
+  // Column definition is a map<id, ColumnDefinition> to garantee uniqueness
+  const [columnDefinitions, setColumnDefinitions] = useState<ColumnDefinition[]>(() => {
+    const persistedColumnsSelection = readSubComponentState<ColumnsSelection>(
+      SubComponentName.ColumnsSelection,
+      _collection,
+      undefined,
+    );
+
+    if (!persistedColumnsSelection) {
+      return extractColumnDefinitionsFromDocument({
+        id: "id",
+      });
+    }
+
+    return persistedColumnsSelection.columnDefinitions;
+  });

  const onSelectedRowsChange = (selectedRows: Set<TableRowId>) => {
    confirmDiscardingChange(() => {
@@ -1652,7 +1754,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
      setIsExecuting(true);
      onExecutionErrorChange(false);
      const filter: string = filterContent.trim();
-      const query: string = buildQuery(isPreferredApiMongoDB, filter);
+      const query: string = buildQuery(isPreferredApiMongoDB, filter, selectedColumnIds);

      return MongoProxyClient.queryDocuments(
        _collection.databaseId,
@@ -1718,7 +1820,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
    const limitedLastFilterContents = lastFilterContents.slice(0, MAX_FILTER_HISTORY_COUNT);

    setLastFilterContents(limitedLastFilterContents);
-    saveSubComponentState(SubComponentName.FilterHistory, _collection, lastFilterContents);
+    saveSubComponentState<FilterHistory>(SubComponentName.FilterHistory, _collection, lastFilterContents);
  };

  const refreshDocumentsGrid = useCallback(
@@ -1751,6 +1853,41 @@ 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" }}>
@@ -1800,7 +1937,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
                <datalist id={`filtersList-${getUniqueId(_collection)}`}>
                  {addStringsNoDuplicate(
                    lastFilterContents,
-                    isPreferredApiMongoDB ? defaultMongoFilters : defaultSqlFilters,
+                    isPreferredApiMongoDB ? defaultMongoFilters : getDefaultSqlFilters(partitionKeyProperties),
                  ).map((filter) => (
                    <option key={filter} value={filter} />
                  ))}
@@ -1845,42 +1982,40 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
          <Allotment
            onDragEnd={(sizes: number[]) => {
              tabStateData.leftPaneWidthPercent = (100 * sizes[0]) / (sizes[0] + sizes[1]);
-              saveSubComponentState(SubComponentName.MainTabDivider, _collection, tabStateData);
+              saveSubComponentState<TabDivider>(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.floatingControlsContainer}>
-                  <div className={styles.floatingControls}>
-                    <Button
-                      appearance="transparent"
-                      aria-label="Refresh"
-                      size="small"
-                      icon={<ArrowClockwise16Filled />}
-                      style={{
-                        color: StyleConstants.AccentMedium,
-                      }}
-                      onClick={() => refreshDocumentsGrid(false)}
-                      onKeyDown={onRefreshKeyInput}
+                <div className={styles.tableContainer}>
+                  <div
+                    style={
+                      {
+                        height: "100%",
+                        width: `calc(100% + ${calculateOffset(selectedColumnIds.length)}px)`,
+                      } /* Fix to make table not resize beyond parent's width */
+                    }
+                  >
+                    <DocumentsTableComponent
+                      onRefreshTable={() => refreshDocumentsGrid(false)}
+                      items={tableItems}
+                      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}
--- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.test.tsx
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.test.tsx
@@ -21,15 +21,19 @@ describe("DocumentsTableComponent", () => {
      height: 0,
      width: 0,
    },
-    columnHeaders: {
-      idHeader: ID_HEADER,
-      partitionKeyHeaders: [PARTITION_KEY_HEADER],
-    },
-    isSelectionDisabled: false,
+    columnDefinitions: [
+      { id: ID_HEADER, label: "ID", isPartitionKey: false },
+      { id: PARTITION_KEY_HEADER, label: "Partition Key", isPartitionKey: true },
+    ],
+    isRowSelectionDisabled: 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", () => {
@@ -40,7 +44,7 @@ describe("DocumentsTableComponent", () => {

  it("should not render selection column when isSelectionDisabled is true", () => {
    const props: IDocumentsTableComponentProps = createMockProps();
-    props.isSelectionDisabled = true;
+    props.isRowSelectionDisabled = true;
    const wrapper = mount(<DocumentsTableComponent {...props} />);
    expect(wrapper).toMatchSnapshot();
  });
--- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
@@ -1,30 +1,48 @@
 import {
-  createTableColumn,
+  Button,
  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,
@@ -32,29 +50,37 @@ 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>;
+} & Record<string, string | number>;

-export type ColumnHeaders = {
-  idHeader: string;
-  partitionKeyHeaders: string[];
+export type ColumnDefinition = {
+  id: string;
+  label: 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 };
-  columnHeaders: ColumnHeaders;
+  selectedColumnIds: string[];
+  columnDefinitions: ColumnDefinition[];
  style?: React.CSSProperties;
-  isSelectionDisabled?: boolean;
+  isRowSelectionDisabled?: boolean;
  collection: ViewModels.CollectionBase;
+  onColumnSelectionChange?: (newSelectedColumnIds: string[]) => void;
+  defaultColumnSelection?: string[];
+  isColumnSelectionDisabled?: boolean;
 }

 interface TableRowData extends RowStateBase<DocumentsTableComponentItem> {
@@ -67,25 +93,33 @@ 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,
-  columnHeaders,
-  isSelectionDisabled,
+  selectedColumnIds,
+  columnDefinitions,
+  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 = {};
-    columnIds.forEach((columnId) => {
+    selectedColumnIds.forEach((columnId) => {
      if (
        !columnSizesMap ||
        !columnSizesMap[columnId] ||
@@ -103,7 +137,24 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
    return columnSizesPx;
  });

-  const styles = useDocumentsTabStyles();
+  const [sortState, setSortState] = React.useState<{
+    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) => {
@@ -122,42 +173,123 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
        return acc;
      }, {} as ColumnSizesMap);

-      saveSubComponentState(SubComponentName.ColumnSizes, collection, persistentSizes, true);
+      saveSubComponentState<ColumnSizesMap>(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(
    () =>
-      [
-        createTableColumn<DocumentsTableComponentItem>({
-          columnId: "id",
-          compare: (a, b) => a.id.localeCompare(b.id),
-          renderHeaderCell: () => columnHeaders.idHeader,
+      columnDefinitions
+        .filter((column) => selectedColumnIds.includes(column.id))
+        .map((column) => ({
+          columnId: column.id,
+          compare: (a, b) => {
+            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.id}>
-              {item.id}
+            <TableCellLayout truncate title={`${item[column.id]}`}>
+              {item[column.id]}
            </TableCellLayout>
          ),
-        }),
-      ].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],
+        })),
+    [columnDefinitions, onColumnSelectionChange, selectedColumnIds],
  );

  const [selectionStartIndex, setSelectionStartIndex] = React.useState<number>(INITIAL_SELECTED_ROW_INDEX);
@@ -247,6 +379,7 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
    columnSizing_unstable: columnSizing,
    tableRef,
    selection: { allRowsSelected, someRowsSelected, toggleAllRows, toggleRow, isRowSelected },
+    sort: { getSortDirection, setColumnSort, sort },
  } = useTableFeatures(
    {
      columns,
@@ -260,25 +393,36 @@ 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 rows: TableRowData[] = 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 headerSortProps = (columnId: TableColumnId) => ({
+    // onClick: (e: React.MouseEvent) => toggleColumnSort(e, columnId),
+    sortDirection: getSortDirection(columnId),
  });

+  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 === " ") {
@@ -304,37 +448,50 @@ 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 {...tableProps}>
+    <Table noNativeElements sortable {...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 /* index */) => (
-            <Menu openOnContext key={column.columnId}>
-              <MenuTrigger>
-                <TableHeaderCell
-                  className={styles.tableCell}
-                  key={column.columnId}
-                  {...columnSizing.getTableHeaderCellProps(column.columnId)}
-                >
-                  {column.renderHeaderCell()}
-                </TableHeaderCell>
-              </MenuTrigger>
-              <MenuPopover>
-                <MenuList>
-                  <MenuItem onClick={columnSizing.enableKeyboardMode(column.columnId)}>
-                    Keyboard Column Resizing
-                  </MenuItem>
-                </MenuList>
-              </MenuPopover>
-            </Menu>
+          {columns.map((column) => (
+            <TableHeaderCell
+              className={styles.tableCell}
+              key={column.columnId}
+              {...columnSizing.getTableHeaderCellProps(column.columnId)}
+              {...headerSortProps(column.columnId)}
+            >
+              {column.renderHeaderCell()}
+            </TableHeaderCell>
          ))}
        </TableRow>
      </TableHeader>
--- a/src/Explorer/Tabs/DocumentsTabV2/SelectionHelper.ts
+++ b/src/Explorer/Tabs/DocumentsTabV2/SelectionHelper.ts
@@ -1,3 +1,5 @@
+import { useEffect, useRef } from "react";
+
 /**
 * Utility class to help with selection.
 * This emulates File Explorer selection behavior.
@@ -90,3 +92,12 @@ 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;
+};
--- a/src/Explorer/Tabs/DocumentsTabV2/snapshots/DocumentsTabV2.test.tsx.snap
+++ b/src/Explorer/Tabs/DocumentsTabV2/snapshots/DocumentsTabV2.test.tsx.snap
@@ -55,53 +55,57 @@ exports[`Documents tab (noSql API) when rendered should render the page 1`] = `
            }
          >
            <div
-              className="___77lcry0_0000000 f10pi13n"
+              className="___9o87uj0_0000000 ffefeo0"
            >
              <div
-                className="___1rwkz4r_0000000 f1euv43f f1l8gmrm f1e31b4d f150nix6 fy6ml6n f19g0ac"
+                style={
+                  {
+                    "height": "100%",
+                    "width": "calc(100% + -13px)",
+                  }
+                }
              >
-                <Button
-                  appearance="transparent"
-                  aria-label="Refresh"
-                  icon={<ArrowClockwise16Filled />}
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  size="small"
-                  style={
+                <DocumentsTableComponent
+                  collection={
                    {
-                      "color": undefined,
+                      "databaseId": "databaseId",
+                      "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
--- a/src/Explorer/Tabs/DocumentsTabV2/snapshots/DocumentsTableComponent.test.tsx.snap
+++ b/src/Explorer/Tabs/DocumentsTabV2/snapshots/DocumentsTableComponent.test.tsx.snap
--- a/src/Explorer/Tabs/Tabs.tsx
+++ b/src/Explorer/Tabs/Tabs.tsx
@@ -100,8 +100,7 @@ export const Tabs = ({ explorer }: TabsProps): JSX.Element => {
            },
          }}
        >
-          {`To prevent queries from using excessive RUs, Data Explorer has a 5,000 RU default limit. To modify or remove
-          the limit, go to the Settings cog on the right and find "RU Threshold".`}
+          {`Data Explorer has a 5,000 RU default limit. To adjust the limit, go to the Settings page and find "RU Threshold".`}
          <Link
            className="underlinedLink"
            href="https://review.learn.microsoft.com/en-us/azure/cosmos-db/data-explorer?branch=main#configure-request-unit-threshold"
--- a/src/Explorer/Theme/ThemeUtil.tsx
+++ b/src/Explorer/Theme/ThemeUtil.tsx
@@ -16,7 +16,7 @@ import React from "react";
 import { appThemeFabricTealBrandRamp } from "../../Platform/Fabric/FabricTheme";

 export const LayoutConstants = {
-  rowHeight: 36,
+  rowHeight: 32,
 };

 // Our CosmosFluentProvider has the same props as a FluentProvider.
@@ -91,15 +91,30 @@ const appThemePortalBrandRamp: BrandVariants = {
  160: "#CDD8EF",
 };

-const cosmosThemeElements = {
-  layoutRowHeight: `${LayoutConstants.rowHeight}px`,
+export enum LayoutSize {
+  Compact,
+  // TODO: Cozy and Roomy layouts.
+}
+
+interface CosmosThemeElements {
+  layoutRowHeight: string;
+}
+
+export type CosmosTheme = Theme & CosmosThemeElements;
+
+const sizeMappings: Record<LayoutSize, Partial<Theme> & CosmosThemeElements> = {
+  [LayoutSize.Compact]: {
+    layoutRowHeight: "32px",
+    fontSizeBase300: "13px",
+  },
+};
+
+const cosmosTheme = {
  sidebarMinimumWidth: "200px",
  sidebarInitialWidth: "300px",
 };

-export type CosmosTheme = Theme & typeof cosmosThemeElements;
-
-export const tokens = themeToTokensObject({ ...webLightTheme, ...cosmosThemeElements });
+export const tokens = themeToTokensObject({ ...webLightTheme, ...cosmosTheme, ...sizeMappings[LayoutSize.Compact] });

 export const cosmosShorthands = {
  border: () => shorthands.border("1px", "solid", tokens.colorNeutralStroke2),
@@ -117,6 +132,7 @@ export function getPlatformTheme(platform: Platform): CosmosTheme {

  return {
    ...baseTheme,
-    ...cosmosThemeElements,
+    ...cosmosTheme,
+    ...sizeMappings[LayoutSize.Compact], // TODO: Allow for different layout sizes.
  };
 }
--- a/src/Explorer/Tree/snapshots/treeNodeUtil.test.ts.snap
+++ b/src/Explorer/Tree/snapshots/treeNodeUtil.test.ts.snap
@@ -30,6 +30,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
            "styleClass": "deleteCollectionMenuItem",
          },
        ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
        "isExpanded": true,
        "isSelected": [Function],
        "label": "standardCollection",
@@ -69,6 +72,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
            "styleClass": "deleteCollectionMenuItem",
          },
        ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
        "isExpanded": true,
        "isSelected": [Function],
        "label": "conflictsCollection",
@@ -92,6 +98,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
        "styleClass": "deleteDatabaseMenuItem",
      },
    ],
+    "iconSrc": <DatabaseRegular
+      fontSize={16}
+    />,
    "isExpanded": true,
    "isSelected": [Function],
    "label": "standardDb",
@@ -102,6 +111,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
  {
    "children": [
      {
+        "iconSrc": <SettingsRegular
+          fontSize={16}
+        />,
        "id": "",
        "isSelected": [Function],
        "label": "Scale",
@@ -133,6 +145,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
            "styleClass": "deleteCollectionMenuItem",
          },
        ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
        "isExpanded": true,
        "isSelected": [Function],
        "label": "sampleItemsCollection",
@@ -156,6 +171,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
        "styleClass": "deleteDatabaseMenuItem",
      },
    ],
+    "iconSrc": <DatabaseRegular
+      fontSize={16}
+    />,
    "isExpanded": true,
    "isSelected": [Function],
    "label": "sharedDatabase",
@@ -246,6 +264,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
            "styleClass": "deleteCollectionMenuItem",
          },
        ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
        "isExpanded": true,
        "isSelected": [Function],
        "label": "schemaCollection",
@@ -274,6 +295,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
        "styleClass": "deleteDatabaseMenuItem",
      },
    ],
+    "iconSrc": <DatabaseRegular
+      fontSize={16}
+    />,
    "isExpanded": true,
    "isSelected": [Function],
    "label": "giganticDatabase",
@@ -345,6 +369,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
            "styleClass": "deleteCollectionMenuItem",
          },
        ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
        "isExpanded": true,
        "isSelected": [Function],
        "label": "standardCollection",
@@ -415,6 +442,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
            "styleClass": "deleteCollectionMenuItem",
          },
        ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
        "isExpanded": true,
        "isSelected": [Function],
        "label": "conflictsCollection",
@@ -438,6 +468,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
        "styleClass": "deleteDatabaseMenuItem",
      },
    ],
+    "iconSrc": <DatabaseRegular
+      fontSize={16}
+    />,
    "isExpanded": true,
    "isSelected": [Function],
    "label": "standardDb",
@@ -448,6 +481,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
  {
    "children": [
      {
+        "iconSrc": <SettingsRegular
+          fontSize={16}
+        />,
        "id": "",
        "isSelected": [Function],
        "label": "Scale",
@@ -510,6 +546,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
            "styleClass": "deleteCollectionMenuItem",
          },
        ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
        "isExpanded": true,
        "isSelected": [Function],
        "label": "sampleItemsCollection",
@@ -533,6 +572,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
        "styleClass": "deleteDatabaseMenuItem",
      },
    ],
+    "iconSrc": <DatabaseRegular
+      fontSize={16}
+    />,
    "isExpanded": true,
    "isSelected": [Function],
    "label": "sharedDatabase",
@@ -654,6 +696,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
            "styleClass": "deleteCollectionMenuItem",
          },
        ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
        "isExpanded": true,
        "isSelected": [Function],
        "label": "schemaCollection",
@@ -682,6 +727,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
        "styleClass": "deleteDatabaseMenuItem",
      },
    ],
+    "iconSrc": <DatabaseRegular
+      fontSize={16}
+    />,
    "isExpanded": true,
    "isSelected": [Function],
    "label": "giganticDatabase",
@@ -706,6 +754,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
            "onClick": [Function],
          },
        ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
        "isExpanded": true,
        "isSelected": [Function],
        "label": "standardCollection",
@@ -724,6 +775,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
            "onClick": [Function],
          },
        ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
        "isExpanded": true,
        "isSelected": [Function],
        "label": "conflictsCollection",
@@ -747,6 +801,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
        "styleClass": "deleteDatabaseMenuItem",
      },
    ],
+    "iconSrc": <DatabaseRegular
+      fontSize={16}
+    />,
    "isExpanded": true,
    "isSelected": [Function],
    "label": "standardDb",
@@ -766,6 +823,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
            "onClick": [Function],
          },
        ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
        "isExpanded": true,
        "isSelected": [Function],
        "label": "sampleItemsCollection",
@@ -789,6 +849,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
        "styleClass": "deleteDatabaseMenuItem",
      },
    ],
+    "iconSrc": <DatabaseRegular
+      fontSize={16}
+    />,
    "isExpanded": true,
    "isSelected": [Function],
    "label": "sharedDatabase",
@@ -808,6 +871,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
            "onClick": [Function],
          },
        ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
        "isExpanded": true,
        "isSelected": [Function],
        "label": "schemaCollection",
@@ -836,6 +902,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
        "styleClass": "deleteDatabaseMenuItem",
      },
    ],
+    "iconSrc": <DatabaseRegular
+      fontSize={16}
+    />,
    "isExpanded": true,
    "isSelected": [Function],
    "label": "giganticDatabase",
@@ -976,6 +1045,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
            "styleClass": "deleteCollectionMenuItem",
          },
        ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
        "isExpanded": true,
        "isSelected": [Function],
        "label": "standardCollection",
@@ -1076,6 +1148,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
            "styleClass": "deleteCollectionMenuItem",
          },
        ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
        "isExpanded": true,
        "isSelected": [Function],
        "label": "conflictsCollection",
@@ -1099,6 +1174,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
        "styleClass": "deleteDatabaseMenuItem",
      },
    ],
+    "iconSrc": <DatabaseRegular
+      fontSize={16}
+    />,
    "isExpanded": true,
    "isSelected": [Function],
    "label": "standardDb",
@@ -1109,6 +1187,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
  {
    "children": [
      {
+        "iconSrc": <SettingsRegular
+          fontSize={16}
+        />,
        "id": "",
        "isSelected": [Function],
        "label": "Scale",
@@ -1201,6 +1282,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
            "styleClass": "deleteCollectionMenuItem",
          },
        ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
        "isExpanded": true,
        "isSelected": [Function],
        "label": "sampleItemsCollection",
@@ -1224,6 +1308,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
        "styleClass": "deleteDatabaseMenuItem",
      },
    ],
+    "iconSrc": <DatabaseRegular
+      fontSize={16}
+    />,
    "isExpanded": true,
    "isSelected": [Function],
    "label": "sharedDatabase",
@@ -1375,6 +1462,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
            "styleClass": "deleteCollectionMenuItem",
          },
        ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
        "isExpanded": true,
        "isSelected": [Function],
        "label": "schemaCollection",
@@ -1403,6 +1493,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
        "styleClass": "deleteDatabaseMenuItem",
      },
    ],
+    "iconSrc": <DatabaseRegular
+      fontSize={16}
+    />,
    "isExpanded": true,
    "isSelected": [Function],
    "label": "giganticDatabase",
@@ -1543,6 +1636,9 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
            "styleClass": "deleteCollectionMenuItem",
          },
        ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
        "isExpanded": true,
        "isSelected": [Function],
        "label": "standardCollection",
@@ -1638,6 +1734,9 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
            "styleClass": "deleteCollectionMenuItem",
          },
        ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
        "isExpanded": true,
        "isSelected": [Function],
        "label": "conflictsCollection",
@@ -1661,6 +1760,9 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
        "styleClass": "deleteDatabaseMenuItem",
      },
    ],
+    "iconSrc": <DatabaseRegular
+      fontSize={16}
+    />,
    "isExpanded": true,
    "isSelected": [Function],
    "label": "standardDb",
@@ -1671,6 +1773,9 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
  {
    "children": [
      {
+        "iconSrc": <SettingsRegular
+          fontSize={16}
+        />,
        "id": "",
        "isSelected": [Function],
        "label": "Scale",
@@ -1763,6 +1868,9 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
            "styleClass": "deleteCollectionMenuItem",
          },
        ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
        "isExpanded": true,
        "isSelected": [Function],
        "label": "sampleItemsCollection",
@@ -1786,6 +1894,9 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
        "styleClass": "deleteDatabaseMenuItem",
      },
    ],
+    "iconSrc": <DatabaseRegular
+      fontSize={16}
+    />,
    "isExpanded": true,
    "isSelected": [Function],
    "label": "sharedDatabase",
@@ -1937,6 +2048,9 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
            "styleClass": "deleteCollectionMenuItem",
          },
        ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
        "isExpanded": true,
        "isSelected": [Function],
        "label": "schemaCollection",
@@ -1965,6 +2079,9 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
        "styleClass": "deleteDatabaseMenuItem",
      },
    ],
+    "iconSrc": <DatabaseRegular
+      fontSize={16}
+    />,
    "isExpanded": true,
    "isSelected": [Function],
    "label": "giganticDatabase",
@@ -1986,6 +2103,9 @@ exports[`createResourceTokenTreeNodes creates the expected tree nodes 1`] = `
      },
    ],
    "className": "collectionNode",
+    "iconSrc": <DocumentMultipleRegular
+      fontSize={16}
+    />,
    "isExpanded": true,
    "isSelected": [Function],
    "label": "testCollection",
@@ -2021,6 +2141,9 @@ exports[`createSampleDataTreeNodes creates the expected tree nodes 1`] = `
            "onClick": [Function],
          },
        ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
        "isExpanded": false,
        "isSelected": [Function],
        "label": "testCollection",
--- a/src/Explorer/Tree/treeNodeUtil.tsx
+++ b/src/Explorer/Tree/treeNodeUtil.tsx
@@ -1,3 +1,4 @@
+import { DatabaseRegular, DocumentMultipleRegular, SettingsRegular } from "@fluentui/react-icons";
 import { TreeNode } from "Explorer/Controls/TreeComponent/TreeNodeComponent";
 import TabsBase from "Explorer/Tabs/TabsBase";
 import StoredProcedure from "Explorer/Tree/StoredProcedure";
@@ -7,6 +8,7 @@ import { useDatabases } from "Explorer/useDatabases";
 import { getItemName } from "Utils/APITypeUtils";
 import { isServerlessAccount } from "Utils/CapabilityUtils";
 import { useTabs } from "hooks/useTabs";
+import React from "react";
 import { isPublicInternetAccessAllowed } from "../../Common/DatabaseAccountUtility";
 import { Platform, configContext } from "../../ConfigContext";
 import * as DataModels from "../../Contracts/DataModels";
@@ -25,6 +27,10 @@ export const shouldShowScriptNodes = (): boolean => {
  );
 };

+const TreeDatabaseIcon = <DatabaseRegular fontSize={16} />;
+const TreeSettingsIcon = <SettingsRegular fontSize={16} />;
+const TreeCollectionIcon = <DocumentMultipleRegular fontSize={16} />;
+
 export const createSampleDataTreeNodes = (sampleDataResourceTokenCollection: ViewModels.CollectionBase): TreeNode[] => {
  const updatedSampleTree: TreeNode = {
    label: sampleDataResourceTokenCollection.databaseId,
@@ -36,6 +42,7 @@ export const createSampleDataTreeNodes = (sampleDataResourceTokenCollection: Vie
        isExpanded: false,
        className: "collectionNode",
        contextMenu: ResourceTreeContextMenuButtonFactory.createSampleCollectionContextMenuButton(),
+        iconSrc: TreeCollectionIcon,
        onClick: () => {
          useSelectedNode.getState().setSelectedNode(sampleDataResourceTokenCollection);
          useCommandBar.getState().setContextButtons([]);
@@ -104,6 +111,7 @@ export const createResourceTokenTreeNodes = (collection: ViewModels.CollectionBa
    isExpanded: true,
    children,
    className: "collectionNode",
+    iconSrc: TreeCollectionIcon,
    onClick: () => {
      // Rewritten version of expandCollapseCollection
      useSelectedNode.getState().setSelectedNode(collection);
@@ -133,6 +141,7 @@ export const createDatabaseTreeNodes = (
        databaseNode.children.push({
          id: database.isSampleDB ? "sampleScaleSettings" : "",
          label: "Scale",
+          iconSrc: TreeSettingsIcon,
          isSelected: () =>
            useSelectedNode
              .getState()
@@ -169,6 +178,7 @@ export const createDatabaseTreeNodes = (
      children: [],
      isSelected: () => useSelectedNode.getState().isDataNodeSelected(database.id()),
      contextMenu: ResourceTreeContextMenuButtonFactory.createDatabaseContextMenu(container, database.id()),
+      iconSrc: TreeDatabaseIcon,
      onExpanded: async () => {
        useSelectedNode.getState().setSelectedNode(database);
        if (!databaseNode.children || databaseNode.children?.length === 0) {
@@ -219,6 +229,7 @@ export const buildCollectionNode = (
    children: children,
    className: "collectionNode",
    contextMenu: ResourceTreeContextMenuButtonFactory.createCollectionContextMenuButton(container, collection),
+    iconSrc: TreeCollectionIcon,
    onClick: () => {
      useSelectedNode.getState().setSelectedNode(collection);
      collection.openTab();
--- a/src/Platform/Hosted/extractFeatures.ts
+++ b/src/Platform/Hosted/extractFeatures.ts
@@ -38,6 +38,7 @@ 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;
@@ -108,6 +109,7 @@ 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"),
  };
 }

--- a/src/Shared/StorageUtility.ts
+++ b/src/Shared/StorageUtility.ts
@@ -29,6 +29,7 @@ export enum StorageKey {
  GalleryCalloutDismissed,
  VisitedAccounts,
  PriorityLevel,
+  DocumentsTabPrefs,
  DefaultQueryResultsView,
  AppState,
 }
--- a/src/Utils/QueryUtils.ts
+++ b/src/Utils/QueryUtils.ts
@@ -2,18 +2,28 @@ 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 c.id, c._self, c._rid, c._ts, [${buildDocumentsQueryPartitionProjections(
+      ? `select ${objectListSpec}, [${buildDocumentsQueryPartitionProjections(
          "c",
          partitionKey,
        )}] as _partitionKeyValue from c`
-      : `select c.id, c._self, c._rid, c._ts from c`;
+      : `select ${objectListSpec} from c`;

  if (filter) {
    query += " " + filter;
Author	SHA1	Message	Date
Laurent Nguyen	04c01256a6	Cleanup checkbox styles	2024-09-05 11:40:14 +02:00
Laurent Nguyen	1795b8e2e9	Merge branch 'master' into users/languy/save-documentstab-prefs	2024-09-05 09:41:58 +02:00
Laurent Nguyen	4296b5ae02	Add more default filters (#1955 )	2024-09-05 07:16:48 +02:00
Ashley Stanton-Nurse	e8a5658799	Reduce extra spacing in the new tree and items tab (#1951 ) * reduce layout row size and default font size * icons for the tree * refmt and update snapshots * remove commented out code	2024-09-04 13:07:27 -07:00
vchske	b4973e8367	Fixing regex on allowedParentFrameOrigins to address XSS (#1956 )	2024-09-04 11:35:32 -07:00
Laurent Nguyen	e23ba02561	Move column selection and sorting behind feature flag enableDocumentsTableColumnSelection	2024-09-02 12:31:39 +02:00
Laurent Nguyen	85352b74a3	Update unit test snapshot	2024-08-23 18:07:59 +02:00
Laurent Nguyen	26645f8360	Label to indicate which field is a partition key in Column Selection Pane	2024-08-23 17:59:16 +02:00
Laurent Nguyen	777b695051	Add background color to "..." button for column selection	2024-08-23 17:47:02 +02:00
Laurent Nguyen	1f300e32fe	Fix table width	2024-08-23 17:32:00 +02:00
Laurent Nguyen	e81408560e	Remove unused function	2024-08-23 17:26:22 +02:00
Laurent Nguyen	ed1e2990d0	Update test snapshots	2024-08-23 17:21:40 +02:00
Laurent Nguyen	5e92a0c5d7	Disable column selection for Mongo. Remove extra refresh button	2024-08-23 17:16:43 +02:00
Laurent Nguyen	26b6de4c53	Merge branch 'master' into users/languy/save-documentstab-prefs	2024-08-23 09:57:52 +02:00
Laurent Nguyen	f308cabeaa	Revert "Merge branch 'master' into users/languy/save-documentstab-prefs" This reverts commit `e5a82fd356`.	2024-08-23 09:53:45 +02:00
Laurent Nguyen	e5a82fd356	Merge branch 'master' into users/languy/save-documentstab-prefs	2024-08-23 09:47:19 +02:00
Laurent Nguyen	4778183e50	Save columns definition (schema) along with selected columns.	2024-08-23 09:23:38 +02:00
Laurent Nguyen	b1d9570a95	Persist column sorting	2024-08-23 08:21:40 +02:00
Laurent Nguyen	2397283649	Persist column selection	2024-08-22 16:19:23 +02:00
Laurent Nguyen	905aa26f27	Fix unit test	2024-08-22 14:30:35 +02:00
Laurent Nguyen	a2556dad06	Fix unit tests	2024-08-22 14:24:44 +02:00
Laurent Nguyen	c9398e303b	Merge branch 'master' into users/languy/save-documentstab-prefs	2024-08-22 11:48:38 +02:00
Laurent Nguyen	9d4a9c0601	Add reset button to column selection and fix naming of openUploadItemsPanePane()	2024-08-21 16:39:21 +02:00
Laurent Nguyen	1e10273510	Fix format, update snapshots	2024-08-07 09:36:48 +02:00
Laurent Nguyen	c141e2612b	Merge branch 'master' into users/languy/save-documentstab-prefs	2024-08-07 09:27:13 +02:00
Laurent Nguyen	7a179ff34a	Fix format	2024-08-06 18:28:52 +02:00
Laurent Nguyen	4e71e340e3	Implement column sorting	2024-07-11 14:33:55 +02:00
Laurent Nguyen	9efbe7d056	Don't allow unselecting last column	2024-07-11 10:04:43 +02:00
Laurent Nguyen	ea2ab19518	Fix heuristic for size update	2024-07-11 10:04:21 +02:00
Laurent Nguyen	5d59c47979	Fix table size issue with some heuristics	2024-07-10 19:14:13 +02:00
Laurent Nguyen	fa460bfba2	Rework column selection UI	2024-07-10 17:20:24 +02:00
Laurent Nguyen	f1dcf1c548	Update choices of column when creating new or updating document	2024-06-25 10:15:41 +02:00
Laurent Nguyen	88f38d6522	Move table values under its own property	2024-06-24 13:38:32 +02:00
Laurent Nguyen	658e2ffe85	Do not allow deselecting all columns	2024-06-21 13:12:50 +02:00
Laurent Nguyen	bea3aa8b55	Accumulate properties rather than replace for column definitions	2024-06-21 12:05:50 +02:00
Laurent Nguyen	ce0cfed128	Only allow data fields that can be rendered (string and numbers) in column selection	2024-06-21 11:42:02 +02:00
Laurent Nguyen	c0a79c1e67	Search uses string includes instead of startsWith	2024-06-20 16:40:04 +02:00
Laurent Nguyen	9945304e18	Switch icons and search compare with lowercase.	2024-06-20 16:36:01 +02:00
Laurent Nguyen	0ce9acdfdf	Implement new menu for column selection with search.	2024-06-20 16:23:36 +02:00
Laurent Nguyen	b096fa9bf8	Add column selection from right-click	2024-06-19 13:01:23 +02:00
Laurent Nguyen	55df5cb121	Merge branch 'master' into users/languy/save-documentstab-prefs	2024-06-13 09:14:11 +02:00
Laurent Nguyen	e36853c100	Save column width	2024-06-12 12:26:28 +02:00
Laurent Nguyen	996f785aac	Merge branch 'master' into users/languy/save-documentstab-prefs	2024-06-11 17:02:04 +02:00
Laurent Nguyen	6c67f3b2e5	Make table columns generic (no more id and partition keys)	2024-06-11 16:57:17 +02:00
Laurent Nguyen	1ee79881ef	Initial implementation of saving split value to local storage	2024-06-10 14:25:58 +02:00