diff --git a/.eslintignore b/.eslintignore
index 78e9b517e..20cdeb4c3 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -89,10 +89,7 @@ src/Explorer/Tables/TableEntityProcessor.ts
 src/Explorer/Tables/Utilities.ts
 src/Explorer/Tabs/ConflictsTab.ts
 src/Explorer/Tabs/DatabaseSettingsTab.ts
-src/Explorer/Tabs/DocumentsTab.test.ts
-src/Explorer/Tabs/DocumentsTab.ts
 src/Explorer/Tabs/GraphTab.ts
-src/Explorer/Tabs/MongoDocumentsTab.ts
 src/Explorer/Tabs/NotebookV2Tab.ts
 src/Explorer/Tabs/ScriptTabBase.ts
 src/Explorer/Tabs/TabComponents.ts
diff --git a/jest.config.js b/jest.config.js
index b4f660063..1c1f48e6d 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -31,7 +31,7 @@ module.exports = {
   coveragePathIgnorePatterns: ["/node_modules/"],
 
   // A list of reporter names that Jest uses when writing coverage reports
-  coverageReporters: ["json", "text", "cobertura"],
+  coverageReporters: ["json", "text", "cobertura", "lcov"],
 
   // An object that configures minimum threshold enforcement for coverage results
   coverageThreshold: {
diff --git a/less/documentDB.less b/less/documentDB.less
index 357d159b3..05ad22760 100644
--- a/less/documentDB.less
+++ b/less/documentDB.less
@@ -2264,33 +2264,33 @@ a:link {
   width: 82px;
 }
 
-.tabdocuments .scrollable {
-  height: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding-left: 5px;
-  padding-right: 5px;
-  width: 100%;
-}
+// .tabdocuments .scrollable {
+//   height: 100%;
+//   overflow-y: auto;
+//   overflow-x: hidden;
+//   padding-left: 5px;
+//   padding-right: 5px;
+//   width: 100%;
+// }
 
-.tabdocuments > .tabdocumentsGridElement {
-  width: 50%;
-}
+// .tabdocuments > .tabdocumentsGridElement {
+//   width: 50%;
+// }
 
-.tabdocuments > .evenlySpacedHeader {
-  width: 30%;
-}
+// .tabdocuments > .evenlySpacedHeader {
+//   width: 30%;
+// }
 
-.tabdocuments.scrollable:focus,
-.tabdocuments.scrollable:active {
-  outline: 1px dotted;
-}
+// .tabdocuments.scrollable:focus,
+// .tabdocuments.scrollable:active {
+//   outline: 1px dotted;
+// }
 
-.tabdocuments .scrollable table td {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
+// .tabdocuments .scrollable table td {
+//   white-space: nowrap;
+//   overflow: hidden;
+//   text-overflow: ellipsis;
+// }
 
 .mongoDocumentEditor .monaco-editor.vs .redsquiggly {
   display: none !important;
@@ -2316,10 +2316,9 @@ td a:hover {
 }
 
 .loadMore {
+  display: block;
   width: 100%;
-  padding-left: 30%;
-  padding-top: 2px;
-  cursor: pointer;
+  text-align: center;
 }
 
 .loadMore > a:focus {
@@ -2558,10 +2557,12 @@ a:link {
 }
 
 .filterdivs {
-  padding-top: 15px;
-  height: 45px;
-  margin-bottom: 8px;
+  margin: 10px 0px;
   white-space: nowrap;
+  input {
+    line-height: 14px; // To correct vertical position of the down arrow of the input
+    outline: none; // Remove the dotted border on focus, because fluent has its own focus style (underlined)
+  }
 }
 
 .editFilterContainer {
@@ -2578,6 +2579,18 @@ a:link {
   cursor: pointer;
 }
 
+.documentsTab {
+  .documentsTable {
+    .documentsTableCell {
+      border-left: 1px solid @BaseMedium;
+      height: 100%;
+    }
+    .documentsTableHeader {
+      border-bottom: 1px solid @BaseMedium;
+    }
+  }
+}
+
 .querydropdown {
   border: 1px solid @BaseMedium;
   font-style: normal;
diff --git a/package-lock.json b/package-lock.json
index 26c513d6f..31e3d37db 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -51,6 +51,7 @@
         "@types/lodash": "4.14.171",
         "@types/mkdirp": "1.0.1",
         "@types/node-fetch": "2.5.7",
+        "@uiw/react-split": "5.9.3",
         "@xmldom/xmldom": "0.7.13",
         "applicationinsights": "1.8.0",
         "bootstrap": "3.4.1",
@@ -102,6 +103,7 @@
         "react-redux": "7.1.3",
         "react-splitter-layout": "4.0.0",
         "react-string-format": "1.0.1",
+        "react-window": "1.8.10",
         "react-youtube": "9.0.1",
         "reflect-metadata": "0.1.13",
         "rx-jupyter": "5.5.12",
@@ -128,8 +130,8 @@
         "@types/datatables.net": "1.10.28",
         "@types/datatables.net-colreorder": "1.4.5",
         "@types/dom-to-image": "2.6.2",
-        "@types/enzyme": "3.10.7",
-        "@types/enzyme-adapter-react-16": "1.0.6",
+        "@types/enzyme": "3.10.12",
+        "@types/enzyme-adapter-react-16": "1.0.9",
         "@types/hasher": "0.0.31",
         "@types/jest": "26.0.20",
         "@types/jquery": "3.5.29",
@@ -141,6 +143,7 @@
         "@types/react-notification-system": "0.2.39",
         "@types/react-redux": "7.1.7",
         "@types/react-splitter-layout": "3.0.1",
+        "@types/react-window": "1.8.8",
         "@types/sanitize-html": "1.27.2",
         "@types/sinon": "2.3.3",
         "@types/styled-components": "5.1.1",
@@ -156,8 +159,8 @@
         "create-file-webpack": "1.0.2",
         "css-loader": "6.8.1",
         "enzyme": "3.11.0",
-        "enzyme-adapter-react-16": "1.15.5",
-        "enzyme-to-json": "3.6.1",
+        "enzyme-adapter-react-16": "1.15.8",
+        "enzyme-to-json": "3.6.2",
         "eslint": "8.50.0",
         "eslint-cli": "1.1.1",
         "eslint-plugin-no-null": "1.0.2",
@@ -12481,9 +12484,9 @@
       "integrity": "sha512-PD+wqNhrjWFjAlSVd18jvChZvOXB2SOwAILBmuYev5zswBats5qmzs/QFoooLKd2omj9BT05a8MeSeRmXLGY+Q=="
     },
     "node_modules/@types/enzyme": {
-      "version": "3.10.7",
-      "resolved": "https://registry.npmjs.org/@types/enzyme/-/enzyme-3.10.7.tgz",
-      "integrity": "sha512-J+0wduPGAkzOvW7sr6hshGv1gBI3WXLRTczkRKzVPxLP3xAkYxZmvvagSBPw8Z452fZ8TGUxCmAXcb44yLQksw==",
+      "version": "3.10.12",
+      "resolved": "https://registry.npmjs.org/@types/enzyme/-/enzyme-3.10.12.tgz",
+      "integrity": "sha512-xryQlOEIe1TduDWAOphR0ihfebKFSWOXpIsk+70JskCfRfW+xALdnJ0r1ZOTo85F9Qsjk6vtlU7edTYHbls9tA==",
       "dev": true,
       "dependencies": {
         "@types/cheerio": "*",
@@ -12491,9 +12494,9 @@
       }
     },
     "node_modules/@types/enzyme-adapter-react-16": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/@types/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.0.6.tgz",
-      "integrity": "sha512-VonDkZ15jzqDWL8mPFIQnnLtjwebuL9YnDkqeCDYnB4IVgwUm0mwKkqhrxLL6mb05xm7qqa3IE95m8CZE9imCg==",
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@types/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.0.9.tgz",
+      "integrity": "sha512-z24MMxGtUL8HhXdye3tWzjp+19QTsABqLaX2oOZpxMPHRJgLfahQmOeTTrEBQd9ogW20+UmPBXD9j+XOasFHvw==",
       "dev": true,
       "dependencies": {
         "@types/enzyme": "*"
@@ -13426,6 +13429,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-window": {
+      "version": "1.8.8",
+      "resolved": "https://registry.npmjs.org/@types/react-window/-/react-window-1.8.8.tgz",
+      "integrity": "sha512-8Ls660bHR1AUA2kuRvVG9D/4XpRC6wjAaPT9dil7Ckc76eP9TKWZwwmgfq8Q1LANX3QNDnoU4Zp48A3w+zK69Q==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/retry": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
@@ -13903,6 +13915,18 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
+    "node_modules/@uiw/react-split": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/@uiw/react-split/-/react-split-5.9.3.tgz",
+      "integrity": "sha512-HgwETU+kRhzZAp+YiE4Yu8bNJm3jxxnGgGPfkadUl8jA1wsMD3aMMskuhQF5akiUUUadiLUvAc8e1RH9Y/SKDw==",
+      "funding": {
+        "url": "https://jaywcjlove.github.io/#/sponsor"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/@ungap/url-search-params": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/@ungap/url-search-params/-/url-search-params-0.2.2.tgz",
@@ -14608,12 +14632,15 @@
       }
     },
     "node_modules/array-buffer-byte-length": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.0.tgz",
-      "integrity": "sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz",
+      "integrity": "sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "is-array-buffer": "^3.0.1"
+        "call-bind": "^1.0.5",
+        "is-array-buffer": "^3.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -14701,15 +14728,19 @@
       }
     },
     "node_modules/array.prototype.find": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/array.prototype.find/-/array.prototype.find-2.2.2.tgz",
-      "integrity": "sha512-DRumkfW97iZGOfn+lIXbkVrXL04sfYKX+EfOodo8XboR5sxPDVvOjZTF/rysusa9lmhmSOeD6Vp6RKQP+eP4Tg==",
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.find/-/array.prototype.find-2.2.3.tgz",
+      "integrity": "sha512-fO/ORdOELvjbbeIfZfzrXFMhYHGofRGqd+am9zm3tZ4GlJINj/pA2eITyfd65Vg6+ZbHd/Cys7stpoRSWtQFdA==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1",
-        "es-shim-unscopables": "^1.0.0"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -14780,16 +14811,17 @@
       }
     },
     "node_modules/arraybuffer.prototype.slice": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.2.tgz",
-      "integrity": "sha512-yMBKppFur/fbHu9/6USUe03bZ4knMYiwFBcyiaXB8Go0qNehwX6inYPzK9U0NeQvGxKthcmHcaR8P5MStSRBAw==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.3.tgz",
+      "integrity": "sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==",
       "dependencies": {
-        "array-buffer-byte-length": "^1.0.0",
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1",
-        "get-intrinsic": "^1.2.1",
-        "is-array-buffer": "^3.0.2",
+        "array-buffer-byte-length": "^1.0.1",
+        "call-bind": "^1.0.5",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.22.3",
+        "es-errors": "^1.2.1",
+        "get-intrinsic": "^1.2.3",
+        "is-array-buffer": "^3.0.4",
         "is-shared-array-buffer": "^1.0.2"
       },
       "engines": {
@@ -14914,9 +14946,12 @@
       }
     },
     "node_modules/available-typed-arrays": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
-      "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
+      "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
+      "dependencies": {
+        "possible-typed-array-names": "^1.0.0"
+      },
       "engines": {
         "node": ">= 0.4"
       },
@@ -15731,13 +15766,18 @@
       }
     },
     "node_modules/call-bind": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.5.tgz",
-      "integrity": "sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
+      "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
       "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
         "function-bind": "^1.1.2",
-        "get-intrinsic": "^1.2.1",
-        "set-function-length": "^1.1.1"
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -17879,6 +17919,54 @@
         "webidl-conversions": "^4.0.2"
       }
     },
+    "node_modules/data-view-buffer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.1.tgz",
+      "integrity": "sha512-0lht7OugA5x3iJLOWFhWK/5ehONdprk0ISXqVFn/NFrDu+cuc8iADFrGQz5BnRK7LLU3JmkbXSxaqX+/mXYtUA==",
+      "dependencies": {
+        "call-bind": "^1.0.6",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/data-view-byte-length": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.1.tgz",
+      "integrity": "sha512-4J7wRJD3ABAzr8wP+OcIcqq2dlUKp4DVflx++hs5h5ZKydWMI6/D/fAot+yh6g2tHh8fLFTvNOaVN357NvSrOQ==",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/data-view-byte-offset": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.0.tgz",
+      "integrity": "sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==",
+      "dependencies": {
+        "call-bind": "^1.0.6",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/datatables.net": {
       "version": "1.13.8",
       "resolved": "https://registry.npmjs.org/datatables.net/-/datatables.net-1.13.8.tgz",
@@ -18142,16 +18230,19 @@
       }
     },
     "node_modules/define-data-property": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.1.tgz",
-      "integrity": "sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
       "dependencies": {
-        "get-intrinsic": "^1.2.1",
-        "gopd": "^1.0.1",
-        "has-property-descriptors": "^1.0.0"
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
       },
       "engines": {
         "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/define-lazy-prop": {
@@ -18778,20 +18869,20 @@
       }
     },
     "node_modules/enzyme-adapter-react-16": {
-      "version": "1.15.5",
-      "resolved": "https://registry.npmjs.org/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.15.5.tgz",
-      "integrity": "sha512-33yUJGT1nHFQlbVI5qdo5Pfqvu/h4qPwi1o0a6ZZsjpiqq92a3HjynDhwd1IeED+Su60HDWV8mxJqkTnLYdGkw==",
+      "version": "1.15.8",
+      "resolved": "https://registry.npmjs.org/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.15.8.tgz",
+      "integrity": "sha512-uYGC31eGZBp5nGsr4nKhZKvxGQjyHGjS06BJsUlWgE29/hvnpgCsT1BJvnnyny7N3GIIVyxZ4O9GChr6hy2WQA==",
       "dev": true,
       "dependencies": {
-        "enzyme-adapter-utils": "^1.13.1",
-        "enzyme-shallow-equal": "^1.0.4",
-        "has": "^1.0.3",
-        "object.assign": "^4.1.0",
-        "object.values": "^1.1.1",
-        "prop-types": "^15.7.2",
+        "enzyme-adapter-utils": "^1.14.2",
+        "enzyme-shallow-equal": "^1.0.7",
+        "hasown": "^2.0.0",
+        "object.assign": "^4.1.5",
+        "object.values": "^1.1.7",
+        "prop-types": "^15.8.1",
         "react-is": "^16.13.1",
         "react-test-renderer": "^16.0.0-0",
-        "semver": "^5.7.0"
+        "semver": "^5.7.2"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -18809,18 +18900,18 @@
       "dev": true
     },
     "node_modules/enzyme-adapter-utils": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/enzyme-adapter-utils/-/enzyme-adapter-utils-1.14.1.tgz",
-      "integrity": "sha512-JZgMPF1QOI7IzBj24EZoDpaeG/p8Os7WeBZWTJydpsH7JRStc7jYbHE4CmNQaLqazaGFyLM8ALWA3IIZvxW3PQ==",
+      "version": "1.14.2",
+      "resolved": "https://registry.npmjs.org/enzyme-adapter-utils/-/enzyme-adapter-utils-1.14.2.tgz",
+      "integrity": "sha512-1ZC++RlsYRaiOWE5NRaF5OgsMt7F5rn/VuaJIgc7eW/fmgg8eS1/Ut7EugSPPi7VMdWMLcymRnMF+mJUJ4B8KA==",
       "dev": true,
       "dependencies": {
         "airbnb-prop-types": "^2.16.0",
-        "function.prototype.name": "^1.1.5",
-        "has": "^1.0.3",
-        "object.assign": "^4.1.4",
-        "object.fromentries": "^2.0.5",
+        "function.prototype.name": "^1.1.6",
+        "hasown": "^2.0.0",
+        "object.assign": "^4.1.5",
+        "object.fromentries": "^2.0.7",
         "prop-types": "^15.8.1",
-        "semver": "^5.7.1"
+        "semver": "^6.3.1"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -18829,13 +18920,22 @@
         "react": "0.13.x || 0.14.x || ^15.0.0-0 || ^16.0.0-0"
       }
     },
+    "node_modules/enzyme-adapter-utils/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
     "node_modules/enzyme-shallow-equal": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/enzyme-shallow-equal/-/enzyme-shallow-equal-1.0.5.tgz",
-      "integrity": "sha512-i6cwm7hN630JXenxxJFBKzgLC3hMTafFQXflvzHgPmDhOBhxUWDe8AeRv1qp2/uWJ2Y8z5yLWMzmAfkTOiOCZg==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/enzyme-shallow-equal/-/enzyme-shallow-equal-1.0.7.tgz",
+      "integrity": "sha512-/um0GFqUXnpM9SvKtje+9Tjoz3f1fpBC3eXRFrNs8kpYn69JljciYP7KZTqM/YQbUY9KUjvKB4jo/q+L6WGGvg==",
       "dev": true,
       "dependencies": {
-        "has": "^1.0.3",
+        "hasown": "^2.0.0",
         "object-is": "^1.1.5"
       },
       "funding": {
@@ -18843,13 +18943,13 @@
       }
     },
     "node_modules/enzyme-to-json": {
-      "version": "3.6.1",
-      "resolved": "https://registry.npmjs.org/enzyme-to-json/-/enzyme-to-json-3.6.1.tgz",
-      "integrity": "sha512-15tXuONeq5ORoZjV/bUo2gbtZrN2IH+Z6DvL35QmZyKHgbY1ahn6wcnLd9Xv9OjiwbAXiiP8MRZwbZrCv1wYNg==",
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/enzyme-to-json/-/enzyme-to-json-3.6.2.tgz",
+      "integrity": "sha512-Ynm6Z6R6iwQ0g2g1YToz6DWhxVnt8Dy1ijR2zynRKxTyBGA8rCDXU3rs2Qc4OKvUvc2Qoe1bcFK6bnPs20TrTg==",
       "dev": true,
       "dependencies": {
         "@types/cheerio": "^0.22.22",
-        "lodash": "^4.17.15",
+        "lodash": "^4.17.21",
         "react-is": "^16.12.0"
       },
       "engines": {
@@ -18911,49 +19011,56 @@
       }
     },
     "node_modules/es-abstract": {
-      "version": "1.22.3",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.3.tgz",
-      "integrity": "sha512-eiiY8HQeYfYH2Con2berK+To6GrK2RxbPawDkGq4UiCQQfZHb6wX9qQqkbpPqaxQFcl8d9QzZqo0tGE0VcrdwA==",
+      "version": "1.23.3",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.3.tgz",
+      "integrity": "sha512-e+HfNH61Bj1X9/jLc5v1owaLYuHdeHHSQlkhCBiTK8rBvKaULl/beGMxwrMXjpYrv4pz22BlY570vVePA2ho4A==",
       "dependencies": {
-        "array-buffer-byte-length": "^1.0.0",
-        "arraybuffer.prototype.slice": "^1.0.2",
-        "available-typed-arrays": "^1.0.5",
-        "call-bind": "^1.0.5",
-        "es-set-tostringtag": "^2.0.1",
+        "array-buffer-byte-length": "^1.0.1",
+        "arraybuffer.prototype.slice": "^1.0.3",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.7",
+        "data-view-buffer": "^1.0.1",
+        "data-view-byte-length": "^1.0.1",
+        "data-view-byte-offset": "^1.0.0",
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-set-tostringtag": "^2.0.3",
         "es-to-primitive": "^1.2.1",
         "function.prototype.name": "^1.1.6",
-        "get-intrinsic": "^1.2.2",
-        "get-symbol-description": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
+        "get-symbol-description": "^1.0.2",
         "globalthis": "^1.0.3",
         "gopd": "^1.0.1",
-        "has-property-descriptors": "^1.0.0",
-        "has-proto": "^1.0.1",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.0.3",
         "has-symbols": "^1.0.3",
-        "hasown": "^2.0.0",
-        "internal-slot": "^1.0.5",
-        "is-array-buffer": "^3.0.2",
+        "hasown": "^2.0.2",
+        "internal-slot": "^1.0.7",
+        "is-array-buffer": "^3.0.4",
         "is-callable": "^1.2.7",
-        "is-negative-zero": "^2.0.2",
+        "is-data-view": "^1.0.1",
+        "is-negative-zero": "^2.0.3",
         "is-regex": "^1.1.4",
-        "is-shared-array-buffer": "^1.0.2",
+        "is-shared-array-buffer": "^1.0.3",
         "is-string": "^1.0.7",
-        "is-typed-array": "^1.1.12",
+        "is-typed-array": "^1.1.13",
         "is-weakref": "^1.0.2",
         "object-inspect": "^1.13.1",
         "object-keys": "^1.1.1",
-        "object.assign": "^4.1.4",
-        "regexp.prototype.flags": "^1.5.1",
-        "safe-array-concat": "^1.0.1",
-        "safe-regex-test": "^1.0.0",
-        "string.prototype.trim": "^1.2.8",
-        "string.prototype.trimend": "^1.0.7",
-        "string.prototype.trimstart": "^1.0.7",
-        "typed-array-buffer": "^1.0.0",
-        "typed-array-byte-length": "^1.0.0",
-        "typed-array-byte-offset": "^1.0.0",
-        "typed-array-length": "^1.0.4",
+        "object.assign": "^4.1.5",
+        "regexp.prototype.flags": "^1.5.2",
+        "safe-array-concat": "^1.1.2",
+        "safe-regex-test": "^1.0.3",
+        "string.prototype.trim": "^1.2.9",
+        "string.prototype.trimend": "^1.0.8",
+        "string.prototype.trimstart": "^1.0.8",
+        "typed-array-buffer": "^1.0.2",
+        "typed-array-byte-length": "^1.0.1",
+        "typed-array-byte-offset": "^1.0.2",
+        "typed-array-length": "^1.0.6",
         "unbox-primitive": "^1.0.2",
-        "which-typed-array": "^1.1.13"
+        "which-typed-array": "^1.1.15"
       },
       "engines": {
         "node": ">= 0.4"
@@ -18967,6 +19074,25 @@
       "resolved": "https://registry.npmjs.org/es-array-method-boxes-properly/-/es-array-method-boxes-properly-1.0.0.tgz",
       "integrity": "sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA=="
     },
+    "node_modules/es-define-property": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
+      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
+      "dependencies": {
+        "get-intrinsic": "^1.2.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/es-iterator-helpers": {
       "version": "1.0.15",
       "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.0.15.tgz",
@@ -18993,14 +19119,25 @@
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.4.1.tgz",
       "integrity": "sha512-cXLGjP0c4T3flZJKQSuziYoq7MlT+rnvfZjfp7h+I7K9BNX54kP9nyWvdbwjQ4u1iWbOL4u96fgeZLToQlZC7w=="
     },
-    "node_modules/es-set-tostringtag": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.2.tgz",
-      "integrity": "sha512-BuDyupZt65P9D2D2vA/zqcI3G5xRsklm5N3xCwuiy+/vKy8i0ifdsQP1sLgO4tZDSCaQUSnmC48khknGMV3D2Q==",
+    "node_modules/es-object-atoms": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.0.0.tgz",
+      "integrity": "sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==",
       "dependencies": {
-        "get-intrinsic": "^1.2.2",
-        "has-tostringtag": "^1.0.0",
-        "hasown": "^2.0.0"
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz",
+      "integrity": "sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==",
+      "dependencies": {
+        "get-intrinsic": "^1.2.4",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.1"
       },
       "engines": {
         "node": ">= 0.4"
@@ -21334,15 +21471,19 @@
       }
     },
     "node_modules/get-intrinsic": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.2.tgz",
-      "integrity": "sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
+      "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
       "dependencies": {
+        "es-errors": "^1.3.0",
         "function-bind": "^1.1.2",
         "has-proto": "^1.0.1",
         "has-symbols": "^1.0.3",
         "hasown": "^2.0.0"
       },
+      "engines": {
+        "node": ">= 0.4"
+      },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -21372,12 +21513,13 @@
       }
     },
     "node_modules/get-symbol-description": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz",
-      "integrity": "sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.2.tgz",
+      "integrity": "sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.1.1"
+        "call-bind": "^1.0.5",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.4"
       },
       "engines": {
         "node": ">= 0.4"
@@ -21735,20 +21877,20 @@
       }
     },
     "node_modules/has-property-descriptors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.1.tgz",
-      "integrity": "sha512-VsX8eaIewvas0xnvinAe9bw4WfIeODpGYikiWYLH+dma0Jw6KHYqWiWfhQlgOVK8D6PvjubK5Uc4P0iIhIcNVg==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
       "dependencies": {
-        "get-intrinsic": "^1.2.2"
+        "es-define-property": "^1.0.0"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/has-proto": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
-      "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
+      "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
       "engines": {
         "node": ">= 0.4"
       },
@@ -21768,11 +21910,11 @@
       }
     },
     "node_modules/has-tostringtag": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
-      "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
       "dependencies": {
-        "has-symbols": "^1.0.2"
+        "has-symbols": "^1.0.3"
       },
       "engines": {
         "node": ">= 0.4"
@@ -21859,9 +22001,9 @@
       }
     },
     "node_modules/hasown": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz",
-      "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
       "dependencies": {
         "function-bind": "^1.1.2"
       },
@@ -22826,11 +22968,11 @@
       "devOptional": true
     },
     "node_modules/internal-slot": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.6.tgz",
-      "integrity": "sha512-Xj6dv+PsbtwyPpEflsejS+oIZxmMlV44zAhG479uYu89MsjcYOhCFnNyKrkJrihbsiasQyY0afoCl/9BLR65bg==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.7.tgz",
+      "integrity": "sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==",
       "dependencies": {
-        "get-intrinsic": "^1.2.2",
+        "es-errors": "^1.3.0",
         "hasown": "^2.0.0",
         "side-channel": "^1.0.4"
       },
@@ -22916,13 +23058,15 @@
       }
     },
     "node_modules/is-array-buffer": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.2.tgz",
-      "integrity": "sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==",
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz",
+      "integrity": "sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==",
       "dependencies": {
         "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.2.0",
-        "is-typed-array": "^1.1.10"
+        "get-intrinsic": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -23034,6 +23178,20 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/is-data-view": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.1.tgz",
+      "integrity": "sha512-AHkaJrsUVW6wq6JS8y3JnM/GJF/9cf+k20+iDzlSaJrinEo5+7vRiteOSwBhHRiAyQATN1AmY4hwzxJKPmYf+w==",
+      "dependencies": {
+        "is-typed-array": "^1.1.13"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-date-object": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
@@ -23209,9 +23367,9 @@
       }
     },
     "node_modules/is-negative-zero": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
-      "integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
+      "integrity": "sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==",
       "engines": {
         "node": ">= 0.4"
       },
@@ -23348,11 +23506,14 @@
       }
     },
     "node_modules/is-shared-array-buffer": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
-      "integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.3.tgz",
+      "integrity": "sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==",
       "dependencies": {
-        "call-bind": "^1.0.2"
+        "call-bind": "^1.0.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -23405,11 +23566,11 @@
       }
     },
     "node_modules/is-typed-array": {
-      "version": "1.1.12",
-      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.12.tgz",
-      "integrity": "sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==",
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.13.tgz",
+      "integrity": "sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==",
       "dependencies": {
-        "which-typed-array": "^1.1.11"
+        "which-typed-array": "^1.1.14"
       },
       "engines": {
         "node": ">= 0.4"
@@ -32745,12 +32906,12 @@
       }
     },
     "node_modules/object.assign": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.4.tgz",
-      "integrity": "sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==",
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.5.tgz",
+      "integrity": "sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
+        "call-bind": "^1.0.5",
+        "define-properties": "^1.2.1",
         "has-symbols": "^1.0.3",
         "object-keys": "^1.1.1"
       },
@@ -33769,6 +33930,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/possible-typed-array-names": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
+      "integrity": "sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/post-robot": {
       "version": "10.0.42",
       "resolved": "https://registry.npmjs.org/post-robot/-/post-robot-10.0.42.tgz",
@@ -35185,6 +35354,22 @@
         "react-dom": ">=16.6.0"
       }
     },
+    "node_modules/react-window": {
+      "version": "1.8.10",
+      "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.10.tgz",
+      "integrity": "sha512-Y0Cx+dnU6NLa5/EvoHukUD0BklJ8qITCtVEPY1C/nL8wwoZ0b5aEw8Ff1dOVHw7fCzMt55XfJDd8S8W8LCaUCg==",
+      "dependencies": {
+        "@babel/runtime": "^7.0.0",
+        "memoize-one": ">=3.1.1 <6"
+      },
+      "engines": {
+        "node": ">8.0.0"
+      },
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-youtube": {
       "version": "9.0.1",
       "resolved": "https://registry.npmjs.org/react-youtube/-/react-youtube-9.0.1.tgz",
@@ -35553,13 +35738,14 @@
       }
     },
     "node_modules/regexp.prototype.flags": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.1.tgz",
-      "integrity": "sha512-sy6TXMN+hnP/wMy+ISxg3krXx7BAtWVO4UouuCN/ziM9UEne0euamVNafDfvC83bRNr95y0V5iijeDQFUNpvrg==",
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz",
+      "integrity": "sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "set-function-name": "^2.0.0"
+        "call-bind": "^1.0.6",
+        "define-properties": "^1.2.1",
+        "es-errors": "^1.3.0",
+        "set-function-name": "^2.0.1"
       },
       "engines": {
         "node": ">= 0.4"
@@ -36190,12 +36376,12 @@
       }
     },
     "node_modules/safe-array-concat": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.0.1.tgz",
-      "integrity": "sha512-6XbUAseYE2KtOuGueyeobCySj9L4+66Tn6KQMOPQJrAJEowYKW/YR/MGJZl7FdydUdaFu4LYyDZjxf4/Nmo23Q==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.2.tgz",
+      "integrity": "sha512-vj6RsCsWBCf19jIeHEfkRMw8DPiBb+DMXklQ/1SGDHOMlHdPUkZXFQ2YdplS23zESTijAcurb1aSgJA3AgMu1Q==",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.2.1",
+        "call-bind": "^1.0.7",
+        "get-intrinsic": "^1.2.4",
         "has-symbols": "^1.0.3",
         "isarray": "^2.0.5"
       },
@@ -36239,14 +36425,17 @@
       }
     },
     "node_modules/safe-regex-test": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.0.tgz",
-      "integrity": "sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.3.tgz",
+      "integrity": "sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.1.3",
+        "call-bind": "^1.0.6",
+        "es-errors": "^1.3.0",
         "is-regex": "^1.1.4"
       },
+      "engines": {
+        "node": ">= 0.4"
+      },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -36726,14 +36915,16 @@
       "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw=="
     },
     "node_modules/set-function-length": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.1.1.tgz",
-      "integrity": "sha512-VoaqjbBJKiWtg4yRcKBQ7g7wnGnLV3M8oLvVWwOk2PdYY6PEFegR1vezXR0tw6fZGF9csVakIRjrJiy2veSBFQ==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
       "dependencies": {
-        "define-data-property": "^1.1.1",
-        "get-intrinsic": "^1.2.1",
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
         "gopd": "^1.0.1",
-        "has-property-descriptors": "^1.0.0"
+        "has-property-descriptors": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -37587,13 +37778,14 @@
       }
     },
     "node_modules/string.prototype.trim": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.8.tgz",
-      "integrity": "sha512-lfjY4HcixfQXOfaqCvcBuOIapyaroTXhbkfJN3gcB1OtyupngWK4sEET9Knd0cXd28kTUqu/kHoV4HKSJdnjiQ==",
+      "version": "1.2.9",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.9.tgz",
+      "integrity": "sha512-klHuCNxiMZ8MlsOihJhJEBJAiMVqU3Z2nEXWfWnIqjN0gEFS9J9+IxKozWWtQGcgoa1WUZzLjKPTr4ZHNFTFxw==",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.0",
+        "es-object-atoms": "^1.0.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -37603,26 +37795,29 @@
       }
     },
     "node_modules/string.prototype.trimend": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.7.tgz",
-      "integrity": "sha512-Ni79DqeB72ZFq1uH/L6zJ+DKZTkOtPIHovb3YZHQViE+HDouuU4mBrLOLDn5Dde3RF8qw5qVETEjhu9locMLvA==",
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.8.tgz",
+      "integrity": "sha512-p73uL5VCHCO2BZZ6krwwQE3kCzM7NKmis8S//xEC6fQonchbum4eP6kR4DLEjQFO3Wnj3Fuo8NM0kOSjVdHjZQ==",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/string.prototype.trimstart": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.7.tgz",
-      "integrity": "sha512-NGhtDFu3jCEm7B4Fy0DpLewdJQOZcQ0rGbwQ/+stjnrp2i+rlKeCvos9hOIeCmqwratM47OBxY7uFZzjxHXmrg==",
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz",
+      "integrity": "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -38708,27 +38903,28 @@
       }
     },
     "node_modules/typed-array-buffer": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.0.tgz",
-      "integrity": "sha512-Y8KTSIglk9OZEr8zywiIHG/kmQ7KWyjseXs1CbSo8vC42w7hg2HgYTxSWwP0+is7bWDc1H+Fo026CpHFwm8tkw==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.2.tgz",
+      "integrity": "sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.2.1",
-        "is-typed-array": "^1.1.10"
+        "call-bind": "^1.0.7",
+        "es-errors": "^1.3.0",
+        "is-typed-array": "^1.1.13"
       },
       "engines": {
         "node": ">= 0.4"
       }
     },
     "node_modules/typed-array-byte-length": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.0.tgz",
-      "integrity": "sha512-Or/+kvLxNpeQ9DtSydonMxCx+9ZXOswtwJn17SNLvhptaXYDJvkFFP5zbfU/uLmvnBJlI4yrnXRxpdWH/M5tNA==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.1.tgz",
+      "integrity": "sha512-3iMJ9q0ao7WE9tWcaYKIptkNBuOIcZCCT0d4MRvuuH88fEoEH62IuQe0OtraD3ebQEoTRk8XCBoknUNc1Y67pw==",
       "dependencies": {
-        "call-bind": "^1.0.2",
+        "call-bind": "^1.0.7",
         "for-each": "^0.3.3",
-        "has-proto": "^1.0.1",
-        "is-typed-array": "^1.1.10"
+        "gopd": "^1.0.1",
+        "has-proto": "^1.0.3",
+        "is-typed-array": "^1.1.13"
       },
       "engines": {
         "node": ">= 0.4"
@@ -38738,15 +38934,16 @@
       }
     },
     "node_modules/typed-array-byte-offset": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.0.tgz",
-      "integrity": "sha512-RD97prjEt9EL8YgAgpOkf3O4IF9lhJFr9g0htQkm0rchFp/Vx7LW5Q8fSXXub7BXAODyUQohRMyOc3faCPd0hg==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.2.tgz",
+      "integrity": "sha512-Ous0vodHa56FviZucS2E63zkgtgrACj7omjwd/8lTEMEPFFyjfixMZ1ZXenpgCFBBt4EC1J2XsyVS2gkG0eTFA==",
       "dependencies": {
-        "available-typed-arrays": "^1.0.5",
-        "call-bind": "^1.0.2",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.7",
         "for-each": "^0.3.3",
-        "has-proto": "^1.0.1",
-        "is-typed-array": "^1.1.10"
+        "gopd": "^1.0.1",
+        "has-proto": "^1.0.3",
+        "is-typed-array": "^1.1.13"
       },
       "engines": {
         "node": ">= 0.4"
@@ -38756,13 +38953,19 @@
       }
     },
     "node_modules/typed-array-length": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.4.tgz",
-      "integrity": "sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.6.tgz",
+      "integrity": "sha512-/OxDN6OtAk5KBpGb28T+HZc2M+ADtvRxXrKKbUwtsLgdoxgX13hyy7ek6bFRl5+aBs2yZzB0c4CnQfAtVypW/g==",
       "dependencies": {
-        "call-bind": "^1.0.2",
+        "call-bind": "^1.0.7",
         "for-each": "^0.3.3",
-        "is-typed-array": "^1.1.9"
+        "gopd": "^1.0.1",
+        "has-proto": "^1.0.3",
+        "is-typed-array": "^1.1.13",
+        "possible-typed-array-names": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -40265,15 +40468,15 @@
       "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ=="
     },
     "node_modules/which-typed-array": {
-      "version": "1.1.13",
-      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.13.tgz",
-      "integrity": "sha512-P5Nra0qjSncduVPEAr7xhoF5guty49ArDTwzJ/yNuPIbZppyRxFQsRCWrocxIY+CnMVG+qfbU2FmDKyvSGClow==",
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.15.tgz",
+      "integrity": "sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==",
       "dependencies": {
-        "available-typed-arrays": "^1.0.5",
-        "call-bind": "^1.0.4",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.7",
         "for-each": "^0.3.3",
         "gopd": "^1.0.1",
-        "has-tostringtag": "^1.0.0"
+        "has-tostringtag": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
diff --git a/package.json b/package.json
index e1d544d1d..d27273af9 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "@types/lodash": "4.14.171",
     "@types/mkdirp": "1.0.1",
     "@types/node-fetch": "2.5.7",
+    "@uiw/react-split": "5.9.3",
     "@xmldom/xmldom": "0.7.13",
     "applicationinsights": "1.8.0",
     "bootstrap": "3.4.1",
@@ -98,6 +99,7 @@
     "react-splitter-layout": "4.0.0",
     "react-string-format": "1.0.1",
     "react-youtube": "9.0.1",
+    "react-window": "1.8.10",
     "reflect-metadata": "0.1.13",
     "rx-jupyter": "5.5.12",
     "sanitize-html": "2.3.3",
@@ -123,8 +125,8 @@
     "@types/datatables.net": "1.10.28",
     "@types/datatables.net-colreorder": "1.4.5",
     "@types/dom-to-image": "2.6.2",
-    "@types/enzyme": "3.10.7",
-    "@types/enzyme-adapter-react-16": "1.0.6",
+    "@types/enzyme": "3.10.12",
+    "@types/enzyme-adapter-react-16": "1.0.9",
     "@types/hasher": "0.0.31",
     "@types/jest": "26.0.20",
     "@types/jquery": "3.5.29",
@@ -136,6 +138,7 @@
     "@types/react-notification-system": "0.2.39",
     "@types/react-redux": "7.1.7",
     "@types/react-splitter-layout": "3.0.1",
+    "@types/react-window": "1.8.8",
     "@types/sanitize-html": "1.27.2",
     "@types/sinon": "2.3.3",
     "@types/styled-components": "5.1.1",
@@ -151,8 +154,8 @@
     "create-file-webpack": "1.0.2",
     "css-loader": "6.8.1",
     "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.5",
-    "enzyme-to-json": "3.6.1",
+    "enzyme-adapter-react-16": "1.15.8",
+    "enzyme-to-json": "3.6.2",
     "eslint": "8.50.0",
     "eslint-cli": "1.1.1",
     "eslint-plugin-no-null": "1.0.2",
@@ -243,4 +246,4 @@
     "printWidth": 120,
     "endOfLine": "auto"
   }
-}
+}
\ No newline at end of file
diff --git a/patches/@uiw+react-split+5.9.3.patch b/patches/@uiw+react-split+5.9.3.patch
new file mode 100644
index 000000000..3e5307463
--- /dev/null
+++ b/patches/@uiw+react-split+5.9.3.patch
@@ -0,0 +1,11 @@
+diff --git a/node_modules/@uiw/react-split/cjs/index.d.ts b/node_modules/@uiw/react-split/cjs/index.d.ts
+index 644bcc3..f794760 100644
+--- a/node_modules/@uiw/react-split/cjs/index.d.ts
++++ b/node_modules/@uiw/react-split/cjs/index.d.ts
+@@ -56,5 +56,5 @@ export default class Split extends React.Component<SplitProps, SplitState> {
+     onMouseDown(paneNumber: number, env: React.MouseEvent<HTMLDivElement, MouseEvent>): void;
+     onDragging(env: Event): void;
+     onDragEnd(): void;
+-    render(): import("react/jsx-runtime").JSX.Element;
++    render(): JSX.Element;
+ }
diff --git a/src/Common/DocumentUtility.ts b/src/Common/DocumentUtility.ts
index 99cdefc5a..322d883b0 100644
--- a/src/Common/DocumentUtility.ts
+++ b/src/Common/DocumentUtility.ts
@@ -1,9 +1,9 @@
 import { userContext } from "../UserContext";
 
-export const getEntityName = (): string => {
+export const getEntityName = (multiple?: boolean): string => {
   if (userContext.apiType === "Mongo") {
-    return "document";
+    return multiple ? "documents" : "document";
   }
 
-  return "item";
+  return multiple ? "items" : "item";
 };
diff --git a/src/Common/QueriesClient.ts b/src/Common/QueriesClient.ts
index a4834b128..b56b78bb8 100644
--- a/src/Common/QueriesClient.ts
+++ b/src/Common/QueriesClient.ts
@@ -3,8 +3,7 @@ import * as _ from "underscore";
 import * as DataModels from "../Contracts/DataModels";
 import * as ViewModels from "../Contracts/ViewModels";
 import Explorer from "../Explorer/Explorer";
-import DocumentsTab from "../Explorer/Tabs/DocumentsTab";
-import DocumentId from "../Explorer/Tree/DocumentId";
+import DocumentId, { IDocumentIdContainer } from "../Explorer/Tree/DocumentId";
 import { useDatabases } from "../Explorer/useDatabases";
 import { userContext } from "../UserContext";
 import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
@@ -162,10 +161,10 @@ export class QueriesClient {
       {
         partitionKey: QueriesClient.PartitionKey,
         partitionKeyProperties: ["id"],
-      } as DocumentsTab,
+      } as IDocumentIdContainer,
       query,
       [query.queryName],
-    ); // TODO: Remove DocumentId's dependency on DocumentsTab
+    );
     const options: any = { partitionKey: query.resourceId };
     return deleteDocument(queriesCollection, documentId)
       .then(
diff --git a/src/Common/dataAccess/deleteDocument.ts b/src/Common/dataAccess/deleteDocument.ts
index 5caef9e0e..f20dc9cc8 100644
--- a/src/Common/dataAccess/deleteDocument.ts
+++ b/src/Common/dataAccess/deleteDocument.ts
@@ -1,3 +1,4 @@
+import { BulkOperationType, OperationInput } from "@azure/cosmos";
 import { CollectionBase } from "../../Contracts/ViewModels";
 import DocumentId from "../../Explorer/Tree/DocumentId";
 import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
@@ -24,3 +25,58 @@ export const deleteDocument = async (collection: CollectionBase, documentId: Doc
     clearMessage();
   }
 };
+
+/**
+ * Bulk delete documents
+ * @param collection
+ * @param documentId
+ * @returns array of ids that were successfully deleted
+ */
+export const deleteDocuments = async (collection: CollectionBase, documentIds: DocumentId[]): Promise<DocumentId[]> => {
+  const nbDocuments = documentIds.length;
+  const clearMessage = logConsoleProgress(`Deleting ${documentIds.length} ${getEntityName(true)}`);
+  try {
+    const v2Container = await client().database(collection.databaseId).container(collection.id());
+
+    // Bulk can only delete 100 documents at a time
+    const BULK_DELETE_LIMIT = 100;
+    const promiseArray = [];
+
+    while (documentIds.length > 0) {
+      const documentIdsChunk = documentIds.splice(0, BULK_DELETE_LIMIT);
+      const operations: OperationInput[] = documentIdsChunk.map((documentId) => ({
+        id: documentId.id(),
+        // bulk delete: if not partition key is specified, do not pass empty array, but undefined
+        partitionKey:
+          documentId.partitionKeyValue &&
+          Array.isArray(documentId.partitionKeyValue) &&
+          documentId.partitionKeyValue.length === 0
+            ? undefined
+            : documentId.partitionKeyValue,
+        operationType: BulkOperationType.Delete,
+      }));
+
+      const promise = v2Container.items.bulk(operations).then((bulkResult) => {
+        return documentIdsChunk.filter((_, index) => bulkResult[index].statusCode === 204);
+      });
+      promiseArray.push(promise);
+    }
+
+    const allResult = await Promise.all(promiseArray);
+    const flatAllResult = Array.prototype.concat.apply([], allResult);
+    logConsoleInfo(
+      `Successfully deleted ${getEntityName(flatAllResult.length > 1)}: ${flatAllResult.length} out of ${nbDocuments}`,
+    );
+    // TODO: handle case result.length != nbDocuments
+    return flatAllResult;
+  } catch (error) {
+    handleError(
+      error,
+      "DeleteDocuments",
+      `Error while deleting ${documentIds.length} ${getEntityName(documentIds.length > 1)}`,
+    );
+    throw error;
+  } finally {
+    clearMessage();
+  }
+};
diff --git a/src/Explorer/Controls/Editor/EditorReact.tsx b/src/Explorer/Controls/Editor/EditorReact.tsx
index a6f487ba5..f2274d7dc 100644
--- a/src/Explorer/Controls/Editor/EditorReact.tsx
+++ b/src/Explorer/Controls/Editor/EditorReact.tsx
@@ -137,7 +137,13 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
 
     this.rootNode.innerHTML = "";
     const monaco = await loadMonaco();
-    createCallback(monaco?.editor?.create(this.rootNode, options));
+    try {
+      createCallback(monaco?.editor?.create(this.rootNode, options));
+    } catch (error) {
+      // This could happen if the parent node suddenly disappears during create()
+      console.error("Unable to create EditorReact", error);
+      return;
+    }
 
     if (this.rootNode.innerHTML) {
       this.setState({
diff --git a/src/Explorer/Tabs/DocumentsTab.html b/src/Explorer/Tabs/DocumentsTab.html
deleted file mode 100644
index cfe1b2039..000000000
--- a/src/Explorer/Tabs/DocumentsTab.html
+++ /dev/null
@@ -1,239 +0,0 @@
-<div
-  class="tab-pane active tabdocuments flexContainer"
-  data-bind="
-    setTemplateReady: true,
-    attr:{
-        id: tabId
-    },
-    visible: isActive"
-  role="tabpanel"
->
-  <!-- ko if: false -->
-  <!-- Messagebox Ok Cancel- Start -->
-  <div class="messagebox-background">
-    <div class="messagebox">
-      <h2 class="messagebox-title">Title</h2>
-      <div class="messagebox-text" tabindex="0">Text</div>
-      <div class="messagebox-buttons">
-        <div class="messagebox-buttons-container">
-          <button value="ok" class="messagebox-button-primary">Ok</button>
-          <button value="cancel" class="messagebox-button-default">Cancel</button>
-        </div>
-      </div>
-    </div>
-  </div>
-  <!-- Messagebox OK Cancel - End -->
-  <!-- /ko -->
-
-  <!-- Filter - Start -->
-  <div class="filterdivs" data-bind="visible: isFilterCreated">
-    <!-- Read-only Filter - Start -->
-    <div class="filterDocCollapsed" data-bind="visible: !isFilterExpanded() && !isPreferredApiMongoDB">
-      <span class="selectQuery">SELECT * FROM c</span>
-      <span class="appliedQuery" data-bind="text: appliedFilter"></span>
-      <button class="filterbtnstyle queryButton" data-bind="click: onShowFilterClick">Edit Filter</button>
-    </div>
-    <div
-      class="filterDocCollapsed"
-      data-bind="
-                visible: !isFilterExpanded() && isPreferredApiMongoDB"
-    >
-      <span
-        class="selectQuery"
-        data-bind="
-                visible: appliedFilter().length > 0"
-        >Filter :
-      </span>
-      <span
-        class="noFilterApplied"
-        data-bind="
-                visible: !appliedFilter().length > 0"
-        >No filter applied</span
-      >
-      <span class="appliedQuery" data-bind="text: appliedFilter"></span>
-      <button
-        class="filterbtnstyle queryButton"
-        data-bind="
-                    click: onShowFilterClick"
-      >
-        Edit Filter
-      </button>
-    </div>
-    <!-- Read-only Filter - End -->
-
-    <!-- Editable Filter - start -->
-    <div
-      class="filterDocExpanded"
-      data-bind="
-                visible: isFilterExpanded"
-    >
-      <div>
-        <div class="editFilterContainer">
-          <span class="filterspan" data-bind="visible: !isPreferredApiMongoDB"> SELECT * FROM c </span>
-          <input
-            type="text"
-            list="filtersList"
-            class="querydropdown"
-            title="Type a query predicate or choose one from the list."
-            data-bind="
-                                attr:{
-                                    placeholder:isPreferredApiMongoDB?'Type a query predicate (e.g., {´a´:´foo´}), or choose one from the drop down list, or leave empty to query all documents.':'Type a query predicate (e.g., WHERE c.id=´1´), or choose one from the drop down list, or leave empty to query all documents.'
-                                },
-                                css: { placeholderVisible: filterContent().length === 0 },
-                                textInput: filterContent,
-                                event: { keydown: onFilterKeyDown }"
-          />
-
-          <datalist
-            id="filtersList"
-            data-bind="
-                            foreach: lastFilterContents"
-          >
-            <option
-              data-bind="
-                                value: $data"
-            ></option>
-          </datalist>
-
-          <span class="filterbuttonpad">
-            <button
-              class="filterbtnstyle queryButton"
-              data-bind="
-                                click: refreshDocumentsGrid.bind($data, true),
-                                enable: applyFilterButton.enabled"
-              aria-label="Apply filter"
-              tabindex="0"
-            >
-              Apply Filter
-            </button>
-          </span>
-          <span class="filterbuttonpad">
-            <button
-              class="filterbtnstyle queryButton"
-              data-bind="
-                                visible: !isPreferredApiMongoDB && isExecuting,
-                                click: onAbortQueryClick"
-              aria-label="Cancel Query"
-              tabindex="0"
-            >
-              Cancel Query
-            </button>
-          </span>
-          <span
-            class="filterclose"
-            role="button"
-            aria-label="close filter"
-            tabindex="0"
-            data-bind="
-                            click: onHideFilterClick, event: { keydown: onCloseButtonKeyDown }"
-          >
-            <img src="/close-black.svg" style="height: 14px; width: 14px" alt="Hide filter" />
-          </span>
-        </div>
-      </div>
-    </div>
-    <!-- Editable Filter - End -->
-  </div>
-  <!-- Filter - End -->
-
-  <!-- Ids and Editor - Start -->
-  <div class="documentsTabGridAndEditor">
-    <div class="documentsContainerWithSplitter" , data-bind="attr: { id: documentContentsContainerId }">
-      <div class="flexContainer">
-        <!-- Document Ids - Start -->
-        <div
-          class="documentsGridHeaderContainer tabdocuments scrollable"
-          data-bind="
-                attr: {
-                    id: documentContentsGridId,
-                    tabindex: documentIds().length <= 0 ? -1 : 0
-                },
-                style: { height: dataContentsGridScrollHeight },
-                event: { keydown: accessibleDocumentList.onKeyDown }"
-        >
-          <table id="tabsTable" class="table table-hover can-select dataTable">
-            <thead id="theadcontent">
-              <tr>
-                <th class="documentsGridHeader" data-bind="text: idHeader" tabindex="0"></th>
-                <!-- ko if: showPartitionKey -->
-                <!-- ko foreach: partitionKeyPropertyHeaders -->
-                <th
-                  class="documentsGridHeader documentsGridPartition evenlySpacedHeader"
-                  data-bind="
-                                              attr: {
-                                                  title: $data
-                                              },
-                                              text: $data"
-                  tabindex="0"
-                ></th>
-                <!-- /ko -->
-                <!-- /ko -->
-                <th
-                  class="refreshColHeader"
-                  role="button"
-                  aria-label="Refresh documents"
-                  data-bind="event: { keydown: onRefreshButtonKeyDown }"
-                >
-                  <img
-                    class="refreshcol"
-                    src="/refresh-cosmos.svg"
-                    data-bind="click: refreshDocumentsGrid.bind($data, false)"
-                    alt="Refresh documents"
-                    tabindex="0"
-                  />
-                </th>
-              </tr>
-            </thead>
-            <tbody id="tbodycontent">
-              <!-- ko foreach: documentIds -->
-              <tr
-                class="pointer accessibleListElement"
-                data-bind="
-                                click: $data.click,
-                                css: {
-                                    gridRowSelected: $parent.selectedDocumentId && $parent.selectedDocumentId() && $parent.selectedDocumentId().rid === $data.rid,
-                                    gridRowHighlighted: $parent.accessibleDocumentList.currentItem() && $parent.accessibleDocumentList.currentItem().rid === $data.rid
-                                }"
-                tabindex="0"
-              >
-                <td class="tabdocumentsGridElement"><a data-bind="text: $data.id, attr: { title: $data.id }"></a></td>
-                <!-- ko if: $data.partitionKeyProperties -->
-                <!-- ko foreach: $data.stringPartitionKeyValues -->
-                <td class="tabdocumentsGridElement" data-bind="colspan: $parent.stringPartitionKeyValues.length + 1">
-                  <a data-bind="text: $data, attr: { title: $data }"></a>
-                </td>
-                <!-- /ko -->
-                <!-- /ko -->
-              </tr>
-              <!-- /ko -->
-            </tbody>
-          </table>
-        </div>
-        <div class="loadMore">
-          <a
-            role="button"
-            data-bind="click: loadNextPage.bind($data, false), event: { keypress: onLoadMoreKeyInput }"
-            tabindex="0"
-            >Load more</a
-          >
-        </div>
-        <!-- Document Ids - End -->
-        <!-- Splitter -->
-      </div>
-      <div class="splitter ui-resizable-handle ui-resizable-e colResizePointer" id="h_splitter2"></div>
-    </div>
-    <div class="documentWaterMark" data-bind="visible: !shouldShowEditor()">
-      <p><img src="/DocumentWaterMark.svg" alt="Document WaterMark" /></p>
-      <p class="documentWaterMarkText">Create new or work with existing document(s).</p>
-    </div>
-    <!-- Editor - Start -->
-    <json-editor
-      class="editorDivContent"
-      data-bind="visible: shouldShowEditor, css: { mongoDocumentEditor: isPreferredApiMongoDB }"
-      params="{content: initialDocumentContent, isReadOnly: false,lineNumbers: 'on',ariaLabel: 'Document editor',
-            updatedContent: selectedDocumentContent}"
-    ></json-editor>
-    <!-- Editor - End -->
-  </div>
-  <!-- Ids and Editor - End -->
-</div>
diff --git a/src/Explorer/Tabs/DocumentsTab.test.ts b/src/Explorer/Tabs/DocumentsTab.test.ts
deleted file mode 100644
index c8d84e716..000000000
--- a/src/Explorer/Tabs/DocumentsTab.test.ts
+++ /dev/null
@@ -1,152 +0,0 @@
-import * as ko from "knockout";
-import { DatabaseAccount } from "../../Contracts/DataModels";
-import * as ViewModels from "../../Contracts/ViewModels";
-import { updateUserContext } from "../../UserContext";
-import Explorer from "../Explorer";
-import DocumentId from "../Tree/DocumentId";
-import DocumentsTab from "./DocumentsTab";
-
-describe("Documents tab", () => {
-  describe("buildQuery", () => {
-    it("should generate the right select query for SQL API", () => {
-      const documentsTab = new DocumentsTab({
-        partitionKey: null,
-        documentIds: ko.observableArray<DocumentId>(),
-        tabKind: ViewModels.CollectionTabKind.Documents,
-        title: "",
-        tabPath: "",
-      });
-
-      expect(documentsTab.buildQuery("")).toContain("select");
-    });
-  });
-
-  describe("showPartitionKey", () => {
-    const explorer = new Explorer();
-    const mongoExplorer = new Explorer();
-    updateUserContext({
-      databaseAccount: {
-        properties: {
-          capabilities: [{ name: "EnableGremlin" }],
-        },
-      } as DatabaseAccount,
-    });
-
-    const collectionWithoutPartitionKey = <ViewModels.Collection>(<unknown>{
-      id: ko.observable<string>("foo"),
-      database: {
-        id: ko.observable<string>("foo"),
-      },
-      container: explorer,
-    });
-
-    const collectionWithSystemPartitionKey = <ViewModels.Collection>(<unknown>{
-      id: ko.observable<string>("foo"),
-      database: {
-        id: ko.observable<string>("foo"),
-      },
-      partitionKey: {
-        paths: ["/foo"],
-        kind: "Hash",
-        version: 2,
-        systemKey: true,
-      },
-      container: explorer,
-    });
-
-    const collectionWithNonSystemPartitionKey = <ViewModels.Collection>(<unknown>{
-      id: ko.observable<string>("foo"),
-      database: {
-        id: ko.observable<string>("foo"),
-      },
-      partitionKey: {
-        paths: ["/foo"],
-        kind: "Hash",
-        version: 2,
-        systemKey: false,
-      },
-      container: explorer,
-    });
-
-    const mongoCollectionWithSystemPartitionKey = <ViewModels.Collection>(<unknown>{
-      id: ko.observable<string>("foo"),
-      database: {
-        id: ko.observable<string>("foo"),
-      },
-      partitionKey: {
-        paths: ["/foo"],
-        kind: "Hash",
-        version: 2,
-        systemKey: true,
-      },
-      container: mongoExplorer,
-    });
-
-    it("should be false for null or undefined collection", () => {
-      const documentsTab = new DocumentsTab({
-        partitionKey: null,
-        documentIds: ko.observableArray<DocumentId>(),
-        tabKind: ViewModels.CollectionTabKind.Documents,
-        title: "",
-        tabPath: "",
-      });
-
-      expect(documentsTab.showPartitionKey).toBe(false);
-    });
-
-    it("should be false for null or undefined partitionKey", () => {
-      const documentsTab = new DocumentsTab({
-        collection: collectionWithoutPartitionKey,
-        partitionKey: null,
-        documentIds: ko.observableArray<DocumentId>(),
-        tabKind: ViewModels.CollectionTabKind.Documents,
-        title: "",
-        tabPath: "",
-      });
-
-      expect(documentsTab.showPartitionKey).toBe(false);
-    });
-
-    it("should be true for non-Mongo accounts with system partitionKey", () => {
-      const documentsTab = new DocumentsTab({
-        collection: collectionWithSystemPartitionKey,
-        partitionKey: null,
-        documentIds: ko.observableArray<DocumentId>(),
-        tabKind: ViewModels.CollectionTabKind.Documents,
-        title: "",
-        tabPath: "",
-      });
-
-      expect(documentsTab.showPartitionKey).toBe(true);
-    });
-
-    it("should be false for Mongo accounts with system partitionKey", () => {
-      updateUserContext({
-        apiType: "Mongo",
-      });
-      const documentsTab = new DocumentsTab({
-        collection: mongoCollectionWithSystemPartitionKey,
-        partitionKey: null,
-        documentIds: ko.observableArray<DocumentId>(),
-        tabKind: ViewModels.CollectionTabKind.Documents,
-        title: "",
-        tabPath: "",
-      });
-
-      expect(documentsTab.showPartitionKey).toBe(false);
-    });
-
-    it("should be true for non-system partitionKey", () => {
-      const documentsTab = new DocumentsTab({
-        collection: collectionWithNonSystemPartitionKey,
-        partitionKey: null,
-        documentIds: ko.observableArray<DocumentId>(),
-        tabKind: ViewModels.CollectionTabKind.Documents,
-        title: "",
-        tabPath: "",
-      });
-
-      expect(documentsTab.showPartitionKey).toBe(true);
-    });
-  });
-});
diff --git a/src/Explorer/Tabs/DocumentsTab.ts b/src/Explorer/Tabs/DocumentsTab.ts
deleted file mode 100644
index 949b13697..000000000
--- a/src/Explorer/Tabs/DocumentsTab.ts
+++ /dev/null
@@ -1,1080 +0,0 @@
-import { ItemDefinition, PartitionKey, PartitionKeyDefinition, QueryIterator, Resource } from "@azure/cosmos";
-import { Platform, configContext } from "ConfigContext";
-import { querySampleDocuments, readSampleDocument } from "Explorer/QueryCopilot/QueryCopilotUtilities";
-import { KeyboardAction, KeyboardActionGroup, KeyboardHandlerSetter, useKeyboardActionGroup } from "KeyboardShortcuts";
-import { QueryConstants } from "Shared/Constants";
-import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
-import * as ko from "knockout";
-import Q from "q";
-import { format } from "react-string-format";
-import DeleteDocumentIcon from "../../../images/DeleteDocument.svg";
-import NewDocumentIcon from "../../../images/NewDocument.svg";
-import UploadIcon from "../../../images/Upload_16x16.svg";
-import DiscardIcon from "../../../images/discard.svg";
-import SaveIcon from "../../../images/save-cosmos.svg";
-import * as Constants from "../../Common/Constants";
-import {
-  DocumentsGridMetrics,
-  KeyCodes,
-  QueryCopilotSampleContainerId,
-  QueryCopilotSampleDatabaseId,
-} from "../../Common/Constants";
-import editable from "../../Common/EditableUtility";
-import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-import * as HeadersUtility from "../../Common/HeadersUtility";
-import { Splitter, SplitterBounds, SplitterDirection } from "../../Common/Splitter";
-import { createDocument } from "../../Common/dataAccess/createDocument";
-import { deleteDocument } from "../../Common/dataAccess/deleteDocument";
-import { queryDocuments } from "../../Common/dataAccess/queryDocuments";
-import { readDocument } from "../../Common/dataAccess/readDocument";
-import { updateDocument } from "../../Common/dataAccess/updateDocument";
-import * as DataModels from "../../Contracts/DataModels";
-import * as ViewModels from "../../Contracts/ViewModels";
-import { Action } from "../../Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import { userContext } from "../../UserContext";
-import { logConsoleError } from "../../Utils/NotificationConsoleUtils";
-import * as QueryUtils from "../../Utils/QueryUtils";
-import { extractPartitionKeyValues } from "../../Utils/QueryUtils";
-import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
-import { useDialog } from "../Controls/Dialog";
-import Explorer from "../Explorer";
-import { AccessibleVerticalList } from "../Tree/AccessibleVerticalList";
-import DocumentId from "../Tree/DocumentId";
-import { useSelectedNode } from "../useSelectedNode";
-import template from "./DocumentsTab.html";
-import TabsBase from "./TabsBase";
-
-export default class DocumentsTab extends TabsBase {
-  public readonly html = template;
-  public selectedDocumentId: ko.Observable<DocumentId>;
-  public selectedDocumentContent: ViewModels.Editable<string>;
-  public initialDocumentContent: ko.Observable<string>;
-  public documentContentsGridId: string;
-  public documentContentsContainerId: string;
-  public filterContent: ko.Observable<string>;
-  public appliedFilter: ko.Observable<string>;
-  public lastFilterContents: ko.ObservableArray<string>;
-  public isFilterExpanded: ko.Observable<boolean>;
-  public isFilterCreated: ko.Observable<boolean>;
-  public applyFilterButton: ViewModels.Button;
-  public isEditorDirty: ko.Computed<boolean>;
-  public editorState: ko.Observable<ViewModels.DocumentExplorerState>;
-  public newDocumentButton: ViewModels.Button;
-  public saveNewDocumentButton: ViewModels.Button;
-  public saveExistingDocumentButton: ViewModels.Button;
-  public discardNewDocumentChangesButton: ViewModels.Button;
-  public discardExisitingDocumentChangesButton: ViewModels.Button;
-  public deleteExisitingDocumentButton: ViewModels.Button;
-  public displayedError: ko.Observable<string>;
-  public accessibleDocumentList: AccessibleVerticalList;
-  public dataContentsGridScrollHeight: ko.Observable<string>;
-  public isPreferredApiMongoDB: boolean;
-  public shouldShowEditor: ko.Computed<boolean>;
-  public splitter: Splitter;
-  public showPartitionKey: boolean;
-  public idHeader: string;
-
-  // TODO need to refactor
-  public partitionKey: DataModels.PartitionKey;
-  public partitionKeyPropertyHeaders: string[];
-  public partitionKeyProperties: string[];
-  public documentIds: ko.ObservableArray<DocumentId>;
-
-  private _documentsIterator: QueryIterator<ItemDefinition & Resource>;
-  private _resourceTokenPartitionKey: string;
-  private _isQueryCopilotSampleContainer: boolean;
-  private queryAbortController: AbortController;
-  private cancelQueryTimeoutID: NodeJS.Timeout;
-  private setKeyboardActions: KeyboardHandlerSetter;
-
-  constructor(options: ViewModels.DocumentsTabOptions) {
-    super(options);
-    this.setKeyboardActions = useKeyboardActionGroup(KeyboardActionGroup.ACTIVE_TAB);
-    this.isPreferredApiMongoDB = userContext.apiType === "Mongo" || options.isPreferredApiMongoDB;
-
-    this.idHeader = this.isPreferredApiMongoDB ? "_id" : "id";
-
-    this.documentContentsGridId = `documentContentsGrid${this.tabId}`;
-    this.documentContentsContainerId = `documentContentsContainer${this.tabId}`;
-    this.editorState = ko.observable<ViewModels.DocumentExplorerState>(
-      ViewModels.DocumentExplorerState.noDocumentSelected,
-    );
-    this.selectedDocumentId = ko.observable<DocumentId>();
-    this.selectedDocumentContent = editable.observable<string>("");
-    this.initialDocumentContent = ko.observable<string>("");
-    this.partitionKey = options.partitionKey || (this.collection && this.collection.partitionKey);
-    this._resourceTokenPartitionKey = options.resourceTokenPartitionKey;
-    this.documentIds = options.documentIds;
-
-    this.partitionKeyPropertyHeaders = this.collection?.partitionKeyPropertyHeaders || this.partitionKey?.paths;
-    this.partitionKeyProperties = this.partitionKeyPropertyHeaders?.map((partitionKeyPropertyHeader) =>
-      partitionKeyPropertyHeader.replace(/[/]+/g, ".").substring(1).replace(/[']+/g, ""),
-    );
-
-    this.isFilterExpanded = ko.observable<boolean>(false);
-    this.isFilterCreated = ko.observable<boolean>(true);
-    this.filterContent = ko.observable<string>("");
-    this.appliedFilter = ko.observable<string>("");
-    this.displayedError = ko.observable<string>("");
-    this.lastFilterContents = ko.observableArray<string>([
-      'WHERE c.id = "foo"',
-      "ORDER BY c._ts DESC",
-      'WHERE c.id = "foo" ORDER BY c._ts DESC',
-    ]);
-
-    this.dataContentsGridScrollHeight = ko.observable<string>(null);
-
-    // initialize splitter only after template has been loaded so dom elements are accessible
-    super.onTemplateReady((isTemplateReady: boolean) => {
-      if (isTemplateReady) {
-        const tabContainer: HTMLElement = document.getElementById("content");
-        const splitterBounds: SplitterBounds = {
-          min: Constants.DocumentsGridMetrics.DocumentEditorMinWidthRatio * tabContainer.clientWidth,
-          max: Constants.DocumentsGridMetrics.DocumentEditorMaxWidthRatio * tabContainer.clientWidth,
-        };
-        this.splitter = new Splitter({
-          splitterId: "h_splitter2",
-          leftId: this.documentContentsContainerId,
-          bounds: splitterBounds,
-          direction: SplitterDirection.Vertical,
-        });
-      }
-    });
-
-    this.accessibleDocumentList = new AccessibleVerticalList(this.documentIds());
-    this.accessibleDocumentList.setOnSelect(
-      (selectedDocument: DocumentId) => selectedDocument && selectedDocument.click(),
-    );
-    this.selectedDocumentId.subscribe((newSelectedDocumentId: DocumentId) =>
-      this.accessibleDocumentList.updateCurrentItem(newSelectedDocumentId),
-    );
-    this.documentIds.subscribe((newDocuments: DocumentId[]) => {
-      this.accessibleDocumentList.updateItemList(newDocuments);
-      if (newDocuments.length > 0) {
-        this.dataContentsGridScrollHeight(
-          newDocuments.length * DocumentsGridMetrics.IndividualRowHeight + DocumentsGridMetrics.BufferHeight + "px",
-        );
-      } else {
-        this.dataContentsGridScrollHeight(
-          DocumentsGridMetrics.IndividualRowHeight + DocumentsGridMetrics.BufferHeight + "px",
-        );
-      }
-    });
-
-    this.isEditorDirty = ko.computed<boolean>(() => {
-      switch (this.editorState()) {
-        case ViewModels.DocumentExplorerState.noDocumentSelected:
-        case ViewModels.DocumentExplorerState.exisitingDocumentNoEdits:
-          return false;
-
-        case ViewModels.DocumentExplorerState.newDocumentValid:
-        case ViewModels.DocumentExplorerState.newDocumentInvalid:
-        case ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid:
-          return true;
-
-        case ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid:
-          return (
-            this.selectedDocumentContent.getEditableOriginalValue() !==
-            this.selectedDocumentContent.getEditableCurrentValue()
-          );
-
-        default:
-          return false;
-      }
-    });
-
-    this.newDocumentButton = {
-      enabled: ko.computed<boolean>(() => {
-        switch (this.editorState()) {
-          case ViewModels.DocumentExplorerState.noDocumentSelected:
-          case ViewModels.DocumentExplorerState.exisitingDocumentNoEdits:
-            return true;
-        }
-
-        return false;
-      }),
-
-      visible: ko.computed<boolean>(() => {
-        return true;
-      }),
-    };
-
-    this.saveNewDocumentButton = {
-      enabled: ko.computed<boolean>(() => {
-        switch (this.editorState()) {
-          case ViewModels.DocumentExplorerState.newDocumentValid:
-            return true;
-        }
-
-        return false;
-      }),
-
-      visible: ko.computed<boolean>(() => {
-        switch (this.editorState()) {
-          case ViewModels.DocumentExplorerState.newDocumentValid:
-          case ViewModels.DocumentExplorerState.newDocumentInvalid:
-            return true;
-        }
-
-        return false;
-      }),
-    };
-
-    this.discardNewDocumentChangesButton = {
-      enabled: ko.computed<boolean>(() => {
-        switch (this.editorState()) {
-          case ViewModels.DocumentExplorerState.newDocumentValid:
-          case ViewModels.DocumentExplorerState.newDocumentInvalid:
-            return true;
-        }
-
-        return false;
-      }),
-
-      visible: ko.computed<boolean>(() => {
-        switch (this.editorState()) {
-          case ViewModels.DocumentExplorerState.newDocumentValid:
-          case ViewModels.DocumentExplorerState.newDocumentInvalid:
-            return true;
-        }
-
-        return false;
-      }),
-    };
-
-    this.saveExistingDocumentButton = {
-      enabled: ko.computed<boolean>(() => {
-        switch (this.editorState()) {
-          case ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid:
-            return true;
-        }
-
-        return false;
-      }),
-
-      visible: ko.computed<boolean>(() => {
-        switch (this.editorState()) {
-          case ViewModels.DocumentExplorerState.exisitingDocumentNoEdits:
-          case ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid:
-          case ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid:
-            return true;
-        }
-
-        return false;
-      }),
-    };
-
-    this.discardExisitingDocumentChangesButton = {
-      enabled: ko.computed<boolean>(() => {
-        switch (this.editorState()) {
-          case ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid:
-          case ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid:
-            return true;
-        }
-
-        return false;
-      }),
-
-      visible: ko.computed<boolean>(() => {
-        switch (this.editorState()) {
-          case ViewModels.DocumentExplorerState.exisitingDocumentNoEdits:
-          case ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid:
-          case ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid:
-            return true;
-        }
-
-        return false;
-      }),
-    };
-
-    this.deleteExisitingDocumentButton = {
-      enabled: ko.computed<boolean>(() => {
-        switch (this.editorState()) {
-          case ViewModels.DocumentExplorerState.exisitingDocumentNoEdits:
-          case ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid:
-          case ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid:
-            return true;
-        }
-
-        return false;
-      }),
-
-      visible: ko.computed<boolean>(() => {
-        switch (this.editorState()) {
-          case ViewModels.DocumentExplorerState.exisitingDocumentNoEdits:
-          case ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid:
-          case ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid:
-            return true;
-        }
-
-        return false;
-      }),
-    };
-
-    this.applyFilterButton = {
-      enabled: ko.computed<boolean>(() => {
-        return true;
-      }),
-
-      visible: ko.computed<boolean>(() => {
-        return true;
-      }),
-    };
-    this.buildCommandBarOptions();
-    this.shouldShowEditor = ko.computed<boolean>(() => {
-      const documentHasContent: boolean =
-        this.selectedDocumentContent() != null && this.selectedDocumentContent().length > 0;
-      const isNewDocument: boolean =
-        this.editorState() === ViewModels.DocumentExplorerState.newDocumentValid ||
-        this.editorState() === ViewModels.DocumentExplorerState.newDocumentInvalid;
-
-      return documentHasContent || isNewDocument;
-    });
-    this.selectedDocumentContent.subscribe((newContent: string) => this._onEditorContentChange(newContent));
-
-    this.showPartitionKey = this._shouldShowPartitionKey();
-    this._isQueryCopilotSampleContainer =
-      this.collection?.isSampleCollection &&
-      this.collection?.databaseId === QueryCopilotSampleDatabaseId &&
-      this.collection?.id() === QueryCopilotSampleContainerId;
-  }
-
-  private _shouldShowPartitionKey(): boolean {
-    if (!this.collection) {
-      return false;
-    }
-
-    if (!this.collection.partitionKey) {
-      return false;
-    }
-
-    if (this.collection.partitionKey.systemKey && this.isPreferredApiMongoDB) {
-      return false;
-    }
-
-    return true;
-  }
-
-  /**
-   * Query first page of documents
-   * Select and query first document and display content
-   */
-  private async autoPopulateContent(applyFilterButtonPressed?: boolean) {
-    // reset iterator
-    this._documentsIterator = this.createIterator();
-    // load documents
-    await this.loadNextPage(applyFilterButtonPressed);
-
-    // Select first document and load content
-    if (this.documentIds().length > 0) {
-      this.documentIds()[0].click();
-    }
-  }
-
-  public onShowFilterClick(): Q.Promise<any> {
-    this.isFilterCreated(true);
-    this.isFilterExpanded(true);
-
-    $(".filterDocExpanded").addClass("active");
-    $("#content").addClass("active");
-    $(".querydropdown").focus();
-
-    return Q();
-  }
-
-  public onHideFilterClick(): Q.Promise<any> {
-    this.isFilterExpanded(false);
-
-    $(".filterDocExpanded").removeClass("active");
-    $("#content").removeClass("active");
-    $(".queryButton").focus();
-    return Q();
-  }
-
-  public onCloseButtonKeyDown = (source: any, event: KeyboardEvent): boolean => {
-    if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) {
-      this.onHideFilterClick();
-      event.stopPropagation();
-      return false;
-    }
-    return true;
-  };
-
-  public async refreshDocumentsGrid(applyFilterButtonPressed?: boolean): Promise<void> {
-    // clear documents grid
-    this.documentIds([]);
-    try {
-      // reset iterator
-      this._documentsIterator = this.createIterator();
-      // load documents
-      await this.autoPopulateContent(applyFilterButtonPressed);
-      // collapse filter
-      this.appliedFilter(this.filterContent());
-      this.isFilterExpanded(false);
-      document.getElementById("errorStatusIcon")?.focus();
-    } catch (error) {
-      useDialog.getState().showOkModalDialog("Refresh documents grid failed", getErrorMessage(error));
-    }
-  }
-
-  public onRefreshButtonKeyDown = (source: any, event: KeyboardEvent): boolean => {
-    if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) {
-      this.refreshDocumentsGrid();
-      event.stopPropagation();
-      return false;
-    }
-    return true;
-  };
-
-  public onAbortQueryClick(): void {
-    this.queryAbortController.abort();
-  }
-
-  /**
-   * TODO Doesn't seem to be used: remove?
-   * @param clickedDocumentId
-   * @returns
-   */
-  public onDocumentIdClick(clickedDocumentId: DocumentId): Q.Promise<any> {
-    if (this.editorState() !== ViewModels.DocumentExplorerState.noDocumentSelected) {
-      return Q();
-    }
-
-    this.editorState(ViewModels.DocumentExplorerState.exisitingDocumentNoEdits);
-
-    return Q();
-  }
-
-  public onNewDocumentClick = (): void => {
-    if (this.isEditorDirty()) {
-      useDialog
-        .getState()
-        .showOkCancelModalDialog(
-          "Unsaved changes",
-          "Changes will be lost. Do you want to continue?",
-          "OK",
-          () => this.initializeNewDocument(),
-          "Cancel",
-          undefined,
-        );
-    } else {
-      this.initializeNewDocument();
-    }
-  };
-
-  private initializeNewDocument = (): void => {
-    this.selectedDocumentId(null);
-    const newDocument: any = {
-      id: "replace_with_new_document_id",
-    };
-    this.partitionKeyProperties.forEach((partitionKeyProperty) => {
-      let target = newDocument;
-      const keySegments = partitionKeyProperty.split(".");
-      const finalSegment = keySegments.pop();
-
-      // Initialize nested objects as needed
-      keySegments.forEach((segment) => {
-        target = target[segment] = target[segment] || {};
-      });
-
-      target[finalSegment] = "replace_with_new_partition_key_value";
-    });
-    const defaultDocument: string = this.renderObjectForEditor(newDocument, null, 4);
-    this.initialDocumentContent(defaultDocument);
-    this.selectedDocumentContent.setBaseline(defaultDocument);
-    this.editorState(ViewModels.DocumentExplorerState.newDocumentValid);
-  };
-
-  public onSaveNewDocumentClick = (): Promise<any> => {
-    this.isExecutionError(false);
-    const startKey: number = TelemetryProcessor.traceStart(Action.CreateDocument, {
-      dataExplorerArea: Constants.Areas.Tab,
-      tabTitle: this.tabTitle(),
-    });
-    const document = JSON.parse(this.selectedDocumentContent());
-    this.isExecuting(true);
-    return createDocument(this.collection, document)
-      .then(
-        (savedDocument: any) => {
-          const value: string = this.renderObjectForEditor(savedDocument || {}, null, 4);
-          this.selectedDocumentContent.setBaseline(value);
-          this.initialDocumentContent(value);
-          const partitionKeyValueArray: PartitionKey[] = extractPartitionKeyValues(
-            savedDocument,
-            this.partitionKey as PartitionKeyDefinition,
-          );
-          let id = new DocumentId(this, savedDocument, partitionKeyValueArray);
-          let ids = this.documentIds();
-          ids.push(id);
-
-          this.selectedDocumentId(id);
-          this.documentIds(ids);
-          this.editorState(ViewModels.DocumentExplorerState.exisitingDocumentNoEdits);
-          TelemetryProcessor.traceSuccess(
-            Action.CreateDocument,
-            {
-              dataExplorerArea: Constants.Areas.Tab,
-              tabTitle: this.tabTitle(),
-            },
-            startKey,
-          );
-        },
-        (error) => {
-          this.isExecutionError(true);
-          const errorMessage = getErrorMessage(error);
-          useDialog.getState().showOkModalDialog("Create document failed", errorMessage);
-          TelemetryProcessor.traceFailure(
-            Action.CreateDocument,
-            {
-              dataExplorerArea: Constants.Areas.Tab,
-              tabTitle: this.tabTitle(),
-              error: errorMessage,
-              errorStack: getErrorStack(error),
-            },
-            startKey,
-          );
-        },
-      )
-      .finally(() => this.isExecuting(false));
-  };
-
-  public onRevertNewDocumentClick = (): Q.Promise<any> => {
-    this.initialDocumentContent("");
-    this.selectedDocumentContent("");
-    this.editorState(ViewModels.DocumentExplorerState.noDocumentSelected);
-
-    return Q();
-  };
-
-  public onSaveExistingDocumentClick = (): Promise<any> => {
-    const selectedDocumentId = this.selectedDocumentId();
-    const documentContent = JSON.parse(this.selectedDocumentContent());
-
-    const partitionKeyValueArray: PartitionKey[] = extractPartitionKeyValues(
-      documentContent,
-      this.partitionKey as PartitionKeyDefinition,
-    );
-    selectedDocumentId.partitionKeyValue = partitionKeyValueArray;
-
-    this.isExecutionError(false);
-    const startKey: number = TelemetryProcessor.traceStart(Action.UpdateDocument, {
-      dataExplorerArea: Constants.Areas.Tab,
-      tabTitle: this.tabTitle(),
-    });
-    this.isExecuting(true);
-    return updateDocument(this.collection, selectedDocumentId, documentContent)
-      .then(
-        (updatedDocument: any) => {
-          const value: string = this.renderObjectForEditor(updatedDocument || {}, null, 4);
-          this.selectedDocumentContent.setBaseline(value);
-          this.initialDocumentContent(value);
-          this.documentIds().forEach((documentId: DocumentId) => {
-            if (documentId.rid === updatedDocument._rid) {
-              documentId.id(updatedDocument.id);
-            }
-          });
-          this.editorState(ViewModels.DocumentExplorerState.exisitingDocumentNoEdits);
-          TelemetryProcessor.traceSuccess(
-            Action.UpdateDocument,
-            {
-              dataExplorerArea: Constants.Areas.Tab,
-              tabTitle: this.tabTitle(),
-            },
-            startKey,
-          );
-        },
-        (error) => {
-          this.isExecutionError(true);
-          const errorMessage = getErrorMessage(error);
-          useDialog.getState().showOkModalDialog("Update document failed", errorMessage);
-          TelemetryProcessor.traceFailure(
-            Action.UpdateDocument,
-            {
-              dataExplorerArea: Constants.Areas.Tab,
-              tabTitle: this.tabTitle(),
-              error: errorMessage,
-              errorStack: getErrorStack(error),
-            },
-            startKey,
-          );
-        },
-      )
-      .finally(() => this.isExecuting(false));
-  };
-
-  public onRevertExisitingDocumentClick = (): Q.Promise<any> => {
-    this.selectedDocumentContent.setBaseline(this.initialDocumentContent());
-    this.initialDocumentContent.valueHasMutated();
-    this.editorState(ViewModels.DocumentExplorerState.exisitingDocumentNoEdits);
-
-    return Q();
-  };
-
-  public onDeleteExisitingDocumentClick = async (): Promise<void> => {
-    const selectedDocumentId = this.selectedDocumentId();
-    const msg = !this.isPreferredApiMongoDB
-      ? "Are you sure you want to delete the selected item ?"
-      : "Are you sure you want to delete the selected document ?";
-
-    useDialog
-      .getState()
-      .showOkCancelModalDialog(
-        "Confirm delete",
-        msg,
-        "Delete",
-        async () => await this._deleteDocument(selectedDocumentId),
-        "Cancel",
-        undefined,
-      );
-  };
-
-  public onValidDocumentEdit(): Q.Promise<any> {
-    if (
-      this.editorState() === ViewModels.DocumentExplorerState.newDocumentInvalid ||
-      this.editorState() === ViewModels.DocumentExplorerState.newDocumentValid
-    ) {
-      this.editorState(ViewModels.DocumentExplorerState.newDocumentValid);
-      return Q();
-    }
-
-    this.editorState(ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid);
-    return Q();
-  }
-
-  public onInvalidDocumentEdit(): Q.Promise<any> {
-    if (
-      this.editorState() === ViewModels.DocumentExplorerState.newDocumentInvalid ||
-      this.editorState() === ViewModels.DocumentExplorerState.newDocumentValid
-    ) {
-      this.editorState(ViewModels.DocumentExplorerState.newDocumentInvalid);
-      return Q();
-    }
-
-    if (
-      this.editorState() === ViewModels.DocumentExplorerState.exisitingDocumentNoEdits ||
-      this.editorState() === ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid
-    ) {
-      this.editorState(ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid);
-      return Q();
-    }
-
-    return Q();
-  }
-
-  public onTabClick(): void {
-    super.onTabClick();
-    this.collection && this.collection.selectedSubnodeKind(ViewModels.CollectionTabKind.Documents);
-  }
-
-  public onFilterKeyDown(model: unknown, e: KeyboardEvent): boolean {
-    if (e.key === "Enter") {
-      this.refreshDocumentsGrid(true);
-
-      // Suppress the default behavior of the key
-      return false;
-    } else if (e.key === "Escape") {
-      this.onHideFilterClick();
-
-      // Suppress the default behavior of the key
-      return false;
-    } else {
-      // Allow the default behavior of the key
-      return true;
-    }
-  }
-
-  public async onActivate(): Promise<void> {
-    super.onActivate();
-
-    this.setKeyboardActions({
-      [KeyboardAction.SEARCH]: () => {
-        this.onShowFilterClick();
-        return true;
-      },
-      [KeyboardAction.CLEAR_SEARCH]: () => {
-        this.filterContent("");
-        this.refreshDocumentsGrid(true);
-        return true;
-      },
-    });
-
-    if (!this._documentsIterator) {
-      try {
-        await this.autoPopulateContent();
-      } catch (error) {
-        if (this.onLoadStartKey != null && this.onLoadStartKey != undefined) {
-          TelemetryProcessor.traceFailure(
-            Action.Tab,
-            {
-              databaseName: this.collection.databaseId,
-              collectionName: this.collection.id(),
-
-              dataExplorerArea: Constants.Areas.Tab,
-              tabTitle: this.tabTitle(),
-              error: getErrorMessage(error),
-              errorStack: getErrorStack(error),
-            },
-            this.onLoadStartKey,
-          );
-          this.onLoadStartKey = null;
-        }
-      }
-    }
-  }
-
-  protected __deleteDocument(documentId: DocumentId): Promise<void> {
-    return deleteDocument(this.collection, documentId);
-  }
-
-  private _deleteDocument(selectedDocumentId: DocumentId): Promise<void> {
-    this.isExecutionError(false);
-    const startKey: number = TelemetryProcessor.traceStart(Action.DeleteDocument, {
-      dataExplorerArea: Constants.Areas.Tab,
-      tabTitle: this.tabTitle(),
-    });
-    this.isExecuting(true);
-    return this.__deleteDocument(selectedDocumentId)
-      .then(
-        () => {
-          this.documentIds.remove((documentId: DocumentId) => documentId.rid === selectedDocumentId.rid);
-          this.selectedDocumentContent("");
-          this.selectedDocumentId(null);
-          this.editorState(ViewModels.DocumentExplorerState.noDocumentSelected);
-          TelemetryProcessor.traceSuccess(
-            Action.DeleteDocument,
-            {
-              dataExplorerArea: Constants.Areas.Tab,
-              tabTitle: this.tabTitle(),
-            },
-            startKey,
-          );
-        },
-        (error) => {
-          this.isExecutionError(true);
-          console.error(error);
-          TelemetryProcessor.traceFailure(
-            Action.DeleteDocument,
-            {
-              dataExplorerArea: Constants.Areas.Tab,
-              tabTitle: this.tabTitle(),
-              error: getErrorMessage(error),
-              errorStack: getErrorStack(error),
-            },
-            startKey,
-          );
-        },
-      )
-      .finally(() => this.isExecuting(false));
-  }
-
-  public createIterator(): QueryIterator<ItemDefinition & Resource> {
-    this.queryAbortController = new AbortController();
-    const filter: string = this.filterContent().trim();
-    const query: string = this.buildQuery(filter);
-    let options: any = {};
-    options.enableCrossPartitionQuery = HeadersUtility.shouldEnableCrossPartitionKey();
-
-    if (this._resourceTokenPartitionKey) {
-      options.partitionKey = this._resourceTokenPartitionKey;
-    }
-    options.abortSignal = this.queryAbortController.signal;
-    return this._isQueryCopilotSampleContainer
-      ? querySampleDocuments(query, options)
-      : queryDocuments(this.collection.databaseId, this.collection.id(), query, options);
-  }
-
-  public async selectDocument(documentId: DocumentId): Promise<void> {
-    this.selectedDocumentId(documentId);
-    const content = await (this._isQueryCopilotSampleContainer
-      ? readSampleDocument(documentId)
-      : readDocument(this.collection, documentId));
-    this.initDocumentEditor(documentId, content);
-  }
-
-  public loadNextPage(applyFilterButtonClicked?: boolean): Q.Promise<any> {
-    this.isExecuting(true);
-    this.isExecutionError(false);
-    let automaticallyCancelQueryAfterTimeout: boolean;
-    if (applyFilterButtonClicked && this.queryTimeoutEnabled()) {
-      const queryTimeout: number = LocalStorageUtility.getEntryNumber(StorageKey.QueryTimeout);
-      automaticallyCancelQueryAfterTimeout = LocalStorageUtility.getEntryBoolean(
-        StorageKey.AutomaticallyCancelQueryAfterTimeout,
-      );
-      const cancelQueryTimeoutID: NodeJS.Timeout = setTimeout(() => {
-        if (this.isExecuting()) {
-          if (automaticallyCancelQueryAfterTimeout) {
-            this.queryAbortController.abort();
-          } else {
-            useDialog
-              .getState()
-              .showOkCancelModalDialog(
-                QueryConstants.CancelQueryTitle,
-                format(QueryConstants.CancelQuerySubTextTemplate, QueryConstants.CancelQueryTimeoutThresholdReached),
-                "Yes",
-                () => this.queryAbortController.abort(),
-                "No",
-                undefined,
-              );
-          }
-        }
-      }, queryTimeout);
-      this.cancelQueryTimeoutID = cancelQueryTimeoutID;
-    }
-    return this._loadNextPageInternal()
-      .then(
-        (documentsIdsResponse = []) => {
-          const currentDocuments = this.documentIds();
-          const currentDocumentsRids = currentDocuments.map((currentDocument) => currentDocument.rid);
-          const nextDocumentIds = documentsIdsResponse
-            // filter documents already loaded in observable
-            .filter((d: any) => {
-              return currentDocumentsRids.indexOf(d._rid) < 0;
-            })
-            // map raw response to view model
-            .map((rawDocument: any) => {
-              const partitionKeyValue = rawDocument._partitionKeyValue;
-              return new DocumentId(this, rawDocument, partitionKeyValue);
-            });
-
-          const merged = currentDocuments.concat(nextDocumentIds);
-          this.documentIds(merged);
-          if (this.onLoadStartKey != null && this.onLoadStartKey != undefined) {
-            TelemetryProcessor.traceSuccess(
-              Action.Tab,
-              {
-                databaseName: this.collection.databaseId,
-                collectionName: this.collection.id(),
-
-                dataExplorerArea: Constants.Areas.Tab,
-                tabTitle: this.tabTitle(),
-              },
-              this.onLoadStartKey,
-            );
-            this.onLoadStartKey = null;
-          }
-        },
-        (error) => {
-          this.isExecutionError(true);
-          const errorMessage = getErrorMessage(error);
-          logConsoleError(errorMessage);
-          if (this.onLoadStartKey != null && this.onLoadStartKey != undefined) {
-            TelemetryProcessor.traceFailure(
-              Action.Tab,
-              {
-                databaseName: this.collection.databaseId,
-                collectionName: this.collection.id(),
-
-                dataExplorerArea: Constants.Areas.Tab,
-                tabTitle: this.tabTitle(),
-                error: errorMessage,
-                errorStack: getErrorStack(error),
-              },
-              this.onLoadStartKey,
-            );
-            this.onLoadStartKey = null;
-          }
-        },
-      )
-      .finally(() => {
-        this.isExecuting(false);
-        if (applyFilterButtonClicked && this.queryTimeoutEnabled()) {
-          clearTimeout(this.cancelQueryTimeoutID);
-          if (!automaticallyCancelQueryAfterTimeout) {
-            useDialog.getState().closeDialog();
-          }
-        }
-      });
-  }
-
-  public onLoadMoreKeyInput = (source: any, event: KeyboardEvent): void => {
-    if (event.key === " " || event.key === "Enter") {
-      const focusElement = document.getElementById(this.documentContentsGridId);
-      this.loadNextPage();
-      focusElement && focusElement.focus();
-      event.stopPropagation();
-      event.preventDefault();
-    }
-  };
-
-  protected _loadNextPageInternal(): Q.Promise<DataModels.DocumentId[]> {
-    return Q(this._documentsIterator.fetchNext().then((response) => response.resources));
-  }
-
-  protected _onEditorContentChange(newContent: string) {
-    try {
-      let parsed: any = JSON.parse(newContent);
-      this.onValidDocumentEdit();
-    } catch (e) {
-      this.onInvalidDocumentEdit();
-    }
-  }
-
-  public initDocumentEditor(documentId: DocumentId, documentContent: any): Q.Promise<any> {
-    if (documentId) {
-      const content: string = this.renderObjectForEditor(documentContent, null, 4);
-      this.selectedDocumentContent.setBaseline(content);
-      this.initialDocumentContent(content);
-      const newState = documentId
-        ? ViewModels.DocumentExplorerState.exisitingDocumentNoEdits
-        : ViewModels.DocumentExplorerState.newDocumentValid;
-      this.editorState(newState);
-    }
-
-    return Q();
-  }
-
-  public buildQuery(filter: string): string {
-    return QueryUtils.buildDocumentsQuery(filter, this.partitionKeyProperties, this.partitionKey);
-  }
-
-  protected getTabsButtons(): CommandButtonComponentProps[] {
-    if (configContext.platform === Platform.Fabric && userContext.fabricContext?.isReadOnly) {
-      // All the following buttons require write access
-      return [];
-    }
-
-    const buttons: CommandButtonComponentProps[] = [];
-    const label = !this.isPreferredApiMongoDB ? "New Item" : "New Document";
-    if (this.newDocumentButton.visible()) {
-      buttons.push({
-        iconSrc: NewDocumentIcon,
-        iconAlt: label,
-        keyboardAction: KeyboardAction.NEW_ITEM,
-        onCommandClick: this.onNewDocumentClick,
-        commandButtonLabel: label,
-        ariaLabel: label,
-        hasPopup: false,
-        disabled: !this.newDocumentButton.enabled() || useSelectedNode.getState().isQueryCopilotCollectionSelected(),
-        id: "mongoNewDocumentBtn",
-      });
-    }
-
-    if (this.saveNewDocumentButton.visible()) {
-      const label = "Save";
-      buttons.push({
-        iconSrc: SaveIcon,
-        iconAlt: label,
-        keyboardAction: KeyboardAction.SAVE_ITEM,
-        onCommandClick: this.onSaveNewDocumentClick,
-        commandButtonLabel: label,
-        ariaLabel: label,
-        hasPopup: false,
-        disabled:
-          !this.saveNewDocumentButton.enabled() || useSelectedNode.getState().isQueryCopilotCollectionSelected(),
-      });
-    }
-
-    if (this.discardNewDocumentChangesButton.visible()) {
-      const label = "Discard";
-      buttons.push({
-        iconSrc: DiscardIcon,
-        iconAlt: label,
-        keyboardAction: KeyboardAction.CANCEL_OR_DISCARD,
-        onCommandClick: this.onRevertNewDocumentClick,
-        commandButtonLabel: label,
-        ariaLabel: label,
-        hasPopup: false,
-        disabled:
-          !this.discardNewDocumentChangesButton.enabled() ||
-          useSelectedNode.getState().isQueryCopilotCollectionSelected(),
-      });
-    }
-
-    if (this.saveExistingDocumentButton.visible()) {
-      const label = "Update";
-      buttons.push({
-        iconSrc: SaveIcon,
-        iconAlt: label,
-        keyboardAction: KeyboardAction.SAVE_ITEM,
-        onCommandClick: this.onSaveExistingDocumentClick,
-        commandButtonLabel: label,
-        ariaLabel: label,
-        hasPopup: false,
-        disabled:
-          !this.saveExistingDocumentButton.enabled() || useSelectedNode.getState().isQueryCopilotCollectionSelected(),
-      });
-    }
-
-    if (this.discardExisitingDocumentChangesButton.visible()) {
-      const label = "Discard";
-      buttons.push({
-        iconSrc: DiscardIcon,
-        iconAlt: label,
-        keyboardAction: KeyboardAction.CANCEL_OR_DISCARD,
-        onCommandClick: this.onRevertExisitingDocumentClick,
-        commandButtonLabel: label,
-        ariaLabel: label,
-        hasPopup: false,
-        disabled:
-          !this.discardExisitingDocumentChangesButton.enabled() ||
-          useSelectedNode.getState().isQueryCopilotCollectionSelected(),
-      });
-    }
-
-    if (this.deleteExisitingDocumentButton.visible()) {
-      const label = "Delete";
-      buttons.push({
-        iconSrc: DeleteDocumentIcon,
-        iconAlt: label,
-        keyboardAction: KeyboardAction.DELETE_ITEM,
-        onCommandClick: this.onDeleteExisitingDocumentClick,
-        commandButtonLabel: label,
-        ariaLabel: label,
-        hasPopup: false,
-        disabled:
-          !this.deleteExisitingDocumentButton.enabled() ||
-          useSelectedNode.getState().isQueryCopilotCollectionSelected(),
-      });
-    }
-
-    if (!this.isPreferredApiMongoDB) {
-      buttons.push(DocumentsTab._createUploadButton(this.collection.container));
-    }
-
-    return buttons;
-  }
-
-  protected buildCommandBarOptions(): void {
-    ko.computed(() =>
-      ko.toJSON([
-        this.newDocumentButton.visible,
-        this.newDocumentButton.enabled,
-        this.saveNewDocumentButton.visible,
-        this.saveNewDocumentButton.enabled,
-        this.discardNewDocumentChangesButton.visible,
-        this.discardNewDocumentChangesButton.enabled,
-        this.saveExistingDocumentButton.visible,
-        this.saveExistingDocumentButton.enabled,
-        this.discardExisitingDocumentChangesButton.visible,
-        this.discardExisitingDocumentChangesButton.enabled,
-        this.deleteExisitingDocumentButton.visible,
-        this.deleteExisitingDocumentButton.enabled,
-      ]),
-    ).subscribe(() => this.updateNavbarWithTabsButtons());
-    this.updateNavbarWithTabsButtons();
-  }
-
-  public static _createUploadButton(container: Explorer): CommandButtonComponentProps {
-    const label = "Upload Item";
-    return {
-      id: "uploadItemBtn",
-      iconSrc: UploadIcon,
-      iconAlt: label,
-      onCommandClick: () => {
-        const selectedCollection: ViewModels.Collection = useSelectedNode.getState().findSelectedCollection();
-        selectedCollection && container.openUploadItemsPanePane();
-      },
-      commandButtonLabel: label,
-      ariaLabel: label,
-      hasPopup: true,
-      disabled:
-        useSelectedNode.getState().isDatabaseNodeOrNoneSelected() ||
-        useSelectedNode.getState().isQueryCopilotCollectionSelected(),
-    };
-  }
-
-  private queryTimeoutEnabled(): boolean {
-    return !this.isPreferredApiMongoDB && LocalStorageUtility.getEntryBoolean(StorageKey.QueryTimeoutEnabled);
-  }
-}
diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.test.tsx b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.test.tsx
new file mode 100644
index 000000000..d224c2f9a
--- /dev/null
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.test.tsx
@@ -0,0 +1,476 @@
+import { FeedResponse, ItemDefinition, Resource } from "@azure/cosmos";
+import { deleteDocuments } from "Common/dataAccess/deleteDocument";
+import { Platform, updateConfigContext } from "ConfigContext";
+import { EditorReactProps } from "Explorer/Controls/Editor/EditorReact";
+import { useCommandBar } from "Explorer/Menus/CommandBar/CommandBarComponentAdapter";
+import {
+  ButtonsDependencies,
+  DELETE_BUTTON_ID,
+  DISCARD_BUTTON_ID,
+  DocumentsTabComponent,
+  IDocumentsTabComponentProps,
+  NEW_DOCUMENT_BUTTON_ID,
+  SAVE_BUTTON_ID,
+  UPDATE_BUTTON_ID,
+  UPLOAD_BUTTON_ID,
+  buildQuery,
+  getDiscardExistingDocumentChangesButtonState,
+  getDiscardNewDocumentChangesButtonState,
+  getSaveExistingDocumentButtonState,
+  getSaveNewDocumentButtonState,
+  getTabsButtons,
+  showPartitionKey,
+} from "Explorer/Tabs/DocumentsTabV2/DocumentsTabV2";
+import { ReactWrapper, ShallowWrapper, mount, shallow } from "enzyme";
+import * as ko from "knockout";
+import React from "react";
+import { act } from "react-dom/test-utils";
+import { DatabaseAccount, DocumentId } from "../../../Contracts/DataModels";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import { updateUserContext } from "../../../UserContext";
+import Explorer from "../../Explorer";
+
+jest.mock("Common/dataAccess/queryDocuments", () => ({
+  queryDocuments: jest.fn(() => ({
+    // Omit headers, because we can't mock a private field and we don't need to test it
+    fetchNext: (): Promise<Omit<FeedResponse<ItemDefinition & Resource>, "headers">> =>
+      Promise.resolve({
+        resources: [{ id: "id", _rid: "rid", _self: "self", _etag: "etag", _ts: 123 }],
+        hasMoreResults: false,
+        diagnostics: undefined,
+
+        continuation: undefined,
+        continuationToken: undefined,
+        queryMetrics: "queryMetrics",
+        requestCharge: 1,
+        activityId: "activityId",
+        indexMetrics: "indexMetrics",
+      }),
+  })),
+}));
+
+const PROPERTY_VALUE = "__SOME_PROPERTY_VALUE__";
+jest.mock("Common/dataAccess/readDocument", () => ({
+  readDocument: jest.fn(() =>
+    Promise.resolve({
+      container: undefined,
+      id: "id",
+      property: PROPERTY_VALUE,
+    }),
+  ),
+}));
+
+jest.mock("Explorer/Controls/Editor/EditorReact", () => ({
+  EditorReact: (props: EditorReactProps) => <>{props.content}</>,
+}));
+
+jest.mock("Explorer/Controls/Dialog", () => ({
+  useDialog: {
+    getState: jest.fn(() => ({
+      showOkCancelModalDialog: (title: string, subText: string, okLabel: string, onOk: () => void) => onOk(),
+      showOkModalDialog: () => {},
+    })),
+  },
+}));
+
+jest.mock("Common/dataAccess/deleteDocument", () => ({
+  deleteDocuments: jest.fn((collection: ViewModels.CollectionBase, documentIds: DocumentId[]) =>
+    Promise.resolve(documentIds),
+  ),
+}));
+
+async function waitForComponentToPaint<P = unknown>(wrapper: ReactWrapper<P> | ShallowWrapper<P>, amount = 0) {
+  let newWrapper;
+  await act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, amount));
+    newWrapper = wrapper.update();
+  });
+  return newWrapper;
+}
+
+describe("Documents tab (noSql API)", () => {
+  describe("buildQuery", () => {
+    it("should generate the right select query for SQL API", () => {
+      expect(buildQuery(false, "")).toContain("select");
+    });
+  });
+
+  describe("showPartitionKey", () => {
+    const explorer = new Explorer();
+    const mongoExplorer = new Explorer();
+    updateUserContext({
+      databaseAccount: {
+        properties: {
+          capabilities: [{ name: "EnableGremlin" }],
+        },
+      } as DatabaseAccount,
+    });
+
+    const collectionWithoutPartitionKey: ViewModels.Collection = {
+      id: ko.observable<string>("foo"),
+      databaseId: "foo",
+      container: explorer,
+    } as ViewModels.Collection;
+
+    const collectionWithSystemPartitionKey: ViewModels.Collection = {
+      id: ko.observable<string>("foo"),
+      databaseId: "foo",
+      partitionKey: {
+        paths: ["/foo"],
+        kind: "Hash",
+        version: 2,
+        systemKey: true,
+      },
+      container: explorer,
+    } as ViewModels.Collection;
+
+    const collectionWithNonSystemPartitionKey: ViewModels.Collection = {
+      id: ko.observable<string>("foo"),
+      databaseId: "foo",
+      partitionKey: {
+        paths: ["/foo"],
+        kind: "Hash",
+        version: 2,
+        systemKey: false,
+      },
+      container: explorer,
+    } as ViewModels.Collection;
+
+    const mongoCollectionWithSystemPartitionKey: ViewModels.Collection = {
+      id: ko.observable<string>("foo"),
+      databaseId: "foo",
+      partitionKey: {
+        paths: ["/foo"],
+        kind: "Hash",
+        version: 2,
+        systemKey: true,
+      },
+      container: mongoExplorer,
+    } as ViewModels.Collection;
+
+    it("should be false for null or undefined collection", () => {
+      expect(showPartitionKey(undefined, false)).toBe(false);
+      expect(showPartitionKey(null, false)).toBe(false);
+      expect(showPartitionKey(undefined, true)).toBe(false);
+      expect(showPartitionKey(null, true)).toBe(false);
+    });
+
+    it("should be false for null or undefined partitionKey", () => {
+      expect(showPartitionKey(collectionWithoutPartitionKey, false)).toBe(false);
+    });
+
+    it("should be true for non-Mongo accounts with system partitionKey", () => {
+      expect(showPartitionKey(collectionWithSystemPartitionKey, false)).toBe(true);
+    });
+
+    it("should be false for Mongo accounts with system partitionKey", () => {
+      expect(showPartitionKey(mongoCollectionWithSystemPartitionKey, true)).toBe(false);
+    });
+
+    it("should be true for non-system partitionKey", () => {
+      expect(showPartitionKey(collectionWithNonSystemPartitionKey, false)).toBe(true);
+    });
+  });
+
+  describe("when getting command bar button state", () => {
+    describe("should set Save New Document state", () => {
+      const testCases = new Set<{ state: ViewModels.DocumentExplorerState; enabled: boolean; visible: boolean }>();
+      testCases.add({ state: ViewModels.DocumentExplorerState.noDocumentSelected, enabled: false, visible: false });
+      testCases.add({ state: ViewModels.DocumentExplorerState.newDocumentValid, enabled: true, visible: true });
+      testCases.add({ state: ViewModels.DocumentExplorerState.newDocumentInvalid, enabled: false, visible: true });
+      testCases.add({
+        state: ViewModels.DocumentExplorerState.exisitingDocumentNoEdits,
+        enabled: false,
+        visible: false,
+      });
+      testCases.add({
+        state: ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid,
+        enabled: false,
+        visible: false,
+      });
+      testCases.add({
+        state: ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid,
+        enabled: false,
+        visible: false,
+      });
+
+      testCases.forEach((testCase) => {
+        const state = getSaveNewDocumentButtonState(testCase.state);
+        it(`enable for ${testCase.state}`, () => {
+          expect(state.enabled).toBe(testCase.enabled);
+        });
+        it(`visible for ${testCase.state}`, () => {
+          expect(state.visible).toBe(testCase.visible);
+        });
+      });
+    });
+
+    describe("should set Discard New Document state", () => {
+      const testCases = new Set<{ state: ViewModels.DocumentExplorerState; enabled: boolean; visible: boolean }>();
+      testCases.add({ state: ViewModels.DocumentExplorerState.noDocumentSelected, enabled: false, visible: false });
+      testCases.add({ state: ViewModels.DocumentExplorerState.newDocumentValid, enabled: true, visible: true });
+      testCases.add({ state: ViewModels.DocumentExplorerState.newDocumentInvalid, enabled: true, visible: true });
+      testCases.add({
+        state: ViewModels.DocumentExplorerState.exisitingDocumentNoEdits,
+        enabled: false,
+        visible: false,
+      });
+      testCases.add({
+        state: ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid,
+        enabled: false,
+        visible: false,
+      });
+      testCases.add({
+        state: ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid,
+        enabled: false,
+        visible: false,
+      });
+
+      testCases.forEach((testCase) => {
+        const state = getDiscardNewDocumentChangesButtonState(testCase.state);
+        it(`enable for ${testCase.state}`, () => {
+          expect(state.enabled).toBe(testCase.enabled);
+        });
+        it(`visible for ${testCase.state}`, () => {
+          expect(state.visible).toBe(testCase.visible);
+        });
+      });
+    });
+
+    describe("should set Save Existing Document state", () => {
+      const testCases = new Set<{ state: ViewModels.DocumentExplorerState; enabled: boolean; visible: boolean }>();
+      testCases.add({ state: ViewModels.DocumentExplorerState.noDocumentSelected, enabled: false, visible: false });
+      testCases.add({ state: ViewModels.DocumentExplorerState.newDocumentValid, enabled: false, visible: false });
+      testCases.add({ state: ViewModels.DocumentExplorerState.newDocumentInvalid, enabled: false, visible: false });
+      testCases.add({
+        state: ViewModels.DocumentExplorerState.exisitingDocumentNoEdits,
+        enabled: false,
+        visible: true,
+      });
+      testCases.add({
+        state: ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid,
+        enabled: true,
+        visible: true,
+      });
+      testCases.add({
+        state: ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid,
+        enabled: false,
+        visible: true,
+      });
+
+      testCases.forEach((testCase) => {
+        const state = getSaveExistingDocumentButtonState(testCase.state);
+        it(`enable for ${testCase.state}`, () => {
+          expect(state.enabled).toBe(testCase.enabled);
+        });
+        it(`visible for ${testCase.state}`, () => {
+          expect(state.visible).toBe(testCase.visible);
+        });
+      });
+    });
+
+    describe("should set Discard Existing Document state", () => {
+      const testCases = new Set<{ state: ViewModels.DocumentExplorerState; enabled: boolean; visible: boolean }>();
+      testCases.add({ state: ViewModels.DocumentExplorerState.noDocumentSelected, enabled: false, visible: false });
+      testCases.add({ state: ViewModels.DocumentExplorerState.newDocumentValid, enabled: false, visible: false });
+      testCases.add({ state: ViewModels.DocumentExplorerState.newDocumentInvalid, enabled: false, visible: false });
+      testCases.add({
+        state: ViewModels.DocumentExplorerState.exisitingDocumentNoEdits,
+        enabled: false,
+        visible: true,
+      });
+      testCases.add({
+        state: ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid,
+        enabled: true,
+        visible: true,
+      });
+      testCases.add({
+        state: ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid,
+        enabled: true,
+        visible: true,
+      });
+
+      testCases.forEach((testCase) => {
+        const state = getDiscardExistingDocumentChangesButtonState(testCase.state);
+        it(`enable for ${testCase.state}`, () => {
+          expect(state.enabled).toBe(testCase.enabled);
+        });
+        it(`visible for ${testCase.state}`, () => {
+          expect(state.visible).toBe(testCase.visible);
+        });
+      });
+    });
+
+    describe("should set Delete Existing Document state", () => {
+      const testCases = new Set<{ state: ViewModels.DocumentExplorerState; enabled: boolean; visible: boolean }>();
+      testCases.add({ state: ViewModels.DocumentExplorerState.noDocumentSelected, enabled: false, visible: false });
+      testCases.add({ state: ViewModels.DocumentExplorerState.newDocumentValid, enabled: false, visible: false });
+      testCases.add({ state: ViewModels.DocumentExplorerState.newDocumentInvalid, enabled: false, visible: false });
+      testCases.add({ state: ViewModels.DocumentExplorerState.exisitingDocumentNoEdits, enabled: true, visible: true });
+      testCases.add({
+        state: ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid,
+        enabled: true,
+        visible: true,
+      });
+      testCases.add({
+        state: ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid,
+        enabled: true,
+        visible: true,
+      });
+    });
+  });
+
+  it("Do not get tabs button for Fabric readonly", () => {
+    updateConfigContext({ platform: Platform.Fabric });
+    updateUserContext({
+      fabricContext: {
+        connectionId: "test",
+        databaseConnectionInfo: undefined,
+        isReadOnly: true,
+        isVisible: true,
+      },
+    });
+
+    const buttons = getTabsButtons({} as ButtonsDependencies);
+    expect(buttons.length).toBe(0);
+  });
+
+  describe("when rendered", () => {
+    const createMockProps = (): IDocumentsTabComponentProps => ({
+      isPreferredApiMongoDB: false,
+      documentIds: [],
+      collection: undefined,
+      partitionKey: undefined,
+      onLoadStartKey: 0,
+      tabTitle: "",
+      onExecutionErrorChange: (isExecutionError: boolean): void => {
+        isExecutionError;
+      },
+      onIsExecutingChange: (isExecuting: boolean): void => {
+        isExecuting;
+      },
+      isTabActive: true,
+    });
+
+    let wrapper: ShallowWrapper;
+
+    beforeEach(async () => {
+      const props: IDocumentsTabComponentProps = createMockProps();
+      wrapper = shallow(<DocumentsTabComponent {...props} />);
+    });
+
+    afterEach(() => {
+      wrapper.unmount();
+    });
+
+    it("should render the page", () => {
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it("clicking on Edit filter should render the Apply Filter button", () => {
+      wrapper
+        .findWhere((node) => node.text() === "Edit Filter")
+        .at(0)
+        .simulate("click");
+      expect(wrapper.findWhere((node) => node.text() === "Apply Filter").exists()).toBeTruthy();
+    });
+
+    it("clicking on Edit filter should render input for filter", () => {
+      wrapper
+        .findWhere((node) => node.text() === "Edit Filter")
+        .at(0)
+        .simulate("click");
+      expect(wrapper.find("#filterInput").exists()).toBeTruthy();
+    });
+  });
+
+  describe("Command bar buttons", () => {
+    const createMockProps = (): IDocumentsTabComponentProps => ({
+      isPreferredApiMongoDB: false,
+      documentIds: [],
+      collection: {
+        id: ko.observable<string>("foo"),
+        container: new Explorer(),
+        partitionKey: {
+          kind: "MultiHash",
+          paths: ["/pkey1", "/pkey2", "/pkey3"],
+          version: 2,
+        },
+        partitionKeyProperties: ["pkey1", "pkey2", "pkey3"],
+        partitionKeyPropertyHeaders: ["/pkey1", "/pkey2", "/pkey3"],
+      } as ViewModels.CollectionBase,
+      partitionKey: undefined,
+      onLoadStartKey: 0,
+      tabTitle: "",
+      onExecutionErrorChange: (isExecutionError: boolean): void => {
+        isExecutionError;
+      },
+      onIsExecutingChange: (isExecuting: boolean): void => {
+        isExecuting;
+      },
+      isTabActive: true,
+    });
+
+    let wrapper: ReactWrapper;
+
+    beforeEach(async () => {
+      updateConfigContext({ platform: Platform.Hosted });
+
+      const props: IDocumentsTabComponentProps = createMockProps();
+
+      wrapper = mount(<DocumentsTabComponent {...props} />);
+      wrapper = await waitForComponentToPaint(wrapper);
+    });
+
+    afterEach(() => {
+      wrapper.unmount();
+    });
+
+    it("renders by default the first document", async () => {
+      expect(wrapper.findWhere((node) => node.text().includes(PROPERTY_VALUE)).exists()).toBeTruthy();
+    });
+
+    it("default buttons", async () => {
+      expect(useCommandBar.getState().contextButtons.find((button) => button.id === UPDATE_BUTTON_ID)).toBeDefined();
+      expect(useCommandBar.getState().contextButtons.find((button) => button.id === DISCARD_BUTTON_ID)).toBeDefined();
+      expect(useCommandBar.getState().contextButtons.find((button) => button.id === DELETE_BUTTON_ID)).toBeDefined();
+      expect(useCommandBar.getState().contextButtons.find((button) => button.id === UPLOAD_BUTTON_ID)).toBeDefined();
+    });
+
+    it("clicking on New Document should show editor with new document", () => {
+      act(() => {
+        useCommandBar
+          .getState()
+          .contextButtons.find((button) => button.id === NEW_DOCUMENT_BUTTON_ID)
+          .onCommandClick(undefined);
+      });
+      expect(wrapper.findWhere((node) => node.text().includes("replace_with_new_document_id")).exists()).toBeTruthy();
+    });
+
+    it("clicking on New Document should show Save and Discard buttons", () => {
+      act(() => {
+        useCommandBar
+          .getState()
+          .contextButtons.find((button) => button.id === NEW_DOCUMENT_BUTTON_ID)
+          .onCommandClick(undefined);
+      });
+
+      expect(useCommandBar.getState().contextButtons.find((button) => button.id === SAVE_BUTTON_ID)).toBeDefined();
+      expect(useCommandBar.getState().contextButtons.find((button) => button.id === DISCARD_BUTTON_ID)).toBeDefined();
+    });
+
+    it("clicking Delete Document asks for confirmation", () => {
+      const mockDeleteDocuments = deleteDocuments as jest.Mock;
+      mockDeleteDocuments.mockClear();
+
+      act(() => {
+        useCommandBar
+          .getState()
+          .contextButtons.find((button) => button.id === DELETE_BUTTON_ID)
+          .onCommandClick(undefined);
+      });
+
+      expect(mockDeleteDocuments).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
new file mode 100644
index 000000000..1fb6ed9db
--- /dev/null
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
@@ -0,0 +1,1816 @@
+import { Item, ItemDefinition, PartitionKey, PartitionKeyDefinition, QueryIterator, Resource } from "@azure/cosmos";
+import { Button, FluentProvider, Input, TableRowId } from "@fluentui/react-components";
+import { ArrowClockwise16Filled, Dismiss16Filled } from "@fluentui/react-icons";
+import Split from "@uiw/react-split";
+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 { deleteDocuments as deleteNoSqlDocuments } from "Common/dataAccess/deleteDocument";
+import { queryDocuments } from "Common/dataAccess/queryDocuments";
+import { readDocument } from "Common/dataAccess/readDocument";
+import { updateDocument } from "Common/dataAccess/updateDocument";
+import { Platform, configContext } from "ConfigContext";
+import { CommandButtonComponentProps } from "Explorer/Controls/CommandButton/CommandButtonComponent";
+import { useDialog } from "Explorer/Controls/Dialog";
+import { EditorReact } from "Explorer/Controls/Editor/EditorReact";
+import Explorer from "Explorer/Explorer";
+import { useCommandBar } from "Explorer/Menus/CommandBar/CommandBarComponentAdapter";
+import { querySampleDocuments, readSampleDocument } from "Explorer/QueryCopilot/QueryCopilotUtilities";
+import { getPlatformTheme } from "Explorer/Theme/ThemeUtil";
+import { useSelectedNode } from "Explorer/useSelectedNode";
+import { KeyboardAction, KeyboardActionGroup, useKeyboardActionGroup } from "KeyboardShortcuts";
+import { QueryConstants } from "Shared/Constants";
+import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
+import { Action } from "Shared/Telemetry/TelemetryConstants";
+import { userContext } from "UserContext";
+import { logConsoleError } from "Utils/NotificationConsoleUtils";
+import React, { KeyboardEventHandler, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { format } from "react-string-format";
+import { CSSProperties } from "styled-components";
+import DeleteDocumentIcon from "../../../../images/DeleteDocument.svg";
+import NewDocumentIcon from "../../../../images/NewDocument.svg";
+import UploadIcon from "../../../../images/Upload_16x16.svg";
+import DiscardIcon from "../../../../images/discard.svg";
+import SaveIcon from "../../../../images/save-cosmos.svg";
+import * as Constants from "../../../Common/Constants";
+import * as HeadersUtility from "../../../Common/HeadersUtility";
+import * as Logger from "../../../Common/Logger";
+import * as MongoProxyClient from "../../../Common/MongoProxyClient";
+import * as DataModels from "../../../Contracts/DataModels";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
+import * as QueryUtils from "../../../Utils/QueryUtils";
+import { extractPartitionKeyValues } from "../../../Utils/QueryUtils";
+import DocumentId from "../../Tree/DocumentId";
+import ObjectId from "../../Tree/ObjectId";
+import TabsBase from "../TabsBase";
+import { DocumentsTableComponent, DocumentsTableComponentItem } from "./DocumentsTableComponent";
+
+export class DocumentsTabV2 extends TabsBase {
+  public partitionKey: DataModels.PartitionKey;
+  private documentIds: DocumentId[];
+  private title: string;
+  private resourceTokenPartitionKey: string;
+
+  constructor(options: ViewModels.DocumentsTabOptions) {
+    super(options);
+
+    this.documentIds = options.documentIds();
+    this.title = options.title;
+    this.partitionKey = options.partitionKey;
+    this.resourceTokenPartitionKey = options.resourceTokenPartitionKey;
+  }
+
+  public render(): JSX.Element {
+    return (
+      <DocumentsTabComponent
+        isPreferredApiMongoDB={userContext.apiType === "Mongo"}
+        documentIds={this.documentIds}
+        collection={this.collection}
+        partitionKey={this.partitionKey}
+        onLoadStartKey={this.onLoadStartKey}
+        tabTitle={this.title}
+        resourceTokenPartitionKey={this.resourceTokenPartitionKey}
+        onExecutionErrorChange={(isExecutionError: boolean) => this.isExecutionError(isExecutionError)}
+        onIsExecutingChange={(isExecuting: boolean) => this.isExecuting(isExecuting)}
+        isTabActive={this.isActive()}
+      />
+    );
+  }
+
+  public onActivate(): void {
+    super.onActivate();
+    this.collection.selectedSubnodeKind(ViewModels.CollectionTabKind.Documents);
+  }
+}
+
+const filterButtonStyle: CSSProperties = {
+  marginLeft: 8,
+};
+
+// From TabsBase.renderObjectForEditor()
+let renderObjectForEditor = (
+  value: unknown,
+  replacer: (this: unknown, key: string, value: unknown) => unknown,
+  space: string | number,
+): string => JSON.stringify(value, replacer, space);
+
+// Export to expose to unit tests
+export const getSaveNewDocumentButtonState = (editorState: ViewModels.DocumentExplorerState) => ({
+  enabled: (() => {
+    switch (editorState) {
+      case ViewModels.DocumentExplorerState.newDocumentValid:
+        return true;
+      default:
+        return false;
+    }
+  })(),
+
+  visible: (() => {
+    switch (editorState) {
+      case ViewModels.DocumentExplorerState.newDocumentValid:
+      case ViewModels.DocumentExplorerState.newDocumentInvalid:
+        return true;
+      default:
+        return false;
+    }
+  })(),
+});
+
+// Export to expose to unit tests
+export const getDiscardNewDocumentChangesButtonState = (editorState: ViewModels.DocumentExplorerState) => ({
+  enabled: (() => {
+    switch (editorState) {
+      case ViewModels.DocumentExplorerState.newDocumentValid:
+      case ViewModels.DocumentExplorerState.newDocumentInvalid:
+        return true;
+      default:
+        return false;
+    }
+  })(),
+
+  visible: (() => {
+    switch (editorState) {
+      case ViewModels.DocumentExplorerState.newDocumentValid:
+      case ViewModels.DocumentExplorerState.newDocumentInvalid:
+        return true;
+      default:
+        return false;
+    }
+  })(),
+});
+
+// Export to expose to unit tests
+export const getSaveExistingDocumentButtonState = (editorState: ViewModels.DocumentExplorerState) => ({
+  enabled: (() => {
+    switch (editorState) {
+      case ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid:
+        return true;
+      default:
+        return false;
+    }
+  })(),
+
+  visible: (() => {
+    switch (editorState) {
+      case ViewModels.DocumentExplorerState.exisitingDocumentNoEdits:
+      case ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid:
+      case ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid:
+        return true;
+      default:
+        return false;
+    }
+  })(),
+});
+
+// Export to expose to unit tests
+export const getDiscardExistingDocumentChangesButtonState = (editorState: ViewModels.DocumentExplorerState) => ({
+  enabled: (() => {
+    switch (editorState) {
+      case ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid:
+      case ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid:
+        return true;
+      default:
+        return false;
+    }
+  })(),
+
+  visible: (() => {
+    switch (editorState) {
+      case ViewModels.DocumentExplorerState.exisitingDocumentNoEdits:
+      case ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid:
+      case ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid:
+        return true;
+      default:
+        return false;
+    }
+  })(),
+});
+
+type UiKeyboardEvent = (e: KeyboardEvent | React.SyntheticEvent<Element, Event>) => void;
+
+// Export to expose to unit tests
+export type ButtonsDependencies = {
+  _collection: ViewModels.CollectionBase;
+  selectedRows: Set<TableRowId>;
+  editorState: ViewModels.DocumentExplorerState;
+  isPreferredApiMongoDB: boolean;
+  onNewDocumentClick: UiKeyboardEvent;
+  onSaveNewDocumentClick: UiKeyboardEvent;
+  onRevertNewDocumentClick: UiKeyboardEvent;
+  onSaveExistingDocumentClick: UiKeyboardEvent;
+  onRevertExistingDocumentClick: UiKeyboardEvent;
+  onDeleteExistingDocumentsClick: UiKeyboardEvent;
+};
+
+const createUploadButton = (container: Explorer): CommandButtonComponentProps => {
+  const label = "Upload Item";
+  return {
+    id: UPLOAD_BUTTON_ID,
+    iconSrc: UploadIcon,
+    iconAlt: label,
+    onCommandClick: () => {
+      const selectedCollection: ViewModels.Collection = useSelectedNode.getState().findSelectedCollection();
+      selectedCollection && container.openUploadItemsPanePane();
+    },
+    commandButtonLabel: label,
+    ariaLabel: label,
+    hasPopup: true,
+    disabled:
+      useSelectedNode.getState().isDatabaseNodeOrNoneSelected() ||
+      useSelectedNode.getState().isQueryCopilotCollectionSelected(),
+  };
+};
+
+// Export to expose to unit tests
+export const NEW_DOCUMENT_BUTTON_ID = "mongoNewDocumentBtn";
+export const SAVE_BUTTON_ID = "saveBtn";
+export const UPDATE_BUTTON_ID = "updateBtn";
+export const DISCARD_BUTTON_ID = "discardBtn";
+export const DELETE_BUTTON_ID = "deleteBtn";
+export const UPLOAD_BUTTON_ID = "uploadItemBtn";
+
+// Export to expose in unit tests
+export const getTabsButtons = ({
+  _collection,
+  selectedRows,
+  editorState,
+  isPreferredApiMongoDB,
+  onNewDocumentClick,
+  onSaveNewDocumentClick,
+  onRevertNewDocumentClick,
+  onSaveExistingDocumentClick,
+  onRevertExistingDocumentClick,
+  onDeleteExistingDocumentsClick,
+}: ButtonsDependencies): CommandButtonComponentProps[] => {
+  if (configContext.platform === Platform.Fabric && userContext.fabricContext?.isReadOnly) {
+    // All the following buttons require write access
+    return [];
+  }
+
+  const buttons: CommandButtonComponentProps[] = [];
+  const label = !isPreferredApiMongoDB ? "New Item" : "New Document";
+  if (getNewDocumentButtonState(editorState).visible) {
+    buttons.push({
+      iconSrc: NewDocumentIcon,
+      iconAlt: label,
+      keyboardAction: KeyboardAction.NEW_ITEM,
+      onCommandClick: onNewDocumentClick,
+      commandButtonLabel: label,
+      ariaLabel: label,
+      hasPopup: false,
+      disabled:
+        !getNewDocumentButtonState(editorState).enabled ||
+        useSelectedNode.getState().isQueryCopilotCollectionSelected(),
+      id: NEW_DOCUMENT_BUTTON_ID,
+    });
+  }
+
+  if (getSaveNewDocumentButtonState(editorState).visible) {
+    const label = "Save";
+    buttons.push({
+      iconSrc: SaveIcon,
+      iconAlt: label,
+      keyboardAction: KeyboardAction.SAVE_ITEM,
+      onCommandClick: onSaveNewDocumentClick,
+      commandButtonLabel: label,
+      ariaLabel: label,
+      hasPopup: false,
+      disabled:
+        !getSaveNewDocumentButtonState(editorState).enabled ||
+        useSelectedNode.getState().isQueryCopilotCollectionSelected(),
+      id: SAVE_BUTTON_ID,
+    });
+  }
+
+  if (getDiscardNewDocumentChangesButtonState(editorState).visible) {
+    const label = "Discard";
+    buttons.push({
+      iconSrc: DiscardIcon,
+      iconAlt: label,
+      keyboardAction: KeyboardAction.CANCEL_OR_DISCARD,
+      onCommandClick: onRevertNewDocumentClick,
+      commandButtonLabel: label,
+      ariaLabel: label,
+      hasPopup: false,
+      disabled:
+        !getDiscardNewDocumentChangesButtonState(editorState).enabled ||
+        useSelectedNode.getState().isQueryCopilotCollectionSelected(),
+      id: DISCARD_BUTTON_ID,
+    });
+  }
+
+  if (getSaveExistingDocumentButtonState(editorState).visible) {
+    const label = "Update";
+    buttons.push({
+      iconSrc: SaveIcon,
+      iconAlt: label,
+      keyboardAction: KeyboardAction.SAVE_ITEM,
+      onCommandClick: onSaveExistingDocumentClick,
+      commandButtonLabel: label,
+      ariaLabel: label,
+      hasPopup: false,
+      disabled:
+        !getSaveExistingDocumentButtonState(editorState).enabled ||
+        useSelectedNode.getState().isQueryCopilotCollectionSelected(),
+      id: UPDATE_BUTTON_ID,
+    });
+  }
+
+  if (getDiscardExistingDocumentChangesButtonState(editorState).visible) {
+    const label = "Discard";
+    buttons.push({
+      iconSrc: DiscardIcon,
+      iconAlt: label,
+      keyboardAction: KeyboardAction.CANCEL_OR_DISCARD,
+      onCommandClick: onRevertExistingDocumentClick,
+      commandButtonLabel: label,
+      ariaLabel: label,
+      hasPopup: false,
+      disabled:
+        !getDiscardExistingDocumentChangesButtonState(editorState).enabled ||
+        useSelectedNode.getState().isQueryCopilotCollectionSelected(),
+      id: DISCARD_BUTTON_ID,
+    });
+  }
+
+  if (selectedRows.size > 0) {
+    const label = "Delete";
+    buttons.push({
+      iconSrc: DeleteDocumentIcon,
+      iconAlt: label,
+      keyboardAction: KeyboardAction.DELETE_ITEM,
+      onCommandClick: onDeleteExistingDocumentsClick,
+      commandButtonLabel: label,
+      ariaLabel: label,
+      hasPopup: false,
+      disabled: useSelectedNode.getState().isQueryCopilotCollectionSelected(),
+      id: DELETE_BUTTON_ID,
+    });
+  }
+
+  if (!isPreferredApiMongoDB) {
+    buttons.push(createUploadButton(_collection.container));
+  }
+
+  return buttons;
+};
+
+const updateNavbarWithTabsButtons = (isTabActive: boolean, dependencies: ButtonsDependencies): void => {
+  if (isTabActive) {
+    useCommandBar.getState().setContextButtons(getTabsButtons(dependencies));
+  }
+};
+
+const getNewDocumentButtonState = (editorState: ViewModels.DocumentExplorerState) => ({
+  enabled: (() => {
+    switch (editorState) {
+      case ViewModels.DocumentExplorerState.noDocumentSelected:
+      case ViewModels.DocumentExplorerState.exisitingDocumentNoEdits:
+        return true;
+      default:
+        return false;
+    }
+  })(),
+  visible: true,
+});
+
+const _loadNextPageInternal = (
+  iterator: QueryIterator<ItemDefinition & Resource>,
+): Promise<DataModels.DocumentId[]> => {
+  return iterator.fetchNext().then((response) => response.resources);
+};
+
+// Export to expose to unit tests
+export const showPartitionKey = (collection: ViewModels.CollectionBase, isPreferredApiMongoDB: boolean) => {
+  if (!collection) {
+    return false;
+  }
+
+  if (!collection.partitionKey) {
+    return false;
+  }
+
+  if (collection.partitionKey.systemKey && isPreferredApiMongoDB) {
+    return false;
+  }
+
+  return true;
+};
+
+// Export to expose to unit tests
+export const buildQuery = (
+  isMongo: boolean,
+  filter: string,
+  partitionKeyProperties?: string[],
+  partitionKey?: DataModels.PartitionKey,
+): string => {
+  if (isMongo) {
+    return filter || "{}";
+  }
+
+  return QueryUtils.buildDocumentsQuery(filter, partitionKeyProperties, partitionKey);
+};
+
+// Export to expose to unit tests
+export interface IDocumentsTabComponentProps {
+  isPreferredApiMongoDB: boolean;
+  documentIds: DocumentId[]; // TODO: this contains ko observables. We need to convert them to React state.
+  collection: ViewModels.CollectionBase;
+  partitionKey: DataModels.PartitionKey;
+  onLoadStartKey: number;
+  tabTitle: string;
+  resourceTokenPartitionKey?: string;
+  onExecutionErrorChange: (isExecutionError: boolean) => void;
+  onIsExecutingChange: (isExecuting: boolean) => void;
+  isTabActive: boolean;
+}
+
+// Export to expose to unit tests
+export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabComponentProps> = ({
+  isPreferredApiMongoDB,
+  documentIds: _documentIds,
+  collection: _collection,
+  partitionKey: _partitionKey,
+  onLoadStartKey: _onLoadStartKey,
+  tabTitle,
+  resourceTokenPartitionKey,
+  onExecutionErrorChange,
+  onIsExecutingChange,
+  isTabActive,
+}): JSX.Element => {
+  const [isFilterCreated, setIsFilterCreated] = useState<boolean>(true);
+  const [isFilterExpanded, setIsFilterExpanded] = useState<boolean>(false);
+  const [isFilterFocused, setIsFilterFocused] = useState<boolean>(false);
+  const [appliedFilter, setAppliedFilter] = useState<string>("");
+  const [filterContent, setFilterContent] = useState<string>("");
+  const [documentIds, setDocumentIds] = useState<DocumentId[]>([]);
+  const [isExecuting, setIsExecuting] = useState<boolean>(false);
+  const filterInput = useRef<HTMLInputElement>(null);
+
+  // Query
+  const [documentsIterator, setDocumentsIterator] = useState<{
+    iterator: QueryIterator<ItemDefinition & Resource>;
+    applyFilterButtonPressed: boolean;
+  }>(undefined);
+  const [queryAbortController, setQueryAbortController] = useState<AbortController>(undefined);
+  const [cancelQueryTimeoutID, setCancelQueryTimeoutID] = useState<NodeJS.Timeout>(undefined);
+
+  const [onLoadStartKey, setOnLoadStartKey] = useState<number>(_onLoadStartKey);
+
+  const [initialDocumentContent, setInitialDocumentContent] = useState<string>(undefined);
+  const [selectedDocumentContent, setSelectedDocumentContent] = useState<string>(undefined);
+  const [selectedDocumentContentBaseline, setSelectedDocumentContentBaseline] = useState<string>(undefined);
+
+  // Table user clicked on this row
+  const [clickedRow, setClickedRow] = useState<TableRowId>(undefined);
+  // Table multiple selection
+  const [selectedRows, setSelectedRows] = React.useState<Set<TableRowId>>(() => new Set<TableRowId>([0]));
+
+  // Command buttons
+  const [editorState, setEditorState] = useState<ViewModels.DocumentExplorerState>(
+    ViewModels.DocumentExplorerState.noDocumentSelected,
+  );
+
+  const isQueryCopilotSampleContainer =
+    _collection?.isSampleCollection &&
+    _collection?.databaseId === QueryCopilotSampleDatabaseId &&
+    _collection?.id() === QueryCopilotSampleContainerId;
+
+  // For Mongo only
+  const [continuationToken, setContinuationToken] = useState<string>(undefined);
+
+  const setKeyboardActions = useKeyboardActionGroup(KeyboardActionGroup.ACTIVE_TAB);
+
+  useEffect(() => {
+    if (isFilterFocused) {
+      filterInput.current?.focus();
+    }
+  }, [isFilterFocused]);
+
+  let lastFilterContents = ['WHERE c.id = "foo"', "ORDER BY c._ts DESC", 'WHERE c.id = "foo" ORDER BY c._ts DESC'];
+
+  const applyFilterButton = {
+    enabled: true,
+    visible: true,
+  };
+
+  const partitionKey: DataModels.PartitionKey = useMemo(
+    () => _partitionKey || (_collection && _collection.partitionKey),
+    [_collection, _partitionKey],
+  );
+  const partitionKeyPropertyHeaders: string[] = useMemo(
+    () => _collection?.partitionKeyPropertyHeaders || partitionKey?.paths,
+    [_collection?.partitionKeyPropertyHeaders, partitionKey?.paths],
+  );
+  let partitionKeyProperties = useMemo(
+    () =>
+      partitionKeyPropertyHeaders?.map((partitionKeyPropertyHeader) =>
+        partitionKeyPropertyHeader.replace(/[/]+/g, ".").substring(1).replace(/[']+/g, ""),
+      ),
+    [partitionKeyPropertyHeaders],
+  );
+
+  // 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(
+        {
+          partitionKey,
+          partitionKeyProperties,
+          // Fake unused mocks
+          isEditorDirty: () => false,
+          selectDocument: () => Promise.reject(),
+        },
+        rawDocument,
+        partitionKeyValue,
+      ),
+    [partitionKey],
+  );
+
+  useEffect(() => {
+    setDocumentIds(_documentIds);
+  }, [_documentIds]);
+
+  // This is executed in onActivate() in the original code.
+  useEffect(() => {
+    setKeyboardActions({
+      [KeyboardAction.SEARCH]: () => {
+        onShowFilterClick();
+        return true;
+      },
+      [KeyboardAction.CLEAR_SEARCH]: () => {
+        setFilterContent("");
+        refreshDocumentsGrid(true);
+        return true;
+      },
+    });
+
+    if (!documentsIterator) {
+      try {
+        refreshDocumentsGrid();
+      } catch (error) {
+        if (onLoadStartKey !== null && onLoadStartKey !== undefined) {
+          TelemetryProcessor.traceFailure(
+            Action.Tab,
+            {
+              databaseName: _collection.databaseId,
+              collectionName: _collection.id(),
+
+              dataExplorerArea: Constants.Areas.Tab,
+              tabTitle,
+              error: getErrorMessage(error),
+              errorStack: getErrorStack(error),
+            },
+            onLoadStartKey,
+          );
+          setOnLoadStartKey(undefined);
+        }
+      }
+    }
+
+    updateNavbarWithTabsButtons(isTabActive, {
+      _collection,
+      selectedRows,
+      editorState,
+      isPreferredApiMongoDB,
+      onNewDocumentClick,
+      onSaveNewDocumentClick,
+      onRevertNewDocumentClick,
+      onSaveExistingDocumentClick,
+      onRevertExistingDocumentClick,
+      onDeleteExistingDocumentsClick,
+    });
+  }, []);
+
+  const isEditorDirty = useCallback((): boolean => {
+    switch (editorState) {
+      case ViewModels.DocumentExplorerState.noDocumentSelected:
+      case ViewModels.DocumentExplorerState.exisitingDocumentNoEdits:
+        return false;
+
+      case ViewModels.DocumentExplorerState.newDocumentValid:
+      case ViewModels.DocumentExplorerState.newDocumentInvalid:
+      case ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid:
+        return true;
+
+      case ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid:
+        return true;
+
+      default:
+        return false;
+    }
+  }, [editorState]);
+
+  const confirmDiscardingChange = useCallback(
+    (onDiscard: () => void, onCancelDiscard?: () => void): void => {
+      if (isEditorDirty()) {
+        useDialog
+          .getState()
+          .showOkCancelModalDialog(
+            "Unsaved changes",
+            "Your unsaved changes will be lost. Do you want to continue?",
+            "OK",
+            onDiscard,
+            "Cancel",
+            onCancelDiscard,
+          );
+      } else {
+        onDiscard();
+      }
+    },
+    [isEditorDirty],
+  );
+
+  // Update parent (tab) if isExecuting has changed
+  useEffect(() => {
+    onIsExecutingChange(isExecuting);
+  }, [onIsExecutingChange, isExecuting]);
+
+  const onNewDocumentClick = useCallback(
+    (): void => confirmDiscardingChange(() => initializeNewDocument()),
+    [confirmDiscardingChange],
+  );
+
+  const initializeNewDocument = (): void => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const newDocument: any = {
+      id: "replace_with_new_document_id",
+    };
+    partitionKeyProperties.forEach((partitionKeyProperty) => {
+      let target = newDocument;
+      const keySegments = partitionKeyProperty.split(".");
+      const finalSegment = keySegments.pop();
+
+      // Initialize nested objects as needed
+      keySegments.forEach((segment) => {
+        target = target[segment] = target[segment] || {};
+      });
+
+      target[finalSegment] = "replace_with_new_partition_key_value";
+    });
+    const defaultDocument: string = renderObjectForEditor(newDocument, null, 4);
+
+    setInitialDocumentContent(defaultDocument);
+    setSelectedDocumentContent(defaultDocument);
+    setSelectedDocumentContentBaseline(defaultDocument);
+    setSelectedRows(new Set());
+    setClickedRow(undefined);
+    setEditorState(ViewModels.DocumentExplorerState.newDocumentValid);
+  };
+
+  let onSaveNewDocumentClick = useCallback((): Promise<unknown> => {
+    onExecutionErrorChange(false);
+    const startKey: number = TelemetryProcessor.traceStart(Action.CreateDocument, {
+      dataExplorerArea: Constants.Areas.Tab,
+      tabTitle,
+    });
+    const sanitizedContent = selectedDocumentContent.replace("\n", "");
+    const document = JSON.parse(sanitizedContent);
+    setIsExecuting(true);
+    return createDocument(_collection, document)
+      .then(
+        (savedDocument: DataModels.DocumentId) => {
+          const value: string = renderObjectForEditor(savedDocument || {}, null, 4);
+          setSelectedDocumentContentBaseline(value);
+          setInitialDocumentContent(value);
+          const partitionKeyValueArray: PartitionKey[] = extractPartitionKeyValues(
+            savedDocument,
+            partitionKey as PartitionKeyDefinition,
+          );
+          const id = newDocumentId(savedDocument, partitionKeyProperties, partitionKeyValueArray as string[]);
+          const ids = documentIds;
+          ids.push(id);
+
+          setDocumentIds(ids);
+          setEditorState(ViewModels.DocumentExplorerState.exisitingDocumentNoEdits);
+          TelemetryProcessor.traceSuccess(
+            Action.CreateDocument,
+            {
+              dataExplorerArea: Constants.Areas.Tab,
+              tabTitle,
+            },
+            startKey,
+          );
+        },
+        (error) => {
+          onExecutionErrorChange(true);
+          const errorMessage = getErrorMessage(error);
+          useDialog.getState().showOkModalDialog("Create document failed", errorMessage);
+          TelemetryProcessor.traceFailure(
+            Action.CreateDocument,
+            {
+              dataExplorerArea: Constants.Areas.Tab,
+              tabTitle,
+              error: errorMessage,
+              errorStack: getErrorStack(error),
+            },
+            startKey,
+          );
+        },
+      )
+      .then(() => setSelectedRows(new Set([documentIds.length - 1])))
+      .finally(() => setIsExecuting(false));
+  }, [
+    onExecutionErrorChange,
+    tabTitle,
+    selectedDocumentContent,
+    _collection,
+    partitionKey,
+    newDocumentId,
+    partitionKeyProperties,
+    documentIds,
+  ]);
+
+  const onRevertNewDocumentClick = useCallback((): void => {
+    setInitialDocumentContent("");
+    setSelectedDocumentContent("");
+    setEditorState(ViewModels.DocumentExplorerState.noDocumentSelected);
+  }, [setInitialDocumentContent, setSelectedDocumentContent, setEditorState]);
+
+  let onSaveExistingDocumentClick = useCallback((): Promise<void> => {
+    const documentContent = JSON.parse(selectedDocumentContent);
+
+    const partitionKeyValueArray: PartitionKey[] = extractPartitionKeyValues(
+      documentContent,
+      partitionKey as PartitionKeyDefinition,
+    );
+
+    const selectedDocumentId = documentIds[clickedRow as number];
+    selectedDocumentId.partitionKeyValue = partitionKeyValueArray;
+
+    onExecutionErrorChange(false);
+    const startKey: number = TelemetryProcessor.traceStart(Action.UpdateDocument, {
+      dataExplorerArea: Constants.Areas.Tab,
+      tabTitle,
+    });
+    setIsExecuting(true);
+    return updateDocument(_collection, selectedDocumentId, documentContent)
+      .then(
+        (updatedDocument: Item & { _rid: string }) => {
+          const value: string = renderObjectForEditor(updatedDocument || {}, null, 4);
+          setSelectedDocumentContentBaseline(value);
+          setInitialDocumentContent(value);
+          setSelectedDocumentContent(value);
+          documentIds.forEach((documentId: DocumentId) => {
+            if (documentId.rid === updatedDocument._rid) {
+              documentId.id(updatedDocument.id);
+            }
+          });
+          setEditorState(ViewModels.DocumentExplorerState.exisitingDocumentNoEdits);
+          TelemetryProcessor.traceSuccess(
+            Action.UpdateDocument,
+            {
+              dataExplorerArea: Constants.Areas.Tab,
+              tabTitle,
+            },
+            startKey,
+          );
+        },
+        (error) => {
+          onExecutionErrorChange(true);
+          const errorMessage = getErrorMessage(error);
+          useDialog.getState().showOkModalDialog("Update document failed", errorMessage);
+          TelemetryProcessor.traceFailure(
+            Action.UpdateDocument,
+            {
+              dataExplorerArea: Constants.Areas.Tab,
+              tabTitle,
+              error: errorMessage,
+              errorStack: getErrorStack(error),
+            },
+            startKey,
+          );
+        },
+      )
+      .finally(() => setIsExecuting(false));
+  }, [onExecutionErrorChange, tabTitle, selectedDocumentContent, _collection, partitionKey, documentIds, clickedRow]);
+
+  const onRevertExistingDocumentClick = useCallback((): void => {
+    setSelectedDocumentContentBaseline(initialDocumentContent);
+    setSelectedDocumentContent(selectedDocumentContentBaseline);
+  }, [initialDocumentContent, selectedDocumentContentBaseline, setSelectedDocumentContent]);
+
+  /**
+   * Implementation using bulk delete
+   */
+  let _deleteDocuments = useCallback(
+    async (toDeleteDocumentIds: DocumentId[]): Promise<DocumentId[]> => {
+      onExecutionErrorChange(false);
+      const startKey: number = TelemetryProcessor.traceStart(Action.DeleteDocuments, {
+        dataExplorerArea: Constants.Areas.Tab,
+        tabTitle,
+      });
+      setIsExecuting(true);
+      return deleteNoSqlDocuments(_collection, toDeleteDocumentIds)
+        .then(
+          (deletedIds) => {
+            TelemetryProcessor.traceSuccess(
+              Action.DeleteDocuments,
+              {
+                dataExplorerArea: Constants.Areas.Tab,
+                tabTitle,
+              },
+              startKey,
+            );
+            return deletedIds;
+          },
+          (error) => {
+            onExecutionErrorChange(true);
+            console.error(error);
+            TelemetryProcessor.traceFailure(
+              Action.DeleteDocuments,
+              {
+                dataExplorerArea: Constants.Areas.Tab,
+                tabTitle,
+                error: getErrorMessage(error),
+                errorStack: getErrorStack(error),
+              },
+              startKey,
+            );
+            throw error;
+          },
+        )
+        .finally(() => setIsExecuting(false));
+    },
+    [_collection, onExecutionErrorChange, tabTitle],
+  );
+
+  const deleteDocuments = useCallback(
+    (toDeleteDocumentIds: DocumentId[]): void => {
+      onExecutionErrorChange(false);
+      setIsExecuting(true);
+      _deleteDocuments(toDeleteDocumentIds)
+        .then(
+          (deletedIds: DocumentId[]) => {
+            const deletedRids = new Set(deletedIds.map((documentId) => documentId.rid));
+            const newDocumentIds = [...documentIds.filter((documentId) => !deletedRids.has(documentId.rid))];
+            setDocumentIds(newDocumentIds);
+
+            setSelectedDocumentContent(undefined);
+            setClickedRow(undefined);
+            setSelectedRows(new Set());
+            setEditorState(ViewModels.DocumentExplorerState.noDocumentSelected);
+            useDialog
+              .getState()
+              .showOkModalDialog("Delete documents", `${deletedIds.length} document(s) successfully deleted.`);
+          },
+          (error: Error) =>
+            useDialog
+              .getState()
+              .showOkModalDialog("Delete documents", `Document(s) deleted failed (${JSON.stringify(error)})`),
+        )
+        .finally(() => setIsExecuting(false));
+    },
+    [onExecutionErrorChange, _deleteDocuments, documentIds],
+  );
+
+  const onDeleteExistingDocumentsClick = useCallback(async (): Promise<void> => {
+    // TODO: Rework this for localization
+    const isPlural = selectedRows.size > 1;
+    const documentName = !isPreferredApiMongoDB
+      ? isPlural
+        ? `the selected ${selectedRows.size} items`
+        : "the selected item"
+      : isPlural
+      ? `the selected ${selectedRows.size} documents`
+      : "the selected document";
+    const msg = `Are you sure you want to delete ${documentName}?`;
+
+    useDialog
+      .getState()
+      .showOkCancelModalDialog(
+        "Confirm delete",
+        msg,
+        "Delete",
+        () => deleteDocuments(Array.from(selectedRows).map((index) => documentIds[index as number])),
+        "Cancel",
+        undefined,
+      );
+  }, [deleteDocuments, documentIds, isPreferredApiMongoDB, selectedRows]);
+
+  // If editor state changes, update the nav
+  useEffect(
+    () =>
+      updateNavbarWithTabsButtons(isTabActive, {
+        _collection,
+        selectedRows,
+        editorState,
+        isPreferredApiMongoDB,
+        onNewDocumentClick,
+        onSaveNewDocumentClick,
+        onRevertNewDocumentClick,
+        onSaveExistingDocumentClick,
+        onRevertExistingDocumentClick: onRevertExistingDocumentClick,
+        onDeleteExistingDocumentsClick: onDeleteExistingDocumentsClick,
+      }),
+    [
+      _collection,
+      selectedRows,
+      editorState,
+      isPreferredApiMongoDB,
+      onNewDocumentClick,
+      onSaveNewDocumentClick,
+      onRevertNewDocumentClick,
+      onSaveExistingDocumentClick,
+      onRevertExistingDocumentClick,
+      onDeleteExistingDocumentsClick,
+      isTabActive,
+    ],
+  );
+
+  const onShowFilterClick = () => {
+    setIsFilterCreated(true);
+    setIsFilterExpanded(true);
+    setIsFilterFocused(true);
+  };
+
+  const queryTimeoutEnabled = useCallback(
+    (): boolean => !isPreferredApiMongoDB && LocalStorageUtility.getEntryBoolean(StorageKey.QueryTimeoutEnabled),
+    [isPreferredApiMongoDB],
+  );
+
+  const createIterator = useCallback((): QueryIterator<ItemDefinition & Resource> => {
+    const _queryAbortController = new AbortController();
+    setQueryAbortController(_queryAbortController);
+    const filter: string = filterContent.trim();
+    const query: string = buildQuery(isPreferredApiMongoDB, filter, partitionKeyProperties, partitionKey);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const options: any = {};
+    // TODO: Property 'enableCrossPartitionQuery' does not exist on type 'FeedOptions'.
+    options.enableCrossPartitionQuery = HeadersUtility.shouldEnableCrossPartitionKey();
+
+    if (resourceTokenPartitionKey) {
+      options.partitionKey = resourceTokenPartitionKey;
+    }
+    // Fixes compile error error TS2741: Property 'throwIfAborted' is missing in type 'AbortSignal' but required in type 'import("/home/runner/work/cosmos-explorer/cosmos-explorer/node_modules/node-abort-controller/index").AbortSignal'.
+    options.abortSignal = _queryAbortController.signal;
+
+    return isQueryCopilotSampleContainer
+      ? querySampleDocuments(query, options)
+      : queryDocuments(_collection.databaseId, _collection.id(), query, options);
+  }, [
+    filterContent,
+    isPreferredApiMongoDB,
+    partitionKeyProperties,
+    partitionKey,
+    resourceTokenPartitionKey,
+    isQueryCopilotSampleContainer,
+    _collection,
+  ]);
+
+  const onHideFilterClick = (): void => {
+    setIsFilterExpanded(false);
+  };
+
+  const onCloseButtonKeyDown: KeyboardEventHandler<HTMLSpanElement> = (event) => {
+    if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) {
+      onHideFilterClick();
+      event.stopPropagation();
+      return false;
+    }
+    return true;
+  };
+
+  let loadNextPage = useCallback(
+    (iterator: QueryIterator<ItemDefinition & Resource>, applyFilterButtonClicked?: boolean): Promise<unknown> => {
+      setIsExecuting(true);
+      onExecutionErrorChange(false);
+      let automaticallyCancelQueryAfterTimeout: boolean;
+      if (applyFilterButtonClicked && queryTimeoutEnabled()) {
+        const queryTimeout: number = LocalStorageUtility.getEntryNumber(StorageKey.QueryTimeout);
+        automaticallyCancelQueryAfterTimeout = LocalStorageUtility.getEntryBoolean(
+          StorageKey.AutomaticallyCancelQueryAfterTimeout,
+        );
+        const cancelQueryTimeoutID: NodeJS.Timeout = setTimeout(() => {
+          if (isExecuting) {
+            if (automaticallyCancelQueryAfterTimeout) {
+              queryAbortController.abort();
+            } else {
+              useDialog
+                .getState()
+                .showOkCancelModalDialog(
+                  QueryConstants.CancelQueryTitle,
+                  format(QueryConstants.CancelQuerySubTextTemplate, QueryConstants.CancelQueryTimeoutThresholdReached),
+                  "Yes",
+                  () => queryAbortController.abort(),
+                  "No",
+                  undefined,
+                );
+            }
+          }
+        }, queryTimeout);
+        setCancelQueryTimeoutID(cancelQueryTimeoutID);
+      }
+      return _loadNextPageInternal(iterator)
+        .then(
+          (documentsIdsResponse = []) => {
+            const currentDocuments = documentIds;
+            const currentDocumentsRids = currentDocuments.map((currentDocument) => currentDocument.rid);
+            const nextDocumentIds = documentsIdsResponse
+              // filter documents already loaded in observable
+              .filter((d: DataModels.DocumentId) => {
+                return currentDocumentsRids.indexOf(d._rid) < 0;
+              })
+              // map raw response to view model
+              .map((rawDocument: DataModels.DocumentId & { _partitionKeyValue: string[] }) => {
+                const partitionKeyValue = rawDocument._partitionKeyValue;
+
+                const partitionKey = _partitionKey || (_collection && _collection.partitionKey);
+                const partitionKeyPropertyHeaders = _collection?.partitionKeyPropertyHeaders || partitionKey?.paths;
+                const partitionKeyProperties = partitionKeyPropertyHeaders?.map((partitionKeyPropertyHeader) =>
+                  partitionKeyPropertyHeader.replace(/[/]+/g, ".").substring(1).replace(/[']+/g, ""),
+                );
+
+                return newDocumentId(rawDocument, partitionKeyProperties, partitionKeyValue);
+              });
+
+            const merged = currentDocuments.concat(nextDocumentIds);
+            setDocumentIds(merged);
+            if (onLoadStartKey !== null && onLoadStartKey !== undefined) {
+              TelemetryProcessor.traceSuccess(
+                Action.Tab,
+                {
+                  databaseName: _collection.databaseId,
+                  collectionName: _collection.id(),
+
+                  dataExplorerArea: Constants.Areas.Tab,
+                  tabTitle,
+                },
+                onLoadStartKey,
+              );
+              setOnLoadStartKey(undefined);
+            }
+          },
+          (error) => {
+            onExecutionErrorChange(true);
+            const errorMessage = getErrorMessage(error);
+            logConsoleError(errorMessage);
+            if (onLoadStartKey !== null && onLoadStartKey !== undefined) {
+              TelemetryProcessor.traceFailure(
+                Action.Tab,
+                {
+                  databaseName: _collection.databaseId,
+                  collectionName: _collection.id(),
+
+                  dataExplorerArea: Constants.Areas.Tab,
+                  tabTitle,
+                  error: errorMessage,
+                  errorStack: getErrorStack(error),
+                },
+                onLoadStartKey,
+              );
+              setOnLoadStartKey(undefined);
+            }
+          },
+        )
+        .finally(() => {
+          setIsExecuting(false);
+          if (applyFilterButtonClicked && queryTimeoutEnabled()) {
+            clearTimeout(cancelQueryTimeoutID);
+            if (!automaticallyCancelQueryAfterTimeout) {
+              useDialog.getState().closeDialog();
+            }
+          }
+        });
+    },
+    [
+      onExecutionErrorChange,
+      queryTimeoutEnabled,
+      isExecuting,
+      queryAbortController,
+      documentIds,
+      onLoadStartKey,
+      _partitionKey,
+      _collection,
+      newDocumentId,
+      tabTitle,
+      cancelQueryTimeoutID,
+    ],
+  );
+
+  useEffect(() => {
+    if (documentsIterator) {
+      loadNextPage(documentsIterator.iterator, documentsIterator.applyFilterButtonPressed);
+    }
+  }, [
+    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;
+      loadNextPage(documentsIterator.iterator);
+      focusElement && focusElement.focus();
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  };
+
+  const onFilterKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {
+    if (e.key === "Enter") {
+      refreshDocumentsGrid(true);
+
+      // Suppress the default behavior of the key
+      e.preventDefault();
+    } else if (e.key === "Escape") {
+      onHideFilterClick();
+
+      // Suppress the default behavior of the key
+      e.preventDefault();
+    }
+  };
+
+  const _isQueryCopilotSampleContainer =
+    _collection?.isSampleCollection &&
+    _collection?.databaseId === QueryCopilotSampleDatabaseId &&
+    _collection?.id() === QueryCopilotSampleContainerId;
+
+  // Table config here
+  const tableItems: DocumentsTableComponentItem[] = documentIds.map((documentId) => {
+    const item: Record<string, string> & { id: string } = {
+      id: documentId.id(),
+    };
+
+    if (partitionKeyPropertyHeaders && documentId.stringPartitionKeyValues) {
+      for (let i = 0; i < partitionKeyPropertyHeaders.length; i++) {
+        item[partitionKeyPropertyHeaders[i]] = documentId.stringPartitionKeyValues[i];
+      }
+    }
+
+    return item;
+  });
+
+  /**
+   * replicate logic of selectedDocument.click();
+   * Document has been clicked on in table
+   * @param tabRowId
+   */
+  const onDocumentClicked = (tabRowId: TableRowId) => {
+    const index = tabRowId as number;
+    setClickedRow(index);
+    loadDocument(documentIds[index]);
+  };
+
+  let loadDocument = (documentId: DocumentId) =>
+    (_isQueryCopilotSampleContainer ? readSampleDocument(documentId) : readDocument(_collection, documentId)).then(
+      (content) => {
+        initDocumentEditor(documentId, content);
+      },
+    );
+
+  const initDocumentEditor = (documentId: DocumentId, documentContent: unknown): void => {
+    if (documentId) {
+      const content: string = renderObjectForEditor(documentContent, null, 4);
+      setSelectedDocumentContentBaseline(content);
+      setSelectedDocumentContent(content);
+      setInitialDocumentContent(content);
+
+      const newState = documentId
+        ? ViewModels.DocumentExplorerState.exisitingDocumentNoEdits
+        : ViewModels.DocumentExplorerState.newDocumentValid;
+      setEditorState(newState);
+    }
+  };
+
+  const _onEditorContentChange = (newContent: string): void => {
+    setSelectedDocumentContent(newContent);
+
+    if (
+      selectedDocumentContentBaseline === initialDocumentContent &&
+      newContent === initialDocumentContent &&
+      editorState !== ViewModels.DocumentExplorerState.newDocumentValid
+    ) {
+      setEditorState(ViewModels.DocumentExplorerState.exisitingDocumentNoEdits);
+      return;
+    }
+
+    // Mongo uses BSON format for _id, trying to parse it as JSON blocks normal flow in an edit
+    // Bypass validation for mongo
+    if (isPreferredApiMongoDB) {
+      onValidDocumentEdit();
+      return;
+    }
+
+    try {
+      JSON.parse(newContent);
+      onValidDocumentEdit();
+    } catch (e) {
+      onInvalidDocumentEdit();
+    }
+  };
+
+  const onValidDocumentEdit = (): void => {
+    if (
+      editorState === ViewModels.DocumentExplorerState.newDocumentInvalid ||
+      editorState === ViewModels.DocumentExplorerState.newDocumentValid
+    ) {
+      setEditorState(ViewModels.DocumentExplorerState.newDocumentValid);
+      return;
+    }
+
+    setEditorState(ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid);
+  };
+
+  const onInvalidDocumentEdit = (): void => {
+    if (
+      editorState === ViewModels.DocumentExplorerState.newDocumentInvalid ||
+      editorState === ViewModels.DocumentExplorerState.newDocumentValid
+    ) {
+      setEditorState(ViewModels.DocumentExplorerState.newDocumentInvalid);
+      return;
+    }
+
+    if (
+      editorState === ViewModels.DocumentExplorerState.exisitingDocumentNoEdits ||
+      editorState === ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid
+    ) {
+      setEditorState(ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid);
+      return;
+    }
+  };
+
+  const tableContainerRef = useRef(null);
+  const [tableContainerSizePx, setTableContainerSizePx] = useState<{ height: number; width: number }>(undefined);
+  useEffect(() => {
+    if (!tableContainerRef.current) {
+      return undefined;
+    }
+    const resizeObserver = new ResizeObserver(() =>
+      setTableContainerSizePx({
+        height: tableContainerRef.current.offsetHeight,
+        width: tableContainerRef.current.offsetWidth,
+      }),
+    );
+    resizeObserver.observe(tableContainerRef.current);
+    return () => resizeObserver.disconnect(); // clean up
+  }, []);
+
+  const columnHeaders = {
+    idHeader: isPreferredApiMongoDB ? "_id" : "id",
+    partitionKeyHeaders: (showPartitionKey(_collection, isPreferredApiMongoDB) && partitionKeyPropertyHeaders) || [],
+  };
+
+  const onSelectedRowsChange = (selectedRows: Set<TableRowId>) => {
+    confirmDiscardingChange(() => {
+      if (selectedRows.size === 0) {
+        setSelectedDocumentContent(undefined);
+        setClickedRow(undefined);
+        setEditorState(ViewModels.DocumentExplorerState.noDocumentSelected);
+      }
+
+      // Find if clickedRow is in selectedRows.If not, clear clickedRow and content
+      if (clickedRow !== undefined && !selectedRows.has(clickedRow)) {
+        setClickedRow(undefined);
+        setSelectedDocumentContent(undefined);
+        setEditorState(ViewModels.DocumentExplorerState.noDocumentSelected);
+      }
+
+      // If only one selection, we consider as a click
+      if (selectedRows.size === 1) {
+        setEditorState(ViewModels.DocumentExplorerState.exisitingDocumentNoEdits);
+      }
+
+      setSelectedRows(selectedRows);
+    });
+  };
+
+  // ********* Override here for mongo (from MongoDocumentsTab) **********
+  if (isPreferredApiMongoDB) {
+    loadDocument = (documentId: DocumentId) =>
+      MongoProxyClient.readDocument(_collection.databaseId, _collection as ViewModels.Collection, documentId).then(
+        (content) => {
+          initDocumentEditor(documentId, content);
+        },
+      );
+
+    renderObjectForEditor = (value: unknown): string => MongoUtility.tojson(value, null, false);
+
+    const _hasShardKeySpecified = (document: unknown): boolean => {
+      return Boolean(extractPartitionKeyValues(document, _getPartitionKeyDefinition() as PartitionKeyDefinition));
+    };
+
+    const _getPartitionKeyDefinition = (): DataModels.PartitionKey => {
+      let partitionKey: DataModels.PartitionKey = _partitionKey;
+
+      if (
+        _partitionKey &&
+        _partitionKey.paths &&
+        _partitionKey.paths.length &&
+        _partitionKey.paths.length > 0 &&
+        _partitionKey.paths[0].indexOf("$v") > -1
+      ) {
+        // Convert BsonSchema2 to /path format
+        partitionKey = {
+          kind: partitionKey.kind,
+          paths: ["/" + partitionKeyProperties?.[0].replace(/\./g, "/")],
+          version: partitionKey.version,
+        };
+      }
+
+      return partitionKey;
+    };
+
+    lastFilterContents = ['{"id":"foo"}', "{ qty: { $gte: 20 } }"];
+    partitionKeyProperties = partitionKeyProperties?.map((partitionKeyProperty, i) => {
+      if (partitionKeyProperty && ~partitionKeyProperty.indexOf(`"`)) {
+        partitionKeyProperty = partitionKeyProperty.replace(/["]+/g, "");
+      }
+
+      if (partitionKeyProperty && partitionKeyProperty.indexOf("$v") > -1) {
+        // From $v.shard.$v.key.$v > shard.key
+        partitionKeyProperty = partitionKeyProperty.replace(/.\$v/g, "").replace(/\$v./g, "");
+        partitionKeyPropertyHeaders[i] = "/" + partitionKeyProperty;
+      }
+
+      return partitionKeyProperty;
+    });
+
+    /**
+     * Mongo implementation
+     * TODO: update proxy to use mongo driver deleteMany
+     */
+    _deleteDocuments = (toDeleteDocumentIds: DocumentId[]): Promise<DocumentId[]> => {
+      const promises = toDeleteDocumentIds.map((documentId) => _deleteDocument(documentId));
+      return Promise.all(promises);
+    };
+
+    const __deleteDocument = async (documentId: DocumentId): Promise<DocumentId> => {
+      await MongoProxyClient.deleteDocument(_collection.databaseId, _collection as ViewModels.Collection, documentId);
+      return documentId;
+    };
+
+    const _deleteDocument = useCallback(
+      (documentId: DocumentId): Promise<DocumentId> => {
+        onExecutionErrorChange(false);
+        const startKey: number = TelemetryProcessor.traceStart(Action.DeleteDocument, {
+          dataExplorerArea: Constants.Areas.Tab,
+          tabTitle,
+        });
+        setIsExecuting(true);
+        return __deleteDocument(documentId)
+          .then(
+            (deletedDocumentId) => {
+              TelemetryProcessor.traceSuccess(
+                Action.DeleteDocument,
+                {
+                  dataExplorerArea: Constants.Areas.Tab,
+                  tabTitle,
+                },
+                startKey,
+              );
+              return deletedDocumentId;
+            },
+            (error) => {
+              onExecutionErrorChange(true);
+              console.error(error);
+              TelemetryProcessor.traceFailure(
+                Action.DeleteDocument,
+                {
+                  dataExplorerArea: Constants.Areas.Tab,
+                  tabTitle,
+                  error: getErrorMessage(error),
+                  errorStack: getErrorStack(error),
+                },
+                startKey,
+              );
+              return undefined;
+            },
+          )
+          .finally(() => setIsExecuting(false));
+      },
+      [__deleteDocument, onExecutionErrorChange, tabTitle],
+    );
+
+    onSaveNewDocumentClick = useCallback((): Promise<unknown> => {
+      const documentContent = JSON.parse(selectedDocumentContent);
+      const startKey: number = TelemetryProcessor.traceStart(Action.CreateDocument, {
+        dataExplorerArea: Constants.Areas.Tab,
+        tabTitle,
+      });
+
+      const partitionKeyProperty = partitionKeyProperties?.[0];
+      if (partitionKeyProperty !== "_id" && !_hasShardKeySpecified(documentContent)) {
+        const message = `The document is lacking the shard property: ${partitionKeyProperty}`;
+        useDialog.getState().showOkModalDialog("Create document failed", message);
+        onExecutionErrorChange(true);
+        TelemetryProcessor.traceFailure(
+          Action.CreateDocument,
+          {
+            dataExplorerArea: Constants.Areas.Tab,
+            tabTitle,
+            error: message,
+          },
+          startKey,
+        );
+        Logger.logError("Failed to save new document: Document shard key not defined", "MongoDocumentsTab");
+        throw new Error("Document without shard key");
+      }
+
+      onExecutionErrorChange(false);
+      setIsExecuting(true);
+      return MongoProxyClient.createDocument(
+        _collection.databaseId,
+        _collection as ViewModels.Collection,
+        partitionKeyProperties?.[0],
+        documentContent,
+      )
+        .then(
+          (savedDocument: { _self: unknown }) => {
+            const partitionKeyArray: PartitionKey[] = extractPartitionKeyValues(
+              savedDocument,
+              _getPartitionKeyDefinition() as PartitionKeyDefinition,
+            );
+
+            const id = new ObjectId(this, savedDocument, partitionKeyArray);
+            const ids = documentIds;
+            ids.push(id);
+            delete savedDocument._self;
+
+            const value: string = renderObjectForEditor(savedDocument || {}, null, 4);
+            setSelectedDocumentContentBaseline(value);
+
+            setDocumentIds(ids);
+            setEditorState(ViewModels.DocumentExplorerState.exisitingDocumentNoEdits);
+            TelemetryProcessor.traceSuccess(
+              Action.CreateDocument,
+              {
+                dataExplorerArea: Constants.Areas.Tab,
+                tabTitle,
+              },
+              startKey,
+            );
+          },
+          (error) => {
+            onExecutionErrorChange(true);
+            const errorMessage = getErrorMessage(error);
+            useDialog.getState().showOkModalDialog("Create document failed", errorMessage);
+            TelemetryProcessor.traceFailure(
+              Action.CreateDocument,
+              {
+                dataExplorerArea: Constants.Areas.Tab,
+                tabTitle,
+                error: errorMessage,
+                errorStack: getErrorStack(error),
+              },
+              startKey,
+            );
+          },
+        )
+        .then(() => setSelectedRows(new Set([documentIds.length - 1])))
+        .finally(() => setIsExecuting(false));
+    }, [
+      selectedDocumentContent,
+      tabTitle,
+      partitionKeyProperties,
+      _hasShardKeySpecified,
+      onExecutionErrorChange,
+      _collection,
+      _getPartitionKeyDefinition,
+      documentIds,
+    ]);
+
+    onSaveExistingDocumentClick = (): Promise<void> => {
+      const documentContent = selectedDocumentContent;
+      onExecutionErrorChange(false);
+      setIsExecuting(true);
+      const startKey: number = TelemetryProcessor.traceStart(Action.UpdateDocument, {
+        dataExplorerArea: Constants.Areas.Tab,
+        tabTitle,
+      });
+
+      const selectedDocumentId = documentIds[clickedRow as number];
+      return MongoProxyClient.updateDocument(
+        _collection.databaseId,
+        _collection as ViewModels.Collection,
+        selectedDocumentId,
+        documentContent,
+      )
+        .then(
+          (updatedDocument: { _rid: string }) => {
+            const value: string = renderObjectForEditor(updatedDocument || {}, null, 4);
+            setSelectedDocumentContentBaseline(value);
+
+            documentIds.forEach((documentId: DocumentId) => {
+              if (documentId.rid === updatedDocument._rid) {
+                const partitionKeyArray: PartitionKey[] = extractPartitionKeyValues(
+                  updatedDocument,
+                  _getPartitionKeyDefinition() as PartitionKeyDefinition,
+                );
+
+                const id = new ObjectId(this, updatedDocument, partitionKeyArray);
+                documentId.id(id.id());
+              }
+            });
+            setEditorState(ViewModels.DocumentExplorerState.exisitingDocumentNoEdits);
+            TelemetryProcessor.traceSuccess(
+              Action.UpdateDocument,
+              {
+                dataExplorerArea: Constants.Areas.Tab,
+                tabTitle,
+              },
+              startKey,
+            );
+          },
+          (error) => {
+            onExecutionErrorChange(true);
+            const errorMessage = getErrorMessage(error);
+            useDialog.getState().showOkModalDialog("Update document failed", errorMessage);
+            TelemetryProcessor.traceFailure(
+              Action.UpdateDocument,
+              {
+                dataExplorerArea: Constants.Areas.Tab,
+                tabTitle,
+                error: errorMessage,
+                errorStack: getErrorStack(error),
+              },
+              startKey,
+            );
+          },
+        )
+        .finally(() => setIsExecuting(false));
+    };
+
+    loadNextPage = (): Promise<unknown> => {
+      setIsExecuting(true);
+      onExecutionErrorChange(false);
+      const filter: string = filterContent.trim();
+      const query: string = buildQuery(isPreferredApiMongoDB, filter);
+
+      return MongoProxyClient.queryDocuments(
+        _collection.databaseId,
+        _collection as ViewModels.Collection,
+        true,
+        query,
+        continuationToken,
+      )
+        .then(
+          ({ continuationToken: newContinuationToken, documents }) => {
+            setContinuationToken(newContinuationToken);
+            let currentDocuments = documentIds;
+            const currentDocumentsRids = currentDocuments.map((currentDocument) => currentDocument.rid);
+            const nextDocumentIds = documents
+              .filter((d: { _rid: string }) => {
+                return currentDocumentsRids.indexOf(d._rid) < 0;
+              })
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              .map((rawDocument: any) => {
+                const partitionKeyValue = rawDocument._partitionKeyValue;
+                return newDocumentId(rawDocument, partitionKeyProperties, [partitionKeyValue]);
+                // return new DocumentId(this, rawDocument, [partitionKeyValue]);
+              });
+
+            const merged = currentDocuments.concat(nextDocumentIds);
+
+            setDocumentIds(merged);
+            currentDocuments = merged;
+
+            if (filterContent.length > 0 && currentDocuments.length > 0) {
+              currentDocuments[0].click();
+            } else {
+              setSelectedDocumentContent("");
+              setEditorState(ViewModels.DocumentExplorerState.noDocumentSelected);
+            }
+            if (_onLoadStartKey !== null && _onLoadStartKey !== undefined) {
+              TelemetryProcessor.traceSuccess(
+                Action.Tab,
+                {
+                  databaseName: _collection.databaseId,
+                  collectionName: _collection.id(),
+
+                  dataExplorerArea: Constants.Areas.Tab,
+                  tabTitle,
+                },
+                _onLoadStartKey,
+              );
+              setOnLoadStartKey(undefined);
+            }
+          },
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          (error: any) => {
+            if (onLoadStartKey !== null && onLoadStartKey !== undefined) {
+              TelemetryProcessor.traceFailure(
+                Action.Tab,
+                {
+                  databaseName: _collection.databaseId,
+                  collectionName: _collection.id(),
+
+                  dataExplorerArea: Constants.Areas.Tab,
+                  tabTitle,
+                  error: getErrorMessage(error),
+                  errorStack: getErrorStack(error),
+                },
+                _onLoadStartKey,
+              );
+              setOnLoadStartKey(undefined);
+            }
+          },
+        )
+        .finally(() => setIsExecuting(false));
+    };
+  }
+  // ***************** Mongo ***************************
+
+  const refreshDocumentsGrid = useCallback(
+    async (applyFilterButtonPressed?: boolean): Promise<void> => {
+      // clear documents grid
+      setDocumentIds([]);
+      try {
+        // reset iterator which will autoload documents (in useEffect)
+        setDocumentsIterator({
+          iterator: createIterator(),
+          applyFilterButtonPressed,
+        });
+
+        // collapse filter
+        setAppliedFilter(filterContent);
+        setIsFilterExpanded(false);
+      } catch (error) {
+        console.error(error);
+        useDialog.getState().showOkModalDialog("Refresh documents grid failed", getErrorMessage(error));
+      }
+    },
+    [createIterator, filterContent],
+  );
+
+  return (
+    <FluentProvider theme={getPlatformTheme(configContext.platform)} style={{ height: "100%" }}>
+      <div className="tab-pane active documentsTab" role="tabpanel" style={{ display: "flex" }}>
+        {isFilterCreated && (
+          <div className="filterdivs">
+            {!isFilterExpanded && !isPreferredApiMongoDB && (
+              <div className="filterDocCollapsed">
+                <span className="selectQuery">SELECT * FROM c</span>
+                <span className="appliedQuery">{appliedFilter}</span>
+                <Button appearance="primary" onClick={onShowFilterClick} style={filterButtonStyle}>
+                  Edit Filter
+                </Button>
+              </div>
+            )}
+            {!isFilterExpanded && isPreferredApiMongoDB && (
+              <div className="filterDocCollapsed">
+                {appliedFilter.length > 0 && <span className="selectQuery">Filter :</span>}
+                {!(appliedFilter.length > 0) && <span className="noFilterApplied">No filter applied</span>}
+                <span className="appliedQuery">{appliedFilter}</span>
+                <Button style={filterButtonStyle} appearance="primary" onClick={onShowFilterClick}>
+                  Edit Filter
+                </Button>
+              </div>
+            )}
+            {isFilterExpanded && (
+              <div className="filterDocExpanded">
+                <div>
+                  <div className="editFilterContainer">
+                    {!isPreferredApiMongoDB && <span className="filterspan"> SELECT * FROM c </span>}
+                    <Input
+                      id="filterInput"
+                      ref={filterInput}
+                      type="text"
+                      list="filtersList"
+                      className={`${filterContent.length === 0 ? "placeholderVisible" : ""}`}
+                      style={{ width: "100%" }}
+                      title="Type a query predicate or choose one from the list."
+                      placeholder={
+                        isPreferredApiMongoDB
+                          ? "Type a query predicate (e.g., {´a´:´foo´}), or choose one from the drop down list, or leave empty to query all documents."
+                          : "Type a query predicate (e.g., WHERE c.id=´1´), or choose one from the drop down list, or leave empty to query all documents."
+                      }
+                      value={filterContent}
+                      autoFocus={true}
+                      onKeyDown={onFilterKeyDown}
+                      onChange={(e) => setFilterContent(e.target.value)}
+                      onBlur={() => setIsFilterFocused(false)}
+                    />
+
+                    <datalist id="filtersList">
+                      {lastFilterContents.map((filter) => (
+                        <option key={filter} value={filter} />
+                      ))}
+                    </datalist>
+
+                    <span className="filterbuttonpad">
+                      <Button
+                        appearance="primary"
+                        style={filterButtonStyle}
+                        onClick={() => refreshDocumentsGrid(true)}
+                        disabled={!applyFilterButton.enabled}
+                        aria-label="Apply filter"
+                        tabIndex={0}
+                      >
+                        Apply Filter
+                      </Button>
+                    </span>
+                    <span className="filterbuttonpad">
+                      {!isPreferredApiMongoDB && isExecuting && (
+                        <Button
+                          style={filterButtonStyle}
+                          appearance="primary"
+                          aria-label="Cancel Query"
+                          onClick={() => queryAbortController.abort()}
+                          tabIndex={0}
+                        >
+                          Cancel Query
+                        </Button>
+                      )}
+                    </span>
+                    <Button
+                      aria-label="close filter"
+                      tabIndex={0}
+                      onClick={onHideFilterClick}
+                      onKeyDown={onCloseButtonKeyDown}
+                      appearance="transparent"
+                      icon={<Dismiss16Filled />}
+                    />
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+        {/* <Split> doesn't like to be a flex child */}
+        <div style={{ overflow: "hidden", height: "100%" }}>
+          <Split>
+            <div
+              style={{ minWidth: 120, width: "35%", overflow: "hidden", position: "relative" }}
+              ref={tableContainerRef}
+            >
+              <Button
+                appearance="transparent"
+                aria-label="Refresh"
+                size="small"
+                icon={<ArrowClockwise16Filled />}
+                style={{
+                  position: "absolute",
+                  top: 6,
+                  right: 0,
+                  float: "right",
+                  backgroundColor: "white",
+                  zIndex: 1,
+                  color: StyleConstants.AccentMedium,
+                }}
+                onClick={() => refreshDocumentsGrid(false)}
+                onKeyDown={onRefreshKeyInput}
+              />
+              <div
+                style={
+                  {
+                    height: "100%",
+                    width: "calc(100% - 50px)",
+                  } /* Fix to make table not resize beyond parent's width */
+                }
+              >
+                <DocumentsTableComponent
+                  items={tableItems}
+                  onItemClicked={onDocumentClicked}
+                  onSelectedRowsChange={onSelectedRowsChange}
+                  selectedRows={selectedRows}
+                  size={tableContainerSizePx}
+                  columnHeaders={columnHeaders}
+                />
+                {tableItems.length > 0 && (
+                  <a
+                    className="loadMore"
+                    role="button"
+                    tabIndex={0}
+                    onClick={() => loadNextPage(documentsIterator.iterator, false)}
+                    onKeyDown={onLoadMoreKeyInput}
+                  >
+                    Load more
+                  </a>
+                )}
+              </div>
+            </div>
+            <div style={{ minWidth: "20%", width: "100%" }}>
+              {isTabActive && selectedDocumentContent && selectedRows.size <= 1 && (
+                <EditorReact
+                  language={"json"}
+                  content={selectedDocumentContent}
+                  isReadOnly={false}
+                  ariaLabel={"Document editor"}
+                  lineNumbers={"on"}
+                  theme={"_theme"}
+                  onContentChanged={_onEditorContentChange}
+                />
+              )}
+              {selectedRows.size > 1 && (
+                <span style={{ margin: 10 }}>Number of selected documents: {selectedRows.size}</span>
+              )}
+            </div>
+          </Split>
+        </div>
+      </div>
+    </FluentProvider>
+  );
+};
diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2Mongo.test.tsx b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2Mongo.test.tsx
new file mode 100644
index 000000000..79d5e2343
--- /dev/null
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2Mongo.test.tsx
@@ -0,0 +1,195 @@
+import { deleteDocument } from "Common/MongoProxyClient";
+import { Platform, updateConfigContext } from "ConfigContext";
+import { EditorReactProps } from "Explorer/Controls/Editor/EditorReact";
+import { useCommandBar } from "Explorer/Menus/CommandBar/CommandBarComponentAdapter";
+import {
+  DELETE_BUTTON_ID,
+  DISCARD_BUTTON_ID,
+  DocumentsTabComponent,
+  IDocumentsTabComponentProps,
+  NEW_DOCUMENT_BUTTON_ID,
+  SAVE_BUTTON_ID,
+  UPDATE_BUTTON_ID,
+  buildQuery,
+} from "Explorer/Tabs/DocumentsTabV2/DocumentsTabV2";
+import { ReactWrapper, ShallowWrapper, mount } from "enzyme";
+import * as ko from "knockout";
+import React from "react";
+import { act } from "react-dom/test-utils";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import Explorer from "../../Explorer";
+
+jest.requireActual("Explorer/Controls/Editor/EditorReact");
+
+const PROPERTY_VALUE = "__SOME_PROPERTY_VALUE__";
+
+jest.mock("Common/MongoProxyClient", () => ({
+  queryDocuments: jest.fn(() =>
+    Promise.resolve({
+      continuationToken: "",
+      documents: [
+        {
+          _rid: "_rid",
+          _self: "_self",
+          _etag: "etag",
+          _ts: 1234,
+          id: "id",
+        },
+      ],
+      headers: {},
+    }),
+  ),
+  readDocument: jest.fn(() =>
+    Promise.resolve({
+      _rid: "_rid1",
+      _self: "_self1",
+      _etag: "etag1",
+      property: PROPERTY_VALUE,
+      _ts: 5678,
+      id: "id1",
+    }),
+  ),
+  deleteDocument: jest.fn(() => Promise.resolve()),
+}));
+
+jest.mock("Explorer/Controls/Editor/EditorReact", () => ({
+  EditorReact: (props: EditorReactProps) => <>{props.content}</>,
+}));
+
+jest.mock("Explorer/Controls/Dialog", () => ({
+  useDialog: {
+    getState: jest.fn(() => ({
+      showOkCancelModalDialog: (title: string, subText: string, okLabel: string, onOk: () => void) => onOk(),
+      showOkModalDialog: () => {},
+    })),
+  },
+}));
+
+async function waitForComponentToPaint<P = unknown>(wrapper: ReactWrapper<P> | ShallowWrapper<P>, amount = 0) {
+  let newWrapper;
+  await act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, amount));
+    newWrapper = wrapper.update();
+  });
+  return newWrapper;
+}
+
+describe("Documents tab (Mongo API)", () => {
+  describe("buildQuery", () => {
+    it("should generate the right select query for SQL API", () => {
+      expect(buildQuery(true, "")).toContain("{}");
+    });
+  });
+
+  describe("Command bar buttons", () => {
+    const createMockProps = (): IDocumentsTabComponentProps => ({
+      isPreferredApiMongoDB: true,
+      documentIds: [],
+      collection: {
+        id: ko.observable<string>("foo"),
+        container: new Explorer(),
+        partitionKey: {
+          kind: "Hash",
+          paths: ["/pkey"],
+          version: 2,
+        },
+        partitionKeyProperties: ["pkey"],
+        partitionKeyPropertyHeaders: ["/pkey"],
+        databaseId: "databaseId",
+        self: "self",
+        rawDataModel: undefined,
+        selectedSubnodeKind: undefined,
+        children: undefined,
+        isCollectionExpanded: undefined,
+        onDocumentDBDocumentsClick: (): void => {
+          throw new Error("Function not implemented.");
+        },
+        onNewQueryClick: (): void => {
+          throw new Error("Function not implemented.");
+        },
+        expandCollection: (): void => {
+          throw new Error("Function not implemented.");
+        },
+        collapseCollection: (): void => {
+          throw new Error("Function not implemented.");
+        },
+        getDatabase: (): ViewModels.Database => {
+          throw new Error("Function not implemented.");
+        },
+        nodeKind: "nodeKind",
+        rid: "rid",
+      },
+      partitionKey: undefined,
+      onLoadStartKey: 0,
+      tabTitle: "",
+      onExecutionErrorChange: (isExecutionError: boolean): void => {
+        isExecutionError;
+      },
+      onIsExecutingChange: (isExecuting: boolean): void => {
+        isExecuting;
+      },
+      isTabActive: true,
+    });
+
+    let wrapper: ReactWrapper;
+
+    beforeEach(async () => {
+      updateConfigContext({ platform: Platform.Hosted });
+
+      const props: IDocumentsTabComponentProps = createMockProps();
+
+      wrapper = mount(<DocumentsTabComponent {...props} />);
+      wrapper = await waitForComponentToPaint(wrapper);
+    });
+
+    afterEach(() => {
+      wrapper.unmount();
+    });
+
+    it("renders by default the first document", async () => {
+      expect(wrapper.findWhere((node) => node.text().includes(PROPERTY_VALUE)).exists()).toBeTruthy();
+    });
+
+    it("default buttons", async () => {
+      expect(useCommandBar.getState().contextButtons.find((button) => button.id === UPDATE_BUTTON_ID)).toBeDefined();
+      expect(useCommandBar.getState().contextButtons.find((button) => button.id === DISCARD_BUTTON_ID)).toBeDefined();
+      expect(useCommandBar.getState().contextButtons.find((button) => button.id === DELETE_BUTTON_ID)).toBeDefined();
+    });
+
+    it("clicking on New Document should show editor with new document", () => {
+      act(() => {
+        useCommandBar
+          .getState()
+          .contextButtons.find((button) => button.id === NEW_DOCUMENT_BUTTON_ID)
+          .onCommandClick(undefined);
+      });
+      expect(wrapper.findWhere((node) => node.text().includes("replace_with_new_document_id")).exists()).toBeTruthy();
+    });
+
+    it("clicking on New Document should show Save and Discard buttons", () => {
+      act(() => {
+        useCommandBar
+          .getState()
+          .contextButtons.find((button) => button.id === NEW_DOCUMENT_BUTTON_ID)
+          .onCommandClick(undefined);
+      });
+
+      expect(useCommandBar.getState().contextButtons.find((button) => button.id === SAVE_BUTTON_ID)).toBeDefined();
+      expect(useCommandBar.getState().contextButtons.find((button) => button.id === DISCARD_BUTTON_ID)).toBeDefined();
+    });
+
+    it("clicking Delete Document asks for confirmation", () => {
+      const mockDeleteDocument = deleteDocument as jest.Mock;
+      mockDeleteDocument.mockClear();
+
+      act(() => {
+        useCommandBar
+          .getState()
+          .contextButtons.find((button) => button.id === DELETE_BUTTON_ID)
+          .onCommandClick(undefined);
+      });
+
+      expect(mockDeleteDocument).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.test.tsx b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.test.tsx
new file mode 100644
index 000000000..e20084648
--- /dev/null
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.test.tsx
@@ -0,0 +1,34 @@
+import { TableRowId } from "@fluentui/react-components";
+import { mount } from "enzyme";
+import React from "react";
+import { DocumentsTableComponent, IDocumentsTableComponentProps } from "./DocumentsTableComponent";
+
+const PARTITION_KEY_HEADER = "partitionKey";
+const ID_HEADER = "id";
+
+describe("DocumentsTableComponent", () => {
+  const createMockProps = (): IDocumentsTableComponentProps => ({
+    items: [
+      { [ID_HEADER]: "1", [PARTITION_KEY_HEADER]: "pk1" },
+      { [ID_HEADER]: "2", [PARTITION_KEY_HEADER]: "pk2" },
+      { [ID_HEADER]: "3", [PARTITION_KEY_HEADER]: "pk3" },
+    ],
+    onItemClicked: (): void => {},
+    onSelectedRowsChange: (): void => {},
+    selectedRows: new Set<TableRowId>(),
+    size: {
+      height: 0,
+      width: 0,
+    },
+    columnHeaders: {
+      idHeader: ID_HEADER,
+      partitionKeyHeaders: [PARTITION_KEY_HEADER],
+    },
+  });
+
+  it("should render documents and partition keys in header", () => {
+    const props: IDocumentsTableComponentProps = createMockProps();
+    const wrapper = mount(<DocumentsTableComponent {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
new file mode 100644
index 000000000..4089b12bd
--- /dev/null
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
@@ -0,0 +1,271 @@
+import {
+  Menu,
+  MenuItem,
+  MenuList,
+  MenuPopover,
+  MenuTrigger,
+  TableRowData as RowStateBase,
+  Table,
+  TableBody,
+  TableCell,
+  TableCellLayout,
+  TableColumnDefinition,
+  TableColumnSizingOptions,
+  TableHeader,
+  TableHeaderCell,
+  TableRow,
+  TableRowId,
+  TableSelectionCell,
+  createTableColumn,
+  useArrowNavigationGroup,
+  useTableColumnSizing_unstable,
+  useTableFeatures,
+  useTableSelection,
+} from "@fluentui/react-components";
+import React, { useCallback, useEffect, useMemo } from "react";
+import { FixedSizeList as List, ListChildComponentProps } from "react-window";
+
+export type DocumentsTableComponentItem = {
+  id: string;
+} & Record<string, string>;
+
+export type ColumnHeaders = {
+  idHeader: string;
+  partitionKeyHeaders: string[];
+};
+export interface IDocumentsTableComponentProps {
+  items: DocumentsTableComponentItem[];
+  onItemClicked: (index: number) => void;
+  onSelectedRowsChange: (selectedItemsIndices: Set<TableRowId>) => void;
+  selectedRows: Set<TableRowId>;
+  size: { height: number; width: number };
+  columnHeaders: ColumnHeaders;
+  style?: React.CSSProperties;
+}
+
+interface TableRowData extends RowStateBase<DocumentsTableComponentItem> {
+  onClick: (e: React.MouseEvent) => void;
+  onKeyDown: (e: React.KeyboardEvent) => void;
+  selected: boolean;
+  appearance: "brand" | "none";
+}
+interface ReactWindowRenderFnProps extends ListChildComponentProps {
+  data: TableRowData[];
+}
+
+export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> = ({
+  items,
+  onItemClicked,
+  onSelectedRowsChange,
+  selectedRows,
+  style,
+  size,
+  columnHeaders,
+}: IDocumentsTableComponentProps) => {
+  const [activeItemIndex, setActiveItemIndex] = React.useState<number>(undefined);
+
+  const initialSizingOptions: TableColumnSizingOptions = {
+    id: {
+      idealWidth: 280,
+      minWidth: 50,
+    },
+  };
+  columnHeaders.partitionKeyHeaders.forEach((pkHeader) => {
+    initialSizingOptions[pkHeader] = {
+      idealWidth: 200,
+      minWidth: 50,
+    };
+  });
+
+  const [columnSizingOptions, setColumnSizingOptions] = React.useState<TableColumnSizingOptions>(initialSizingOptions);
+
+  const onColumnResize = React.useCallback((_, { columnId, width }) => {
+    setColumnSizingOptions((state) => ({
+      ...state,
+      [columnId]: {
+        ...state[columnId],
+        idealWidth: width,
+      },
+    }));
+  }, []);
+
+  // 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,
+          renderCell: (item) => (
+            <TableCellLayout truncate title={item.id}>
+              {item.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],
+  );
+
+  const onIdClicked = useCallback((index: number) => onSelectedRowsChange(new Set([index])), [onSelectedRowsChange]);
+
+  const RenderRow = ({ index, style, data }: ReactWindowRenderFnProps) => {
+    const { item, selected, appearance, onClick, onKeyDown } = data[index];
+    return (
+      <TableRow aria-rowindex={index + 2} style={style} key={item.id} aria-selected={selected} appearance={appearance}>
+        <TableSelectionCell
+          checked={selected}
+          checkboxIndicator={{ "aria-label": "Select row" }}
+          onClick={onClick}
+          onKeyDown={onKeyDown}
+        />
+        {columns.map((column) => (
+          <TableCell
+            key={column.columnId}
+            className="documentsTableCell"
+            onClick={(/* e */) => onSelectedRowsChange(new Set<TableRowId>([index]))}
+            onKeyDown={() => onIdClicked(index)}
+            {...columnSizing.getTableCellProps(column.columnId)}
+            tabIndex={column.columnId === "id" ? 0 : -1}
+          >
+            {column.renderCell(item)}
+          </TableCell>
+        ))}
+      </TableRow>
+    );
+  };
+
+  const {
+    getRows,
+    columnSizing_unstable: columnSizing,
+    tableRef,
+    selection: { allRowsSelected, someRowsSelected, toggleAllRows, toggleRow, isRowSelected },
+  } = useTableFeatures(
+    {
+      columns,
+      items,
+    },
+    [
+      useTableColumnSizing_unstable({ columnSizingOptions, onColumnResize }),
+      useTableSelection({
+        selectionMode: "multiselect",
+        selectedItems: selectedRows,
+        // eslint-disable-next-line react/prop-types
+        onSelectionChange: (e, data) => onSelectedRowsChange(data.selectedItems),
+      }),
+    ],
+  );
+
+  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 toggleAllKeydown = React.useCallback(
+    (e: React.KeyboardEvent<HTMLDivElement>) => {
+      if (e.key === " ") {
+        toggleAllRows(e);
+        e.preventDefault();
+      }
+    },
+    [toggleAllRows],
+  );
+
+  // Load document depending on selection
+  useEffect(() => {
+    if (selectedRows.size === 1 && items.length > 0) {
+      const newActiveItemIndex = selectedRows.values().next().value;
+      if (newActiveItemIndex !== activeItemIndex) {
+        onItemClicked(newActiveItemIndex);
+        setActiveItemIndex(newActiveItemIndex);
+      }
+    }
+  }, [selectedRows, items]);
+
+  // Cell keyboard navigation
+  const keyboardNavAttr = useArrowNavigationGroup({ axis: "grid" });
+
+  // TODO: Bug in fluent UI typings that requires any here
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const tableProps: any = {
+    "aria-label": "Filtered documents table",
+    role: "grid",
+    ...columnSizing.getTableProps(),
+    ...keyboardNavAttr,
+    size: "extra-small",
+    ref: tableRef,
+    ...style,
+  };
+
+  return (
+    <Table className="documentsTable" noNativeElements {...tableProps}>
+      <TableHeader className="documentsTableHeader">
+        <TableRow style={{ width: size ? size.width - 15 : "100%" }}>
+          <TableSelectionCell
+            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="documentsTableCell"
+                  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>
+          ))}
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <List
+          height={size !== undefined ? size.height - 32 /* table header */ - 21 /* load more */ : 0}
+          itemCount={items.length}
+          itemSize={30}
+          width={size ? size.width : 0}
+          itemData={rows}
+          style={{ overflowY: "scroll" }}
+        >
+          {RenderRow}
+        </List>
+      </TableBody>
+    </Table>
+  );
+};
diff --git a/src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTabV2.test.tsx.snap b/src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTabV2.test.tsx.snap
new file mode 100644
index 000000000..0b4c7578e
--- /dev/null
+++ b/src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTabV2.test.tsx.snap
@@ -0,0 +1,558 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Documents tab (noSql API) when rendered should render the page 1`] = `
+<FluentProvider
+  style={
+    Object {
+      "height": "100%",
+    }
+  }
+  theme={
+    Object {
+      "borderRadiusCircular": "10000px",
+      "borderRadiusLarge": "6px",
+      "borderRadiusMedium": "4px",
+      "borderRadiusNone": "0",
+      "borderRadiusSmall": "2px",
+      "borderRadiusXLarge": "8px",
+      "colorBackgroundOverlay": "rgba(0, 0, 0, 0.4)",
+      "colorBrandBackground": "#117865",
+      "colorBrandBackground2": "#e3f7ef",
+      "colorBrandBackground2Hover": "#c0ecdd",
+      "colorBrandBackground2Pressed": "#78d3b9",
+      "colorBrandBackgroundHover": "#0c695a",
+      "colorBrandBackgroundInverted": "#ffffff",
+      "colorBrandBackgroundInvertedHover": "#e3f7ef",
+      "colorBrandBackgroundInvertedPressed": "#9ee0cb",
+      "colorBrandBackgroundInvertedSelected": "#c0ecdd",
+      "colorBrandBackgroundPressed": "#033f38",
+      "colorBrandBackgroundSelected": "#0a5c50",
+      "colorBrandBackgroundStatic": "#117865",
+      "colorBrandForeground1": "#117865",
+      "colorBrandForeground2": "#0c695a",
+      "colorBrandForeground2Hover": "#0a5c50",
+      "colorBrandForeground2Pressed": "#01322E",
+      "colorBrandForegroundInverted": "#2aaC94",
+      "colorBrandForegroundInvertedHover": "#3abb9f",
+      "colorBrandForegroundInvertedPressed": "#2aaC94",
+      "colorBrandForegroundLink": "#0c695a",
+      "colorBrandForegroundLinkHover": "#0a5c50",
+      "colorBrandForegroundLinkPressed": "#033f38",
+      "colorBrandForegroundLinkSelected": "#0c695a",
+      "colorBrandForegroundOnLight": "#117865",
+      "colorBrandForegroundOnLightHover": "#0c695a",
+      "colorBrandForegroundOnLightPressed": "#054d43",
+      "colorBrandForegroundOnLightSelected": "#0a5c50",
+      "colorBrandShadowAmbient": "rgba(0,0,0,0.30)",
+      "colorBrandShadowKey": "rgba(0,0,0,0.25)",
+      "colorBrandStroke1": "#117865",
+      "colorBrandStroke2": "#9ee0cb",
+      "colorBrandStroke2Contrast": "#9ee0cb",
+      "colorBrandStroke2Hover": "#52c7aa",
+      "colorBrandStroke2Pressed": "#117865",
+      "colorCompoundBrandBackground": "#117865",
+      "colorCompoundBrandBackgroundHover": "#0c695a",
+      "colorCompoundBrandBackgroundPressed": "#0a5c50",
+      "colorCompoundBrandForeground1": "#117865",
+      "colorCompoundBrandForeground1Hover": "#0c695a",
+      "colorCompoundBrandForeground1Pressed": "#0a5c50",
+      "colorCompoundBrandStroke": "#117865",
+      "colorCompoundBrandStrokeHover": "#0c695a",
+      "colorCompoundBrandStrokePressed": "#0a5c50",
+      "colorNeutralBackground1": "#ffffff",
+      "colorNeutralBackground1Hover": "#f5f5f5",
+      "colorNeutralBackground1Pressed": "#e0e0e0",
+      "colorNeutralBackground1Selected": "#ebebeb",
+      "colorNeutralBackground2": "#fafafa",
+      "colorNeutralBackground2Hover": "#f0f0f0",
+      "colorNeutralBackground2Pressed": "#dbdbdb",
+      "colorNeutralBackground2Selected": "#e6e6e6",
+      "colorNeutralBackground3": "#f5f5f5",
+      "colorNeutralBackground3Hover": "#ebebeb",
+      "colorNeutralBackground3Pressed": "#d6d6d6",
+      "colorNeutralBackground3Selected": "#e0e0e0",
+      "colorNeutralBackground4": "#f0f0f0",
+      "colorNeutralBackground4Hover": "#fafafa",
+      "colorNeutralBackground4Pressed": "#f5f5f5",
+      "colorNeutralBackground4Selected": "#ffffff",
+      "colorNeutralBackground5": "#ebebeb",
+      "colorNeutralBackground5Hover": "#f5f5f5",
+      "colorNeutralBackground5Pressed": "#f0f0f0",
+      "colorNeutralBackground5Selected": "#fafafa",
+      "colorNeutralBackground6": "#e6e6e6",
+      "colorNeutralBackgroundAlpha": "rgba(255, 255, 255, 0.5)",
+      "colorNeutralBackgroundAlpha2": "rgba(255, 255, 255, 0.8)",
+      "colorNeutralBackgroundDisabled": "#f0f0f0",
+      "colorNeutralBackgroundInverted": "#292929",
+      "colorNeutralBackgroundInvertedDisabled": "rgba(255, 255, 255, 0.1)",
+      "colorNeutralBackgroundStatic": "#333333",
+      "colorNeutralForeground1": "#242424",
+      "colorNeutralForeground1Hover": "#242424",
+      "colorNeutralForeground1Pressed": "#242424",
+      "colorNeutralForeground1Selected": "#242424",
+      "colorNeutralForeground1Static": "#242424",
+      "colorNeutralForeground2": "#424242",
+      "colorNeutralForeground2BrandHover": "#117865",
+      "colorNeutralForeground2BrandPressed": "#0c695a",
+      "colorNeutralForeground2BrandSelected": "#117865",
+      "colorNeutralForeground2Hover": "#242424",
+      "colorNeutralForeground2Link": "#424242",
+      "colorNeutralForeground2LinkHover": "#242424",
+      "colorNeutralForeground2LinkPressed": "#242424",
+      "colorNeutralForeground2LinkSelected": "#242424",
+      "colorNeutralForeground2Pressed": "#242424",
+      "colorNeutralForeground2Selected": "#242424",
+      "colorNeutralForeground3": "#616161",
+      "colorNeutralForeground3BrandHover": "#117865",
+      "colorNeutralForeground3BrandPressed": "#0c695a",
+      "colorNeutralForeground3BrandSelected": "#117865",
+      "colorNeutralForeground3Hover": "#424242",
+      "colorNeutralForeground3Pressed": "#424242",
+      "colorNeutralForeground3Selected": "#424242",
+      "colorNeutralForeground4": "#707070",
+      "colorNeutralForegroundDisabled": "#bdbdbd",
+      "colorNeutralForegroundInverted": "#ffffff",
+      "colorNeutralForegroundInverted2": "#ffffff",
+      "colorNeutralForegroundInvertedDisabled": "rgba(255, 255, 255, 0.4)",
+      "colorNeutralForegroundInvertedHover": "#ffffff",
+      "colorNeutralForegroundInvertedLink": "#ffffff",
+      "colorNeutralForegroundInvertedLinkHover": "#ffffff",
+      "colorNeutralForegroundInvertedLinkPressed": "#ffffff",
+      "colorNeutralForegroundInvertedLinkSelected": "#ffffff",
+      "colorNeutralForegroundInvertedPressed": "#ffffff",
+      "colorNeutralForegroundInvertedSelected": "#ffffff",
+      "colorNeutralForegroundOnBrand": "#ffffff",
+      "colorNeutralForegroundStaticInverted": "#ffffff",
+      "colorNeutralShadowAmbient": "rgba(0,0,0,0.12)",
+      "colorNeutralShadowAmbientDarker": "rgba(0,0,0,0.20)",
+      "colorNeutralShadowAmbientLighter": "rgba(0,0,0,0.06)",
+      "colorNeutralShadowKey": "rgba(0,0,0,0.14)",
+      "colorNeutralShadowKeyDarker": "rgba(0,0,0,0.24)",
+      "colorNeutralShadowKeyLighter": "rgba(0,0,0,0.07)",
+      "colorNeutralStencil1": "#e6e6e6",
+      "colorNeutralStencil1Alpha": "rgba(0, 0, 0, 0.1)",
+      "colorNeutralStencil2": "#fafafa",
+      "colorNeutralStencil2Alpha": "rgba(0, 0, 0, 0.05)",
+      "colorNeutralStroke1": "#d1d1d1",
+      "colorNeutralStroke1Hover": "#c7c7c7",
+      "colorNeutralStroke1Pressed": "#b3b3b3",
+      "colorNeutralStroke1Selected": "#bdbdbd",
+      "colorNeutralStroke2": "#e0e0e0",
+      "colorNeutralStroke3": "#f0f0f0",
+      "colorNeutralStrokeAccessible": "#616161",
+      "colorNeutralStrokeAccessibleHover": "#575757",
+      "colorNeutralStrokeAccessiblePressed": "#4d4d4d",
+      "colorNeutralStrokeAccessibleSelected": "#117865",
+      "colorNeutralStrokeAlpha": "rgba(0, 0, 0, 0.05)",
+      "colorNeutralStrokeAlpha2": "rgba(255, 255, 255, 0.2)",
+      "colorNeutralStrokeDisabled": "#e0e0e0",
+      "colorNeutralStrokeInvertedDisabled": "rgba(255, 255, 255, 0.4)",
+      "colorNeutralStrokeOnBrand": "#ffffff",
+      "colorNeutralStrokeOnBrand2": "#ffffff",
+      "colorNeutralStrokeOnBrand2Hover": "#ffffff",
+      "colorNeutralStrokeOnBrand2Pressed": "#ffffff",
+      "colorNeutralStrokeOnBrand2Selected": "#ffffff",
+      "colorNeutralStrokeSubtle": "#e0e0e0",
+      "colorPaletteAnchorBackground2": "#bcc3c7",
+      "colorPaletteAnchorBorderActive": "#394146",
+      "colorPaletteAnchorForeground2": "#202427",
+      "colorPaletteBeigeBackground2": "#d7d4d4",
+      "colorPaletteBeigeBorderActive": "#7a7574",
+      "colorPaletteBeigeForeground2": "#444241",
+      "colorPaletteBerryBackground1": "#fdf5fc",
+      "colorPaletteBerryBackground2": "#edbbe7",
+      "colorPaletteBerryBackground3": "#c239b3",
+      "colorPaletteBerryBorder1": "#edbbe7",
+      "colorPaletteBerryBorder2": "#c239b3",
+      "colorPaletteBerryBorderActive": "#c239b3",
+      "colorPaletteBerryForeground1": "#af33a1",
+      "colorPaletteBerryForeground2": "#6d2064",
+      "colorPaletteBerryForeground3": "#c239b3",
+      "colorPaletteBlueBackground2": "#a9d3f2",
+      "colorPaletteBlueBorderActive": "#0078d4",
+      "colorPaletteBlueForeground2": "#004377",
+      "colorPaletteBrassBackground2": "#e0cea2",
+      "colorPaletteBrassBorderActive": "#986f0b",
+      "colorPaletteBrassForeground2": "#553e06",
+      "colorPaletteBrownBackground2": "#ddc3b0",
+      "colorPaletteBrownBorderActive": "#8e562e",
+      "colorPaletteBrownForeground2": "#50301a",
+      "colorPaletteCornflowerBackground2": "#c8d1fa",
+      "colorPaletteCornflowerBorderActive": "#4f6bed",
+      "colorPaletteCornflowerForeground2": "#2c3c85",
+      "colorPaletteCranberryBackground2": "#eeacb2",
+      "colorPaletteCranberryBorderActive": "#c50f1f",
+      "colorPaletteCranberryForeground2": "#6e0811",
+      "colorPaletteDarkGreenBackground2": "#9ad29a",
+      "colorPaletteDarkGreenBorderActive": "#0b6a0b",
+      "colorPaletteDarkGreenForeground2": "#063b06",
+      "colorPaletteDarkOrangeBackground1": "#fdf6f3",
+      "colorPaletteDarkOrangeBackground2": "#f4bfab",
+      "colorPaletteDarkOrangeBackground3": "#da3b01",
+      "colorPaletteDarkOrangeBorder1": "#f4bfab",
+      "colorPaletteDarkOrangeBorder2": "#da3b01",
+      "colorPaletteDarkOrangeBorderActive": "#da3b01",
+      "colorPaletteDarkOrangeForeground1": "#c43501",
+      "colorPaletteDarkOrangeForeground2": "#7a2101",
+      "colorPaletteDarkOrangeForeground3": "#da3b01",
+      "colorPaletteDarkRedBackground2": "#d69ca5",
+      "colorPaletteDarkRedBorderActive": "#750b1c",
+      "colorPaletteDarkRedForeground2": "#420610",
+      "colorPaletteForestBackground2": "#bdd99b",
+      "colorPaletteForestBorderActive": "#498205",
+      "colorPaletteForestForeground2": "#294903",
+      "colorPaletteGoldBackground2": "#ecdfa5",
+      "colorPaletteGoldBorderActive": "#c19c00",
+      "colorPaletteGoldForeground2": "#6c5700",
+      "colorPaletteGrapeBackground2": "#d9a7e0",
+      "colorPaletteGrapeBorderActive": "#881798",
+      "colorPaletteGrapeForeground2": "#4c0d55",
+      "colorPaletteGreenBackground1": "#f1faf1",
+      "colorPaletteGreenBackground2": "#9fd89f",
+      "colorPaletteGreenBackground3": "#107c10",
+      "colorPaletteGreenBorder1": "#9fd89f",
+      "colorPaletteGreenBorder2": "#107c10",
+      "colorPaletteGreenBorderActive": "#107c10",
+      "colorPaletteGreenForeground1": "#0e700e",
+      "colorPaletteGreenForeground2": "#094509",
+      "colorPaletteGreenForeground3": "#107c10",
+      "colorPaletteGreenForegroundInverted": "#359b35",
+      "colorPaletteLavenderBackground2": "#d2ccf8",
+      "colorPaletteLavenderBorderActive": "#7160e8",
+      "colorPaletteLavenderForeground2": "#3f3682",
+      "colorPaletteLightGreenBackground1": "#f2fbf2",
+      "colorPaletteLightGreenBackground2": "#a7e3a5",
+      "colorPaletteLightGreenBackground3": "#13a10e",
+      "colorPaletteLightGreenBorder1": "#a7e3a5",
+      "colorPaletteLightGreenBorder2": "#13a10e",
+      "colorPaletteLightGreenBorderActive": "#13a10e",
+      "colorPaletteLightGreenForeground1": "#11910d",
+      "colorPaletteLightGreenForeground2": "#0b5a08",
+      "colorPaletteLightGreenForeground3": "#13a10e",
+      "colorPaletteLightTealBackground2": "#a6e9ed",
+      "colorPaletteLightTealBorderActive": "#00b7c3",
+      "colorPaletteLightTealForeground2": "#00666d",
+      "colorPaletteLilacBackground2": "#e6bfed",
+      "colorPaletteLilacBorderActive": "#b146c2",
+      "colorPaletteLilacForeground2": "#63276d",
+      "colorPaletteMagentaBackground2": "#eca5d1",
+      "colorPaletteMagentaBorderActive": "#bf0077",
+      "colorPaletteMagentaForeground2": "#6b0043",
+      "colorPaletteMarigoldBackground1": "#fefbf4",
+      "colorPaletteMarigoldBackground2": "#f9e2ae",
+      "colorPaletteMarigoldBackground3": "#eaa300",
+      "colorPaletteMarigoldBorder1": "#f9e2ae",
+      "colorPaletteMarigoldBorder2": "#eaa300",
+      "colorPaletteMarigoldBorderActive": "#eaa300",
+      "colorPaletteMarigoldForeground1": "#d39300",
+      "colorPaletteMarigoldForeground2": "#835b00",
+      "colorPaletteMarigoldForeground3": "#eaa300",
+      "colorPaletteMinkBackground2": "#cecccb",
+      "colorPaletteMinkBorderActive": "#5d5a58",
+      "colorPaletteMinkForeground2": "#343231",
+      "colorPaletteNavyBackground2": "#a3b2e8",
+      "colorPaletteNavyBorderActive": "#0027b4",
+      "colorPaletteNavyForeground2": "#001665",
+      "colorPalettePeachBackground2": "#ffddb3",
+      "colorPalettePeachBorderActive": "#ff8c00",
+      "colorPalettePeachForeground2": "#8f4e00",
+      "colorPalettePinkBackground2": "#f7c0e3",
+      "colorPalettePinkBorderActive": "#e43ba6",
+      "colorPalettePinkForeground2": "#80215d",
+      "colorPalettePlatinumBackground2": "#cdd6d8",
+      "colorPalettePlatinumBorderActive": "#69797e",
+      "colorPalettePlatinumForeground2": "#3b4447",
+      "colorPalettePlumBackground2": "#d696c0",
+      "colorPalettePlumBorderActive": "#77004d",
+      "colorPalettePlumForeground2": "#43002b",
+      "colorPalettePumpkinBackground2": "#efc4ad",
+      "colorPalettePumpkinBorderActive": "#ca5010",
+      "colorPalettePumpkinForeground2": "#712d09",
+      "colorPalettePurpleBackground2": "#c6b1de",
+      "colorPalettePurpleBorderActive": "#5c2e91",
+      "colorPalettePurpleForeground2": "#341a51",
+      "colorPaletteRedBackground1": "#fdf6f6",
+      "colorPaletteRedBackground2": "#f1bbbc",
+      "colorPaletteRedBackground3": "#d13438",
+      "colorPaletteRedBorder1": "#f1bbbc",
+      "colorPaletteRedBorder2": "#d13438",
+      "colorPaletteRedBorderActive": "#d13438",
+      "colorPaletteRedForeground1": "#bc2f32",
+      "colorPaletteRedForeground2": "#751d1f",
+      "colorPaletteRedForeground3": "#d13438",
+      "colorPaletteRedForegroundInverted": "#dc5e62",
+      "colorPaletteRoyalBlueBackground2": "#9abfdc",
+      "colorPaletteRoyalBlueBorderActive": "#004e8c",
+      "colorPaletteRoyalBlueForeground2": "#002c4e",
+      "colorPaletteSeafoamBackground2": "#a8f0cd",
+      "colorPaletteSeafoamBorderActive": "#00cc6a",
+      "colorPaletteSeafoamForeground2": "#00723b",
+      "colorPaletteSteelBackground2": "#94c8d4",
+      "colorPaletteSteelBorderActive": "#005b70",
+      "colorPaletteSteelForeground2": "#00333f",
+      "colorPaletteTealBackground2": "#9bd9db",
+      "colorPaletteTealBorderActive": "#038387",
+      "colorPaletteTealForeground2": "#02494c",
+      "colorPaletteYellowBackground1": "#fffef5",
+      "colorPaletteYellowBackground2": "#fef7b2",
+      "colorPaletteYellowBackground3": "#fde300",
+      "colorPaletteYellowBorder1": "#fef7b2",
+      "colorPaletteYellowBorder2": "#fde300",
+      "colorPaletteYellowBorderActive": "#fde300",
+      "colorPaletteYellowForeground1": "#817400",
+      "colorPaletteYellowForeground2": "#817400",
+      "colorPaletteYellowForeground3": "#fde300",
+      "colorPaletteYellowForegroundInverted": "#fef7b2",
+      "colorScrollbarOverlay": "rgba(0, 0, 0, 0.5)",
+      "colorStatusDangerBackground1": "#fdf3f4",
+      "colorStatusDangerBackground2": "#eeacb2",
+      "colorStatusDangerBackground3": "#c50f1f",
+      "colorStatusDangerBorder1": "#eeacb2",
+      "colorStatusDangerBorder2": "#c50f1f",
+      "colorStatusDangerBorderActive": "#c50f1f",
+      "colorStatusDangerForeground1": "#b10e1c",
+      "colorStatusDangerForeground2": "#6e0811",
+      "colorStatusDangerForeground3": "#c50f1f",
+      "colorStatusDangerForegroundInverted": "#dc626d",
+      "colorStatusSuccessBackground1": "#f1faf1",
+      "colorStatusSuccessBackground2": "#9fd89f",
+      "colorStatusSuccessBackground3": "#107c10",
+      "colorStatusSuccessBorder1": "#9fd89f",
+      "colorStatusSuccessBorder2": "#107c10",
+      "colorStatusSuccessBorderActive": "#107c10",
+      "colorStatusSuccessForeground1": "#0e700e",
+      "colorStatusSuccessForeground2": "#094509",
+      "colorStatusSuccessForeground3": "#107c10",
+      "colorStatusSuccessForegroundInverted": "#54b054",
+      "colorStatusWarningBackground1": "#fff9f5",
+      "colorStatusWarningBackground2": "#fdcfb4",
+      "colorStatusWarningBackground3": "#f7630c",
+      "colorStatusWarningBorder1": "#fdcfb4",
+      "colorStatusWarningBorder2": "#bc4b09",
+      "colorStatusWarningBorderActive": "#f7630c",
+      "colorStatusWarningForeground1": "#bc4b09",
+      "colorStatusWarningForeground2": "#8a3707",
+      "colorStatusWarningForeground3": "#bc4b09",
+      "colorStatusWarningForegroundInverted": "#faa06b",
+      "colorStrokeFocus1": "#ffffff",
+      "colorStrokeFocus2": "#000000",
+      "colorSubtleBackground": "transparent",
+      "colorSubtleBackgroundHover": "#f5f5f5",
+      "colorSubtleBackgroundInverted": "transparent",
+      "colorSubtleBackgroundInvertedHover": "rgba(0, 0, 0, 0.1)",
+      "colorSubtleBackgroundInvertedPressed": "rgba(0, 0, 0, 0.3)",
+      "colorSubtleBackgroundInvertedSelected": "rgba(0, 0, 0, 0.2)",
+      "colorSubtleBackgroundLightAlphaHover": "rgba(255, 255, 255, 0.7)",
+      "colorSubtleBackgroundLightAlphaPressed": "rgba(255, 255, 255, 0.5)",
+      "colorSubtleBackgroundLightAlphaSelected": "transparent",
+      "colorSubtleBackgroundPressed": "#e0e0e0",
+      "colorSubtleBackgroundSelected": "#ebebeb",
+      "colorTransparentBackground": "transparent",
+      "colorTransparentBackgroundHover": "transparent",
+      "colorTransparentBackgroundPressed": "transparent",
+      "colorTransparentBackgroundSelected": "transparent",
+      "colorTransparentStroke": "transparent",
+      "colorTransparentStrokeDisabled": "transparent",
+      "colorTransparentStrokeInteractive": "transparent",
+      "curveAccelerateMax": "cubic-bezier(0.9,0.1,1,0.2)",
+      "curveAccelerateMid": "cubic-bezier(1,0,1,1)",
+      "curveAccelerateMin": "cubic-bezier(0.8,0,0.78,1)",
+      "curveDecelerateMax": "cubic-bezier(0.1,0.9,0.2,1)",
+      "curveDecelerateMid": "cubic-bezier(0,0,0,1)",
+      "curveDecelerateMin": "cubic-bezier(0.33,0,0.1,1)",
+      "curveEasyEase": "cubic-bezier(0.33,0,0.67,1)",
+      "curveEasyEaseMax": "cubic-bezier(0.8,0,0.2,1)",
+      "curveLinear": "cubic-bezier(0,0,1,1)",
+      "durationFast": "150ms",
+      "durationFaster": "100ms",
+      "durationGentle": "250ms",
+      "durationNormal": "200ms",
+      "durationSlow": "300ms",
+      "durationSlower": "400ms",
+      "durationUltraFast": "50ms",
+      "durationUltraSlow": "500ms",
+      "fontFamilyBase": "'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif",
+      "fontFamilyMonospace": "Consolas, 'Courier New', Courier, monospace",
+      "fontFamilyNumeric": "Bahnschrift, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif",
+      "fontSizeBase100": "10px",
+      "fontSizeBase200": "12px",
+      "fontSizeBase300": "14px",
+      "fontSizeBase400": "16px",
+      "fontSizeBase500": "20px",
+      "fontSizeBase600": "24px",
+      "fontSizeHero1000": "68px",
+      "fontSizeHero700": "28px",
+      "fontSizeHero800": "32px",
+      "fontSizeHero900": "40px",
+      "fontWeightBold": 700,
+      "fontWeightMedium": 500,
+      "fontWeightRegular": 400,
+      "fontWeightSemibold": 600,
+      "lineHeightBase100": "14px",
+      "lineHeightBase200": "16px",
+      "lineHeightBase300": "20px",
+      "lineHeightBase400": "22px",
+      "lineHeightBase500": "28px",
+      "lineHeightBase600": "32px",
+      "lineHeightHero1000": "92px",
+      "lineHeightHero700": "36px",
+      "lineHeightHero800": "40px",
+      "lineHeightHero900": "52px",
+      "shadow16": "0 0 2px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.14)",
+      "shadow16Brand": "0 0 2px rgba(0,0,0,0.30), 0 8px 16px rgba(0,0,0,0.25)",
+      "shadow2": "0 0 2px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.14)",
+      "shadow28": "0 0 8px rgba(0,0,0,0.12), 0 14px 28px rgba(0,0,0,0.14)",
+      "shadow28Brand": "0 0 8px rgba(0,0,0,0.30), 0 14px 28px rgba(0,0,0,0.25)",
+      "shadow2Brand": "0 0 2px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.25)",
+      "shadow4": "0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.14)",
+      "shadow4Brand": "0 0 2px rgba(0,0,0,0.30), 0 2px 4px rgba(0,0,0,0.25)",
+      "shadow64": "0 0 8px rgba(0,0,0,0.12), 0 32px 64px rgba(0,0,0,0.14)",
+      "shadow64Brand": "0 0 8px rgba(0,0,0,0.30), 0 32px 64px rgba(0,0,0,0.25)",
+      "shadow8": "0 0 2px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.14)",
+      "shadow8Brand": "0 0 2px rgba(0,0,0,0.30), 0 4px 8px rgba(0,0,0,0.25)",
+      "spacingHorizontalL": "16px",
+      "spacingHorizontalM": "12px",
+      "spacingHorizontalMNudge": "10px",
+      "spacingHorizontalNone": "0",
+      "spacingHorizontalS": "8px",
+      "spacingHorizontalSNudge": "6px",
+      "spacingHorizontalXL": "20px",
+      "spacingHorizontalXS": "4px",
+      "spacingHorizontalXXL": "24px",
+      "spacingHorizontalXXS": "2px",
+      "spacingHorizontalXXXL": "32px",
+      "spacingVerticalL": "16px",
+      "spacingVerticalM": "12px",
+      "spacingVerticalMNudge": "10px",
+      "spacingVerticalNone": "0",
+      "spacingVerticalS": "8px",
+      "spacingVerticalSNudge": "6px",
+      "spacingVerticalXL": "20px",
+      "spacingVerticalXS": "4px",
+      "spacingVerticalXXL": "24px",
+      "spacingVerticalXXS": "2px",
+      "spacingVerticalXXXL": "32px",
+      "strokeWidthThick": "2px",
+      "strokeWidthThicker": "3px",
+      "strokeWidthThickest": "4px",
+      "strokeWidthThin": "1px",
+    }
+  }
+>
+  <div
+    className="tab-pane active documentsTab"
+    role="tabpanel"
+    style={
+      Object {
+        "display": "flex",
+      }
+    }
+  >
+    <div
+      className="filterdivs"
+    >
+      <div
+        className="filterDocCollapsed"
+      >
+        <span
+          className="selectQuery"
+        >
+          SELECT * FROM c
+        </span>
+        <span
+          className="appliedQuery"
+        />
+        <Button
+          appearance="primary"
+          onClick={[Function]}
+          style={
+            Object {
+              "marginLeft": 8,
+            }
+          }
+        >
+          Edit Filter
+        </Button>
+      </div>
+    </div>
+    <div
+      style={
+        Object {
+          "height": "100%",
+          "overflow": "hidden",
+        }
+      }
+    >
+      <Split
+        mode="horizontal"
+        prefixCls="w-split"
+        visiable={true}
+      >
+        <div
+          style={
+            Object {
+              "minWidth": 120,
+              "overflow": "hidden",
+              "position": "relative",
+              "width": "35%",
+            }
+          }
+        >
+          <Button
+            appearance="transparent"
+            aria-label="Refresh"
+            icon={<ArrowClockwise16Filled />}
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            size="small"
+            style={
+              Object {
+                "backgroundColor": "white",
+                "color": undefined,
+                "float": "right",
+                "position": "absolute",
+                "right": 0,
+                "top": 6,
+                "zIndex": 1,
+              }
+            }
+          />
+          <div
+            style={
+              Object {
+                "height": "100%",
+                "width": "calc(100% - 50px)",
+              }
+            }
+          >
+            <DocumentsTableComponent
+              columnHeaders={
+                Object {
+                  "idHeader": "id",
+                  "partitionKeyHeaders": Array [],
+                }
+              }
+              items={Array []}
+              onItemClicked={[Function]}
+              onSelectedRowsChange={[Function]}
+              selectedRows={
+                Set {
+                  0,
+                }
+              }
+            />
+          </div>
+        </div>
+        <div
+          style={
+            Object {
+              "minWidth": "20%",
+              "width": "100%",
+            }
+          }
+        />
+      </Split>
+    </div>
+  </div>
+</FluentProvider>
+`;
diff --git a/src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTableComponent.test.tsx.snap b/src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTableComponent.test.tsx.snap
new file mode 100644
index 000000000..6e80eac9f
--- /dev/null
+++ b/src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTableComponent.test.tsx.snap
@@ -0,0 +1,1140 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DocumentsTableComponent should render documents and partition keys in header 1`] = `
+<DocumentsTableComponent
+  columnHeaders={
+    Object {
+      "idHeader": "id",
+      "partitionKeyHeaders": Array [
+        "partitionKey",
+      ],
+    }
+  }
+  items={
+    Array [
+      Object {
+        "id": "1",
+        "partitionKey": "pk1",
+      },
+      Object {
+        "id": "2",
+        "partitionKey": "pk2",
+      },
+      Object {
+        "id": "3",
+        "partitionKey": "pk3",
+      },
+    ]
+  }
+  onItemClicked={[Function]}
+  onSelectedRowsChange={[Function]}
+  selectedRows={Set {}}
+  size={
+    Object {
+      "height": 0,
+      "width": 0,
+    }
+  }
+>
+  <Table
+    aria-label="Filtered documents table"
+    className="documentsTable"
+    data-tabster="{\\"mover\\":{\\"cyclic\\":false,\\"direction\\":3}}"
+    noNativeElements={true}
+    role="grid"
+    size="extra-small"
+    style={
+      Object {
+        "minWidth": "fit-content",
+      }
+    }
+  >
+    <div
+      aria-label="Filtered documents table"
+      className="fui-Table documentsTable ___1kbqy50_18rlg51 fgkb47j fhovq9v ftgm304"
+      data-tabster="{\\"mover\\":{\\"cyclic\\":false,\\"direction\\":3}}"
+      role="grid"
+      style={
+        Object {
+          "minWidth": "fit-content",
+        }
+      }
+    >
+      <TableHeader
+        className="documentsTableHeader"
+      >
+        <div
+          className="fui-TableHeader documentsTableHeader ___oeyxrt0_1baslyg ftgm304"
+          role="rowgroup"
+        >
+          <TableRow
+            style={
+              Object {
+                "width": -15,
+              }
+            }
+          >
+            <div
+              className="fui-TableRow ___lntl370_1bdwmey f19n0e5 f1ewtqcl f1jazu75 f1xeqee6 fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb fy9rknc f22iagw f122n59"
+              role="row"
+              style={
+                Object {
+                  "width": -15,
+                }
+              }
+            >
+              <TableSelectionCell
+                checkboxIndicator={
+                  Object {
+                    "aria-label": "Select all rows ",
+                  }
+                }
+                checked={false}
+                onClick={[Function]}
+                onKeyDown={[Function]}
+              >
+                <div
+                  className="fui-TableSelectionCell ___itc2100_zkyq7r0 f17mccla fz5stix f1g0x7ka fhxju0i f1qch9an f1cnd47f fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f22iagw fqerorx f1neuvcm fkjuxzh fvrlu0f f1c71y05 f4d9j23"
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  role="cell"
+                >
+                  <Checkbox
+                    aria-label="Select all rows "
+                    checked={false}
+                    className="fui-TableSelectionCell__checkboxIndicator"
+                  >
+                    <span
+                      className="fui-Checkbox r1qaeuiq fui-TableSelectionCell__checkboxIndicator ___1v6wcsu_941lme0 f3p8bqa fium13f f1r2dosr f1729es6"
+                    >
+                      <input
+                        aria-label="Select all rows "
+                        checked={false}
+                        className="fui-Checkbox__input ruo9svu ___qlal8r0_1xrlghj f1vgc2s3"
+                        id="checkbox-2"
+                        onChange={[Function]}
+                        type="checkbox"
+                      />
+                      <div
+                        aria-hidden={true}
+                        className="fui-Checkbox__indicator rl7ci6d"
+                      />
+                    </span>
+                  </Checkbox>
+                </div>
+              </TableSelectionCell>
+              <Menu
+                key="id"
+                openOnContext={true}
+              >
+                <ContextSelector.Provider
+                  value={
+                    Object {
+                      "checkedValues": Object {},
+                      "hasCheckmarks": false,
+                      "hasIcons": false,
+                      "inline": false,
+                      "isSubmenu": false,
+                      "menuPopoverRef": Object {
+                        "current": null,
+                      },
+                      "mountNode": null,
+                      "onCheckedValueChange": [Function],
+                      "open": false,
+                      "openOnContext": true,
+                      "openOnHover": false,
+                      "persistOnItemClick": false,
+                      "setOpen": [Function],
+                      "triggerId": "menu3",
+                      "triggerRef": Object {
+                        "current": <div
+                          class="fui-TableHeaderCell documentsTableCell ___19selgd_3kxzd70 figsok6 f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fhix6mv fha7anx f1fmzww4 fs9qmxf f187m4uq f145mzao f1uha7eq f10pi13n f22iagw fqerorx f1neuvcm fkjuxzh f10tiqix"
+                          data-tabster="{\\"restorer\\":{\\"type\\":1}}"
+                          id="menu3"
+                          role="columnheader"
+                          style="width: 50px; min-width: 50px; max-width: 50px;"
+                        >
+                          <div
+                            class="fui-TableHeaderCell__button ___hg3sc00_fmp4b50 fq6nmtn f1e4lqlz f1u2r49w f1ym3bx4 f1mo0ibp fjoy568 fytdu2e f1mtd64y f1y7q3j9 f1g0x7ka fhxju0i f1qch9an f1cnd47f f1ern45e f1n71otn f1h8hb77 f1deefiw fgusgyc f10pi13n fly5x3f f22iagw fqerorx f1l02sjl f122n59 f1ufnopg f14sijuj f1nxs5xn f1neuvcm fkjuxzh f1s6fcnf"
+                            role="presentation"
+                          >
+                            id
+                          </div>
+                          <span
+                            class="fui-TableHeaderCell__aside"
+                          >
+                            <div
+                              aria-hidden="true"
+                              aria-label="Resize column"
+                              aria-valuetext="50 pixels"
+                              class="fui-TableResizeHandle ___l1ulde0_1gn6xqj f1euv43f f1e31b4d f15twtuk f1yab3r1 fjw5fx7 f1hu3pq6 fn2i5td f19f4twv f1eybr6b fc3en1c fk73vx1 f13u1uyl fezquic f19g0ac f1tkae59 ftqa4ok f15pjodv ftgrb5f f2df6js fshsryb f11ef69 f12lb1dx fu4ulse fw2wsqs f1swzn7y"
+                              data-tabster="{\\"focusable\\":{\\"ignoreKeydown\\":{\\"ArrowLeft\\":true,\\"ArrowRight\\":true}}}"
+                              role="separator"
+                            />
+                          </span>
+                        </div>,
+                      },
+                    }
+                  }
+                >
+                  <MenuTrigger
+                    key=".0"
+                  >
+                    <TableHeaderCell
+                      aside={
+                        <TableResizeHandle
+                          aria-hidden={true}
+                          aria-label="Resize column"
+                          aria-valuetext="50 pixels"
+                          data-tabster="{\\"focusable\\":{\\"ignoreKeydown\\":{\\"ArrowLeft\\":true,\\"ArrowRight\\":true}}}"
+                          onBlur={[Function]}
+                          onKeyDown={[Function]}
+                          onMouseDown={[Function]}
+                          onTouchStart={[Function]}
+                          role="separator"
+                        />
+                      }
+                      className="documentsTableCell"
+                      data-tabster="{\\"restorer\\":{\\"type\\":1}}"
+                      id="menu3"
+                      key="id"
+                      onContextMenu={[Function]}
+                      onMouseEnter={[Function]}
+                      onMouseLeave={[Function]}
+                      onMouseMove={[Function]}
+                      style={
+                        Object {
+                          "maxWidth": 50,
+                          "minWidth": 50,
+                          "width": 50,
+                        }
+                      }
+                    >
+                      <div
+                        className="fui-TableHeaderCell documentsTableCell ___19selgd_3kxzd70 figsok6 f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fhix6mv fha7anx f1fmzww4 fs9qmxf f187m4uq f145mzao f1uha7eq f10pi13n f22iagw fqerorx f1neuvcm fkjuxzh f10tiqix"
+                        data-tabster="{\\"restorer\\":{\\"type\\":1}}"
+                        id="menu3"
+                        onContextMenu={[Function]}
+                        onMouseEnter={[Function]}
+                        onMouseLeave={[Function]}
+                        onMouseMove={[Function]}
+                        role="columnheader"
+                        style={
+                          Object {
+                            "maxWidth": 50,
+                            "minWidth": 50,
+                            "width": 50,
+                          }
+                        }
+                      >
+                        <div
+                          className="fui-TableHeaderCell__button ___hg3sc00_fmp4b50 fq6nmtn f1e4lqlz f1u2r49w f1ym3bx4 f1mo0ibp fjoy568 fytdu2e f1mtd64y f1y7q3j9 f1g0x7ka fhxju0i f1qch9an f1cnd47f f1ern45e f1n71otn f1h8hb77 f1deefiw fgusgyc f10pi13n fly5x3f f22iagw fqerorx f1l02sjl f122n59 f1ufnopg f14sijuj f1nxs5xn f1neuvcm fkjuxzh f1s6fcnf"
+                          onClick={[Function]}
+                          onKeyDown={[Function]}
+                          onKeyUp={[Function]}
+                          role="presentation"
+                        >
+                          id
+                        </div>
+                        <span
+                          className="fui-TableHeaderCell__aside"
+                        >
+                          <TableResizeHandle
+                            aria-hidden={true}
+                            aria-label="Resize column"
+                            aria-valuetext="50 pixels"
+                            data-tabster="{\\"focusable\\":{\\"ignoreKeydown\\":{\\"ArrowLeft\\":true,\\"ArrowRight\\":true}}}"
+                            onBlur={[Function]}
+                            onKeyDown={[Function]}
+                            onMouseDown={[Function]}
+                            onTouchStart={[Function]}
+                            role="separator"
+                          >
+                            <div
+                              aria-hidden={true}
+                              aria-label="Resize column"
+                              aria-valuetext="50 pixels"
+                              className="fui-TableResizeHandle ___l1ulde0_1gn6xqj f1euv43f f1e31b4d f15twtuk f1yab3r1 fjw5fx7 f1hu3pq6 fn2i5td f19f4twv f1eybr6b fc3en1c fk73vx1 f13u1uyl fezquic f19g0ac f1tkae59 ftqa4ok f15pjodv ftgrb5f f2df6js fshsryb f11ef69 f12lb1dx fu4ulse fw2wsqs f1swzn7y"
+                              data-tabster="{\\"focusable\\":{\\"ignoreKeydown\\":{\\"ArrowLeft\\":true,\\"ArrowRight\\":true}}}"
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onKeyDown={[Function]}
+                              onMouseDown={[Function]}
+                              onTouchStart={[Function]}
+                              role="separator"
+                            />
+                          </TableResizeHandle>
+                        </span>
+                      </div>
+                    </TableHeaderCell>
+                  </MenuTrigger>
+                </ContextSelector.Provider>
+              </Menu>
+              <Menu
+                key="partitionKey"
+                openOnContext={true}
+              >
+                <ContextSelector.Provider
+                  value={
+                    Object {
+                      "checkedValues": Object {},
+                      "hasCheckmarks": false,
+                      "hasIcons": false,
+                      "inline": false,
+                      "isSubmenu": false,
+                      "menuPopoverRef": Object {
+                        "current": null,
+                      },
+                      "mountNode": null,
+                      "onCheckedValueChange": [Function],
+                      "open": false,
+                      "openOnContext": true,
+                      "openOnHover": false,
+                      "persistOnItemClick": false,
+                      "setOpen": [Function],
+                      "triggerId": "menu4",
+                      "triggerRef": Object {
+                        "current": <div
+                          class="fui-TableHeaderCell documentsTableCell ___19selgd_3kxzd70 figsok6 f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fhix6mv fha7anx f1fmzww4 fs9qmxf f187m4uq f145mzao f1uha7eq f10pi13n f22iagw fqerorx f1neuvcm fkjuxzh f10tiqix"
+                          data-tabster="{\\"restorer\\":{\\"type\\":1}}"
+                          id="menu4"
+                          role="columnheader"
+                          style="width: 50px; min-width: 50px; max-width: 50px;"
+                        >
+                          <div
+                            class="fui-TableHeaderCell__button ___hg3sc00_fmp4b50 fq6nmtn f1e4lqlz f1u2r49w f1ym3bx4 f1mo0ibp fjoy568 fytdu2e f1mtd64y f1y7q3j9 f1g0x7ka fhxju0i f1qch9an f1cnd47f f1ern45e f1n71otn f1h8hb77 f1deefiw fgusgyc f10pi13n fly5x3f f22iagw fqerorx f1l02sjl f122n59 f1ufnopg f14sijuj f1nxs5xn f1neuvcm fkjuxzh f1s6fcnf"
+                            role="presentation"
+                          >
+                            <span
+                              title="partitionKey"
+                            >
+                              partitionKey
+                            </span>
+                          </div>
+                        </div>,
+                      },
+                    }
+                  }
+                >
+                  <MenuTrigger
+                    key=".0"
+                  >
+                    <TableHeaderCell
+                      aside={null}
+                      className="documentsTableCell"
+                      data-tabster="{\\"restorer\\":{\\"type\\":1}}"
+                      id="menu4"
+                      key="partitionKey"
+                      onContextMenu={[Function]}
+                      onMouseEnter={[Function]}
+                      onMouseLeave={[Function]}
+                      onMouseMove={[Function]}
+                      style={
+                        Object {
+                          "maxWidth": 50,
+                          "minWidth": 50,
+                          "width": 50,
+                        }
+                      }
+                    >
+                      <div
+                        className="fui-TableHeaderCell documentsTableCell ___19selgd_3kxzd70 figsok6 f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fhix6mv fha7anx f1fmzww4 fs9qmxf f187m4uq f145mzao f1uha7eq f10pi13n f22iagw fqerorx f1neuvcm fkjuxzh f10tiqix"
+                        data-tabster="{\\"restorer\\":{\\"type\\":1}}"
+                        id="menu4"
+                        onContextMenu={[Function]}
+                        onMouseEnter={[Function]}
+                        onMouseLeave={[Function]}
+                        onMouseMove={[Function]}
+                        role="columnheader"
+                        style={
+                          Object {
+                            "maxWidth": 50,
+                            "minWidth": 50,
+                            "width": 50,
+                          }
+                        }
+                      >
+                        <div
+                          className="fui-TableHeaderCell__button ___hg3sc00_fmp4b50 fq6nmtn f1e4lqlz f1u2r49w f1ym3bx4 f1mo0ibp fjoy568 fytdu2e f1mtd64y f1y7q3j9 f1g0x7ka fhxju0i f1qch9an f1cnd47f f1ern45e f1n71otn f1h8hb77 f1deefiw fgusgyc f10pi13n fly5x3f f22iagw fqerorx f1l02sjl f122n59 f1ufnopg f14sijuj f1nxs5xn f1neuvcm fkjuxzh f1s6fcnf"
+                          onClick={[Function]}
+                          onKeyDown={[Function]}
+                          onKeyUp={[Function]}
+                          role="presentation"
+                        >
+                          <span
+                            title="partitionKey"
+                          >
+                            partitionKey
+                          </span>
+                        </div>
+                      </div>
+                    </TableHeaderCell>
+                  </MenuTrigger>
+                </ContextSelector.Provider>
+              </Menu>
+            </div>
+          </TableRow>
+        </div>
+      </TableHeader>
+      <TableBody>
+        <div
+          className="fui-TableBody ___oeyxrt0_1baslyg ftgm304"
+          role="rowgroup"
+        >
+          <List
+            direction="ltr"
+            height={-53}
+            itemCount={3}
+            itemData={
+              Array [
+                Object {
+                  "appearance": "none",
+                  "item": Object {
+                    "id": "1",
+                    "partitionKey": "pk1",
+                  },
+                  "onClick": [Function],
+                  "onKeyDown": [Function],
+                  "rowId": 0,
+                  "selected": false,
+                },
+                Object {
+                  "appearance": "none",
+                  "item": Object {
+                    "id": "2",
+                    "partitionKey": "pk2",
+                  },
+                  "onClick": [Function],
+                  "onKeyDown": [Function],
+                  "rowId": 1,
+                  "selected": false,
+                },
+                Object {
+                  "appearance": "none",
+                  "item": Object {
+                    "id": "3",
+                    "partitionKey": "pk3",
+                  },
+                  "onClick": [Function],
+                  "onKeyDown": [Function],
+                  "rowId": 2,
+                  "selected": false,
+                },
+              ]
+            }
+            itemSize={30}
+            layout="vertical"
+            overscanCount={2}
+            style={
+              Object {
+                "overflowY": "scroll",
+              }
+            }
+            useIsScrolling={false}
+            width={0}
+          >
+            <div
+              onScroll={[Function]}
+              style={
+                Object {
+                  "WebkitOverflowScrolling": "touch",
+                  "direction": "ltr",
+                  "height": -53,
+                  "overflow": "auto",
+                  "overflowY": "scroll",
+                  "position": "relative",
+                  "width": 0,
+                  "willChange": "transform",
+                }
+              }
+            >
+              <div
+                style={
+                  Object {
+                    "height": 90,
+                    "pointerEvents": undefined,
+                    "width": "100%",
+                  }
+                }
+              >
+                <RenderRow
+                  data={
+                    Array [
+                      Object {
+                        "appearance": "none",
+                        "item": Object {
+                          "id": "1",
+                          "partitionKey": "pk1",
+                        },
+                        "onClick": [Function],
+                        "onKeyDown": [Function],
+                        "rowId": 0,
+                        "selected": false,
+                      },
+                      Object {
+                        "appearance": "none",
+                        "item": Object {
+                          "id": "2",
+                          "partitionKey": "pk2",
+                        },
+                        "onClick": [Function],
+                        "onKeyDown": [Function],
+                        "rowId": 1,
+                        "selected": false,
+                      },
+                      Object {
+                        "appearance": "none",
+                        "item": Object {
+                          "id": "3",
+                          "partitionKey": "pk3",
+                        },
+                        "onClick": [Function],
+                        "onKeyDown": [Function],
+                        "rowId": 2,
+                        "selected": false,
+                      },
+                    ]
+                  }
+                  index={0}
+                  key="0"
+                  style={
+                    Object {
+                      "height": 30,
+                      "left": 0,
+                      "position": "absolute",
+                      "right": undefined,
+                      "top": 0,
+                      "width": "100%",
+                    }
+                  }
+                >
+                  <TableRow
+                    appearance="none"
+                    aria-rowindex={2}
+                    aria-selected={false}
+                    key="1"
+                    style={
+                      Object {
+                        "height": 30,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": undefined,
+                        "top": 0,
+                        "width": "100%",
+                      }
+                    }
+                  >
+                    <div
+                      aria-rowindex={2}
+                      aria-selected={false}
+                      className="fui-TableRow ___1iajlcl_snm7au0 f19n0e5 f1ewtqcl f1jazu75 f1xeqee6 fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f1wfn5kd f1g4hkjv f15ngxrw fjbbrdp f1t94bn6 feu1g3u f1uorfem fw60kww fy9rknc f22iagw f122n59"
+                      role="row"
+                      style={
+                        Object {
+                          "height": 30,
+                          "left": 0,
+                          "position": "absolute",
+                          "right": undefined,
+                          "top": 0,
+                          "width": "100%",
+                        }
+                      }
+                    >
+                      <TableSelectionCell
+                        checkboxIndicator={
+                          Object {
+                            "aria-label": "Select row",
+                          }
+                        }
+                        checked={false}
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                      >
+                        <div
+                          className="fui-TableSelectionCell ___itc2100_zkyq7r0 f17mccla fz5stix f1g0x7ka fhxju0i f1qch9an f1cnd47f fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f22iagw fqerorx f1neuvcm fkjuxzh fvrlu0f f1c71y05 f4d9j23"
+                          onClick={[Function]}
+                          onKeyDown={[Function]}
+                          role="cell"
+                        >
+                          <Checkbox
+                            aria-label="Select row"
+                            checked={false}
+                            className="fui-TableSelectionCell__checkboxIndicator"
+                          >
+                            <span
+                              className="fui-Checkbox r1qaeuiq fui-TableSelectionCell__checkboxIndicator ___1v6wcsu_941lme0 f3p8bqa fium13f f1r2dosr f1729es6"
+                            >
+                              <input
+                                aria-label="Select row"
+                                checked={false}
+                                className="fui-Checkbox__input ruo9svu ___qlal8r0_1xrlghj f1vgc2s3"
+                                id="checkbox-12"
+                                onChange={[Function]}
+                                type="checkbox"
+                              />
+                              <div
+                                aria-hidden={true}
+                                className="fui-Checkbox__indicator rl7ci6d"
+                              />
+                            </span>
+                          </Checkbox>
+                        </div>
+                      </TableSelectionCell>
+                      <TableCell
+                        className="documentsTableCell"
+                        key="id"
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                        style={
+                          Object {
+                            "maxWidth": 50,
+                            "minWidth": 50,
+                            "width": 50,
+                          }
+                        }
+                        tabIndex={0}
+                      >
+                        <div
+                          className="fui-TableCell documentsTableCell ___o2cmzw0_1ilyrce f10pi13n f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f22iagw f10tiqix f122n59 fqerorx f1neuvcm fkjuxzh f1pha7fy"
+                          onClick={[Function]}
+                          onKeyDown={[Function]}
+                          role="cell"
+                          style={
+                            Object {
+                              "maxWidth": 50,
+                              "minWidth": 50,
+                              "width": 50,
+                            }
+                          }
+                          tabIndex={0}
+                        >
+                          <TableCellLayout
+                            title="1"
+                            truncate={true}
+                          >
+                            <div
+                              className="fui-TableCellLayout ___16owy0g_d3kle00 f22iagw f122n59 fsnqrgy fylz90v fqerorx f1neuvcm fkjuxzh f1p9o1ba"
+                              title="1"
+                            >
+                              <div
+                                className="fui-TableCellLayout__content ___1vq3ijp_1wyv0tp f22iagw f1vx9l62 f1p9o1ba"
+                              >
+                                <span
+                                  className="fui-TableCellLayout__main ___1q6a9l3_1koyf1t f1p9o1ba fz5stix f1cmbuwj"
+                                >
+                                  1
+                                </span>
+                              </div>
+                            </div>
+                          </TableCellLayout>
+                        </div>
+                      </TableCell>
+                      <TableCell
+                        className="documentsTableCell"
+                        key="partitionKey"
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                        style={
+                          Object {
+                            "maxWidth": 50,
+                            "minWidth": 50,
+                            "width": 50,
+                          }
+                        }
+                        tabIndex={-1}
+                      >
+                        <div
+                          className="fui-TableCell documentsTableCell ___o2cmzw0_1ilyrce f10pi13n f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f22iagw f10tiqix f122n59 fqerorx f1neuvcm fkjuxzh f1pha7fy"
+                          onClick={[Function]}
+                          onKeyDown={[Function]}
+                          role="cell"
+                          style={
+                            Object {
+                              "maxWidth": 50,
+                              "minWidth": 50,
+                              "width": 50,
+                            }
+                          }
+                          tabIndex={-1}
+                        >
+                          <TableCellLayout
+                            title="pk1"
+                            truncate={true}
+                          >
+                            <div
+                              className="fui-TableCellLayout ___16owy0g_d3kle00 f22iagw f122n59 fsnqrgy fylz90v fqerorx f1neuvcm fkjuxzh f1p9o1ba"
+                              title="pk1"
+                            >
+                              <div
+                                className="fui-TableCellLayout__content ___1vq3ijp_1wyv0tp f22iagw f1vx9l62 f1p9o1ba"
+                              >
+                                <span
+                                  className="fui-TableCellLayout__main ___1q6a9l3_1koyf1t f1p9o1ba fz5stix f1cmbuwj"
+                                >
+                                  pk1
+                                </span>
+                              </div>
+                            </div>
+                          </TableCellLayout>
+                        </div>
+                      </TableCell>
+                    </div>
+                  </TableRow>
+                </RenderRow>
+                <RenderRow
+                  data={
+                    Array [
+                      Object {
+                        "appearance": "none",
+                        "item": Object {
+                          "id": "1",
+                          "partitionKey": "pk1",
+                        },
+                        "onClick": [Function],
+                        "onKeyDown": [Function],
+                        "rowId": 0,
+                        "selected": false,
+                      },
+                      Object {
+                        "appearance": "none",
+                        "item": Object {
+                          "id": "2",
+                          "partitionKey": "pk2",
+                        },
+                        "onClick": [Function],
+                        "onKeyDown": [Function],
+                        "rowId": 1,
+                        "selected": false,
+                      },
+                      Object {
+                        "appearance": "none",
+                        "item": Object {
+                          "id": "3",
+                          "partitionKey": "pk3",
+                        },
+                        "onClick": [Function],
+                        "onKeyDown": [Function],
+                        "rowId": 2,
+                        "selected": false,
+                      },
+                    ]
+                  }
+                  index={1}
+                  key="1"
+                  style={
+                    Object {
+                      "height": 30,
+                      "left": 0,
+                      "position": "absolute",
+                      "right": undefined,
+                      "top": 30,
+                      "width": "100%",
+                    }
+                  }
+                >
+                  <TableRow
+                    appearance="none"
+                    aria-rowindex={3}
+                    aria-selected={false}
+                    key="2"
+                    style={
+                      Object {
+                        "height": 30,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": undefined,
+                        "top": 30,
+                        "width": "100%",
+                      }
+                    }
+                  >
+                    <div
+                      aria-rowindex={3}
+                      aria-selected={false}
+                      className="fui-TableRow ___1iajlcl_snm7au0 f19n0e5 f1ewtqcl f1jazu75 f1xeqee6 fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f1wfn5kd f1g4hkjv f15ngxrw fjbbrdp f1t94bn6 feu1g3u f1uorfem fw60kww fy9rknc f22iagw f122n59"
+                      role="row"
+                      style={
+                        Object {
+                          "height": 30,
+                          "left": 0,
+                          "position": "absolute",
+                          "right": undefined,
+                          "top": 30,
+                          "width": "100%",
+                        }
+                      }
+                    >
+                      <TableSelectionCell
+                        checkboxIndicator={
+                          Object {
+                            "aria-label": "Select row",
+                          }
+                        }
+                        checked={false}
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                      >
+                        <div
+                          className="fui-TableSelectionCell ___itc2100_zkyq7r0 f17mccla fz5stix f1g0x7ka fhxju0i f1qch9an f1cnd47f fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f22iagw fqerorx f1neuvcm fkjuxzh fvrlu0f f1c71y05 f4d9j23"
+                          onClick={[Function]}
+                          onKeyDown={[Function]}
+                          role="cell"
+                        >
+                          <Checkbox
+                            aria-label="Select row"
+                            checked={false}
+                            className="fui-TableSelectionCell__checkboxIndicator"
+                          >
+                            <span
+                              className="fui-Checkbox r1qaeuiq fui-TableSelectionCell__checkboxIndicator ___1v6wcsu_941lme0 f3p8bqa fium13f f1r2dosr f1729es6"
+                            >
+                              <input
+                                aria-label="Select row"
+                                checked={false}
+                                className="fui-Checkbox__input ruo9svu ___qlal8r0_1xrlghj f1vgc2s3"
+                                id="checkbox-14"
+                                onChange={[Function]}
+                                type="checkbox"
+                              />
+                              <div
+                                aria-hidden={true}
+                                className="fui-Checkbox__indicator rl7ci6d"
+                              />
+                            </span>
+                          </Checkbox>
+                        </div>
+                      </TableSelectionCell>
+                      <TableCell
+                        className="documentsTableCell"
+                        key="id"
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                        style={
+                          Object {
+                            "maxWidth": 50,
+                            "minWidth": 50,
+                            "width": 50,
+                          }
+                        }
+                        tabIndex={0}
+                      >
+                        <div
+                          className="fui-TableCell documentsTableCell ___o2cmzw0_1ilyrce f10pi13n f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f22iagw f10tiqix f122n59 fqerorx f1neuvcm fkjuxzh f1pha7fy"
+                          onClick={[Function]}
+                          onKeyDown={[Function]}
+                          role="cell"
+                          style={
+                            Object {
+                              "maxWidth": 50,
+                              "minWidth": 50,
+                              "width": 50,
+                            }
+                          }
+                          tabIndex={0}
+                        >
+                          <TableCellLayout
+                            title="2"
+                            truncate={true}
+                          >
+                            <div
+                              className="fui-TableCellLayout ___16owy0g_d3kle00 f22iagw f122n59 fsnqrgy fylz90v fqerorx f1neuvcm fkjuxzh f1p9o1ba"
+                              title="2"
+                            >
+                              <div
+                                className="fui-TableCellLayout__content ___1vq3ijp_1wyv0tp f22iagw f1vx9l62 f1p9o1ba"
+                              >
+                                <span
+                                  className="fui-TableCellLayout__main ___1q6a9l3_1koyf1t f1p9o1ba fz5stix f1cmbuwj"
+                                >
+                                  2
+                                </span>
+                              </div>
+                            </div>
+                          </TableCellLayout>
+                        </div>
+                      </TableCell>
+                      <TableCell
+                        className="documentsTableCell"
+                        key="partitionKey"
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                        style={
+                          Object {
+                            "maxWidth": 50,
+                            "minWidth": 50,
+                            "width": 50,
+                          }
+                        }
+                        tabIndex={-1}
+                      >
+                        <div
+                          className="fui-TableCell documentsTableCell ___o2cmzw0_1ilyrce f10pi13n f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f22iagw f10tiqix f122n59 fqerorx f1neuvcm fkjuxzh f1pha7fy"
+                          onClick={[Function]}
+                          onKeyDown={[Function]}
+                          role="cell"
+                          style={
+                            Object {
+                              "maxWidth": 50,
+                              "minWidth": 50,
+                              "width": 50,
+                            }
+                          }
+                          tabIndex={-1}
+                        >
+                          <TableCellLayout
+                            title="pk2"
+                            truncate={true}
+                          >
+                            <div
+                              className="fui-TableCellLayout ___16owy0g_d3kle00 f22iagw f122n59 fsnqrgy fylz90v fqerorx f1neuvcm fkjuxzh f1p9o1ba"
+                              title="pk2"
+                            >
+                              <div
+                                className="fui-TableCellLayout__content ___1vq3ijp_1wyv0tp f22iagw f1vx9l62 f1p9o1ba"
+                              >
+                                <span
+                                  className="fui-TableCellLayout__main ___1q6a9l3_1koyf1t f1p9o1ba fz5stix f1cmbuwj"
+                                >
+                                  pk2
+                                </span>
+                              </div>
+                            </div>
+                          </TableCellLayout>
+                        </div>
+                      </TableCell>
+                    </div>
+                  </TableRow>
+                </RenderRow>
+                <RenderRow
+                  data={
+                    Array [
+                      Object {
+                        "appearance": "none",
+                        "item": Object {
+                          "id": "1",
+                          "partitionKey": "pk1",
+                        },
+                        "onClick": [Function],
+                        "onKeyDown": [Function],
+                        "rowId": 0,
+                        "selected": false,
+                      },
+                      Object {
+                        "appearance": "none",
+                        "item": Object {
+                          "id": "2",
+                          "partitionKey": "pk2",
+                        },
+                        "onClick": [Function],
+                        "onKeyDown": [Function],
+                        "rowId": 1,
+                        "selected": false,
+                      },
+                      Object {
+                        "appearance": "none",
+                        "item": Object {
+                          "id": "3",
+                          "partitionKey": "pk3",
+                        },
+                        "onClick": [Function],
+                        "onKeyDown": [Function],
+                        "rowId": 2,
+                        "selected": false,
+                      },
+                    ]
+                  }
+                  index={2}
+                  key="2"
+                  style={
+                    Object {
+                      "height": 30,
+                      "left": 0,
+                      "position": "absolute",
+                      "right": undefined,
+                      "top": 60,
+                      "width": "100%",
+                    }
+                  }
+                >
+                  <TableRow
+                    appearance="none"
+                    aria-rowindex={4}
+                    aria-selected={false}
+                    key="3"
+                    style={
+                      Object {
+                        "height": 30,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": undefined,
+                        "top": 60,
+                        "width": "100%",
+                      }
+                    }
+                  >
+                    <div
+                      aria-rowindex={4}
+                      aria-selected={false}
+                      className="fui-TableRow ___1iajlcl_snm7au0 f19n0e5 f1ewtqcl f1jazu75 f1xeqee6 fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f1wfn5kd f1g4hkjv f15ngxrw fjbbrdp f1t94bn6 feu1g3u f1uorfem fw60kww fy9rknc f22iagw f122n59"
+                      role="row"
+                      style={
+                        Object {
+                          "height": 30,
+                          "left": 0,
+                          "position": "absolute",
+                          "right": undefined,
+                          "top": 60,
+                          "width": "100%",
+                        }
+                      }
+                    >
+                      <TableSelectionCell
+                        checkboxIndicator={
+                          Object {
+                            "aria-label": "Select row",
+                          }
+                        }
+                        checked={false}
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                      >
+                        <div
+                          className="fui-TableSelectionCell ___itc2100_zkyq7r0 f17mccla fz5stix f1g0x7ka fhxju0i f1qch9an f1cnd47f fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f22iagw fqerorx f1neuvcm fkjuxzh fvrlu0f f1c71y05 f4d9j23"
+                          onClick={[Function]}
+                          onKeyDown={[Function]}
+                          role="cell"
+                        >
+                          <Checkbox
+                            aria-label="Select row"
+                            checked={false}
+                            className="fui-TableSelectionCell__checkboxIndicator"
+                          >
+                            <span
+                              className="fui-Checkbox r1qaeuiq fui-TableSelectionCell__checkboxIndicator ___1v6wcsu_941lme0 f3p8bqa fium13f f1r2dosr f1729es6"
+                            >
+                              <input
+                                aria-label="Select row"
+                                checked={false}
+                                className="fui-Checkbox__input ruo9svu ___qlal8r0_1xrlghj f1vgc2s3"
+                                id="checkbox-16"
+                                onChange={[Function]}
+                                type="checkbox"
+                              />
+                              <div
+                                aria-hidden={true}
+                                className="fui-Checkbox__indicator rl7ci6d"
+                              />
+                            </span>
+                          </Checkbox>
+                        </div>
+                      </TableSelectionCell>
+                      <TableCell
+                        className="documentsTableCell"
+                        key="id"
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                        style={
+                          Object {
+                            "maxWidth": 50,
+                            "minWidth": 50,
+                            "width": 50,
+                          }
+                        }
+                        tabIndex={0}
+                      >
+                        <div
+                          className="fui-TableCell documentsTableCell ___o2cmzw0_1ilyrce f10pi13n f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f22iagw f10tiqix f122n59 fqerorx f1neuvcm fkjuxzh f1pha7fy"
+                          onClick={[Function]}
+                          onKeyDown={[Function]}
+                          role="cell"
+                          style={
+                            Object {
+                              "maxWidth": 50,
+                              "minWidth": 50,
+                              "width": 50,
+                            }
+                          }
+                          tabIndex={0}
+                        >
+                          <TableCellLayout
+                            title="3"
+                            truncate={true}
+                          >
+                            <div
+                              className="fui-TableCellLayout ___16owy0g_d3kle00 f22iagw f122n59 fsnqrgy fylz90v fqerorx f1neuvcm fkjuxzh f1p9o1ba"
+                              title="3"
+                            >
+                              <div
+                                className="fui-TableCellLayout__content ___1vq3ijp_1wyv0tp f22iagw f1vx9l62 f1p9o1ba"
+                              >
+                                <span
+                                  className="fui-TableCellLayout__main ___1q6a9l3_1koyf1t f1p9o1ba fz5stix f1cmbuwj"
+                                >
+                                  3
+                                </span>
+                              </div>
+                            </div>
+                          </TableCellLayout>
+                        </div>
+                      </TableCell>
+                      <TableCell
+                        className="documentsTableCell"
+                        key="partitionKey"
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                        style={
+                          Object {
+                            "maxWidth": 50,
+                            "minWidth": 50,
+                            "width": 50,
+                          }
+                        }
+                        tabIndex={-1}
+                      >
+                        <div
+                          className="fui-TableCell documentsTableCell ___o2cmzw0_1ilyrce f10pi13n f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f22iagw f10tiqix f122n59 fqerorx f1neuvcm fkjuxzh f1pha7fy"
+                          onClick={[Function]}
+                          onKeyDown={[Function]}
+                          role="cell"
+                          style={
+                            Object {
+                              "maxWidth": 50,
+                              "minWidth": 50,
+                              "width": 50,
+                            }
+                          }
+                          tabIndex={-1}
+                        >
+                          <TableCellLayout
+                            title="pk3"
+                            truncate={true}
+                          >
+                            <div
+                              className="fui-TableCellLayout ___16owy0g_d3kle00 f22iagw f122n59 fsnqrgy fylz90v fqerorx f1neuvcm fkjuxzh f1p9o1ba"
+                              title="pk3"
+                            >
+                              <div
+                                className="fui-TableCellLayout__content ___1vq3ijp_1wyv0tp f22iagw f1vx9l62 f1p9o1ba"
+                              >
+                                <span
+                                  className="fui-TableCellLayout__main ___1q6a9l3_1koyf1t f1p9o1ba fz5stix f1cmbuwj"
+                                >
+                                  pk3
+                                </span>
+                              </div>
+                            </div>
+                          </TableCellLayout>
+                        </div>
+                      </TableCell>
+                    </div>
+                  </TableRow>
+                </RenderRow>
+              </div>
+            </div>
+          </List>
+        </div>
+      </TableBody>
+    </div>
+  </Table>
+</DocumentsTableComponent>
+`;
diff --git a/src/Explorer/Tabs/MongoDocumentsTab.ts b/src/Explorer/Tabs/MongoDocumentsTab.ts
deleted file mode 100644
index d3bf31a54..000000000
--- a/src/Explorer/Tabs/MongoDocumentsTab.ts
+++ /dev/null
@@ -1,320 +0,0 @@
-import { PartitionKey, PartitionKeyDefinition } from "@azure/cosmos";
-import { extractPartitionKeyValues } from "Utils/QueryUtils";
-import * as ko from "knockout";
-import Q from "q";
-import * as Constants from "../../Common/Constants";
-import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-import * as Logger from "../../Common/Logger";
-import {
-  createDocument,
-  deleteDocument,
-  queryDocuments,
-  readDocument,
-  updateDocument,
-} from "../../Common/MongoProxyClient";
-import MongoUtility from "../../Common/MongoUtility";
-import * as DataModels from "../../Contracts/DataModels";
-import * as ViewModels from "../../Contracts/ViewModels";
-import { Action } from "../../Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import { useDialog } from "../Controls/Dialog";
-import DocumentId from "../Tree/DocumentId";
-import ObjectId from "../Tree/ObjectId";
-import DocumentsTab from "./DocumentsTab";
-
-export default class MongoDocumentsTab extends DocumentsTab {
-  public collection: ViewModels.Collection;
-  private continuationToken: string;
-
-  constructor(options: ViewModels.DocumentsTabOptions) {
-    super(options);
-    this.lastFilterContents = ko.observableArray<string>(['{"id":"foo"}', "{ qty: { $gte: 20 } }"]);
-
-    this.partitionKeyProperties = this.partitionKeyProperties?.map((partitionKeyProperty, i) => {
-      if (partitionKeyProperty && ~partitionKeyProperty.indexOf(`"`)) {
-        partitionKeyProperty = partitionKeyProperty.replace(/["]+/g, "");
-      }
-
-      if (partitionKeyProperty && partitionKeyProperty.indexOf("$v") > -1) {
-        // From $v.shard.$v.key.$v > shard.key
-        partitionKeyProperty = partitionKeyProperty.replace(/.\$v/g, "").replace(/\$v./g, "");
-        this.partitionKeyPropertyHeaders[i] = "/" + partitionKeyProperty;
-      }
-
-      return partitionKeyProperty;
-    });
-
-    this.isFilterExpanded = ko.observable<boolean>(true);
-    super.buildCommandBarOptions.bind(this);
-    super.buildCommandBarOptions();
-  }
-
-  public onSaveNewDocumentClick = (): Promise<any> => {
-    const documentContent = JSON.parse(this.selectedDocumentContent());
-    this.displayedError("");
-    const startKey: number = TelemetryProcessor.traceStart(Action.CreateDocument, {
-      dataExplorerArea: Constants.Areas.Tab,
-      tabTitle: this.tabTitle(),
-    });
-
-    const partitionKeyProperty = this.partitionKeyProperties?.[0];
-    if (partitionKeyProperty !== "_id" && !this._hasShardKeySpecified(documentContent)) {
-      const message = `The document is lacking the shard property: ${partitionKeyProperty}`;
-      this.displayedError(message);
-      let that = this;
-      setTimeout(() => {
-        that.displayedError("");
-      }, Constants.ClientDefaults.errorNotificationTimeoutMs);
-      this.isExecutionError(true);
-      TelemetryProcessor.traceFailure(
-        Action.CreateDocument,
-        {
-          dataExplorerArea: Constants.Areas.Tab,
-          tabTitle: this.tabTitle(),
-          error: message,
-        },
-        startKey,
-      );
-      Logger.logError("Failed to save new document: Document shard key not defined", "MongoDocumentsTab");
-      throw new Error("Document without shard key");
-    }
-
-    this.isExecutionError(false);
-    this.isExecuting(true);
-    return createDocument(
-      this.collection.databaseId,
-      this.collection,
-      this.partitionKeyProperties?.[0],
-      documentContent,
-    )
-      .then(
-        (savedDocument: any) => {
-          const partitionKeyArray: PartitionKey[] = extractPartitionKeyValues(
-            savedDocument,
-            this._getPartitionKeyDefinition() as PartitionKeyDefinition,
-          );
-
-          let id = new ObjectId(this, savedDocument, partitionKeyArray);
-          let ids = this.documentIds();
-          ids.push(id);
-          delete savedDocument._self;
-
-          let value: string = this.renderObjectForEditor(savedDocument || {}, null, 4);
-          this.selectedDocumentContent.setBaseline(value);
-
-          this.selectedDocumentId(id);
-          this.documentIds(ids);
-          this.editorState(ViewModels.DocumentExplorerState.exisitingDocumentNoEdits);
-          TelemetryProcessor.traceSuccess(
-            Action.CreateDocument,
-            {
-              dataExplorerArea: Constants.Areas.Tab,
-              tabTitle: this.tabTitle(),
-            },
-            startKey,
-          );
-        },
-        (error) => {
-          this.isExecutionError(true);
-          const errorMessage = getErrorMessage(error);
-          useDialog.getState().showOkModalDialog("Create document failed", errorMessage);
-          TelemetryProcessor.traceFailure(
-            Action.CreateDocument,
-            {
-              dataExplorerArea: Constants.Areas.Tab,
-              tabTitle: this.tabTitle(),
-              error: errorMessage,
-              errorStack: getErrorStack(error),
-            },
-            startKey,
-          );
-        },
-      )
-      .finally(() => this.isExecuting(false));
-  };
-
-  public onSaveExistingDocumentClick = (): Promise<any> => {
-    const selectedDocumentId = this.selectedDocumentId();
-    const documentContent = this.selectedDocumentContent();
-    this.isExecutionError(false);
-    this.isExecuting(true);
-    const startKey: number = TelemetryProcessor.traceStart(Action.UpdateDocument, {
-      dataExplorerArea: Constants.Areas.Tab,
-      tabTitle: this.tabTitle(),
-    });
-
-    return updateDocument(this.collection.databaseId, this.collection, selectedDocumentId, documentContent)
-      .then(
-        (updatedDocument: any) => {
-          let value: string = this.renderObjectForEditor(updatedDocument || {}, null, 4);
-          this.selectedDocumentContent.setBaseline(value);
-
-          this.documentIds().forEach((documentId: DocumentId) => {
-            if (documentId.rid === updatedDocument._rid) {
-              const partitionKeyArray: PartitionKey[] = extractPartitionKeyValues(
-                updatedDocument,
-                this._getPartitionKeyDefinition() as PartitionKeyDefinition,
-              );
-
-              const id = new ObjectId(this, updatedDocument, partitionKeyArray);
-              documentId.id(id.id());
-            }
-          });
-          this.editorState(ViewModels.DocumentExplorerState.exisitingDocumentNoEdits);
-          TelemetryProcessor.traceSuccess(
-            Action.UpdateDocument,
-            {
-              dataExplorerArea: Constants.Areas.Tab,
-              tabTitle: this.tabTitle(),
-            },
-            startKey,
-          );
-        },
-        (error) => {
-          this.isExecutionError(true);
-          const errorMessage = getErrorMessage(error);
-          useDialog.getState().showOkModalDialog("Update document failed", errorMessage);
-          TelemetryProcessor.traceFailure(
-            Action.UpdateDocument,
-            {
-              dataExplorerArea: Constants.Areas.Tab,
-              tabTitle: this.tabTitle(),
-              error: errorMessage,
-              errorStack: getErrorStack(error),
-            },
-            startKey,
-          );
-        },
-      )
-      .finally(() => this.isExecuting(false));
-  };
-
-  public buildQuery(filter: string): string {
-    return filter || "{}";
-  }
-
-  public async selectDocument(documentId: DocumentId): Promise<void> {
-    this.selectedDocumentId(documentId);
-    const content = await readDocument(this.collection.databaseId, this.collection, documentId);
-    this.initDocumentEditor(documentId, content);
-  }
-
-  public loadNextPage(): Q.Promise<any> {
-    this.isExecuting(true);
-    this.isExecutionError(false);
-    const filter: string = this.filterContent().trim();
-    const query: string = this.buildQuery(filter);
-
-    return Q(queryDocuments(this.collection.databaseId, this.collection, true, query, this.continuationToken))
-      .then(
-        ({ continuationToken, documents }) => {
-          this.continuationToken = continuationToken;
-          let currentDocuments = this.documentIds();
-          const currentDocumentsRids = currentDocuments.map((currentDocument) => currentDocument.rid);
-          const nextDocumentIds = documents
-            .filter((d: any) => {
-              return currentDocumentsRids.indexOf(d._rid) < 0;
-            })
-            .map((rawDocument: any) => {
-              const partitionKeyValue = rawDocument._partitionKeyValue;
-              return new DocumentId(this, rawDocument, [partitionKeyValue]);
-            });
-
-          const merged = currentDocuments.concat(nextDocumentIds);
-
-          this.documentIds(merged);
-          currentDocuments = this.documentIds();
-          if (this.filterContent().length > 0 && currentDocuments.length > 0) {
-            currentDocuments[0].click();
-          } else {
-            this.selectedDocumentContent("");
-            this.selectedDocumentId(null);
-            this.editorState(ViewModels.DocumentExplorerState.noDocumentSelected);
-          }
-          if (this.onLoadStartKey != null && this.onLoadStartKey != undefined) {
-            TelemetryProcessor.traceSuccess(
-              Action.Tab,
-              {
-                databaseName: this.collection.databaseId,
-                collectionName: this.collection.id(),
-
-                dataExplorerArea: Constants.Areas.Tab,
-                tabTitle: this.tabTitle(),
-              },
-              this.onLoadStartKey,
-            );
-            this.onLoadStartKey = null;
-          }
-        },
-        (error: any) => {
-          if (this.onLoadStartKey != null && this.onLoadStartKey != undefined) {
-            TelemetryProcessor.traceFailure(
-              Action.Tab,
-              {
-                databaseName: this.collection.databaseId,
-                collectionName: this.collection.id(),
-
-                dataExplorerArea: Constants.Areas.Tab,
-                tabTitle: this.tabTitle(),
-                error: getErrorMessage(error),
-                errorStack: getErrorStack(error),
-              },
-              this.onLoadStartKey,
-            );
-            this.onLoadStartKey = null;
-          }
-        },
-      )
-      .finally(() => this.isExecuting(false));
-  }
-
-  protected _onEditorContentChange(newContent: string) {
-    try {
-      if (
-        this.editorState() === ViewModels.DocumentExplorerState.newDocumentValid ||
-        this.editorState() === ViewModels.DocumentExplorerState.newDocumentInvalid
-      ) {
-        let parsed: any = JSON.parse(newContent);
-      }
-
-      // Mongo uses BSON format for _id, trying to parse it as JSON blocks normal flow in an edit
-      this.onValidDocumentEdit();
-    } catch (e) {
-      this.onInvalidDocumentEdit();
-    }
-  }
-
-  /** Renders a Javascript object to be displayed inside Monaco Editor */
-  public renderObjectForEditor(value: any, replacer: any, space: string | number): string {
-    return MongoUtility.tojson(value, null, false);
-  }
-
-  private _hasShardKeySpecified(document: any): boolean {
-    return Boolean(extractPartitionKeyValues(document, this._getPartitionKeyDefinition() as PartitionKeyDefinition));
-  }
-
-  private _getPartitionKeyDefinition(): DataModels.PartitionKey {
-    let partitionKey: DataModels.PartitionKey = this.partitionKey;
-
-    if (
-      this.partitionKey &&
-      this.partitionKey.paths &&
-      this.partitionKey.paths.length &&
-      this.partitionKey.paths.length > 0 &&
-      this.partitionKey.paths[0].indexOf("$v") > -1
-    ) {
-      // Convert BsonSchema2 to /path format
-      partitionKey = {
-        kind: partitionKey.kind,
-        paths: ["/" + this.partitionKeyProperties?.[0].replace(/\./g, "/")],
-        version: partitionKey.version,
-      };
-    }
-
-    return partitionKey;
-  }
-
-  protected __deleteDocument(documentId: DocumentId): Promise<void> {
-    return deleteDocument(this.collection.databaseId, this.collection, documentId);
-  }
-}
diff --git a/src/Explorer/Tabs/useTabs.test.ts b/src/Explorer/Tabs/useTabs.test.ts
index 90a13f827..9d4925a2c 100644
--- a/src/Explorer/Tabs/useTabs.test.ts
+++ b/src/Explorer/Tabs/useTabs.test.ts
@@ -1,17 +1,17 @@
+import { DocumentsTabV2 } from "Explorer/Tabs/DocumentsTabV2/DocumentsTabV2";
 import * as ko from "knockout";
 import * as ViewModels from "../../Contracts/ViewModels";
-import { useTabs } from "../../hooks/useTabs";
 import { updateUserContext } from "../../UserContext";
+import { useTabs } from "../../hooks/useTabs";
 import { container } from "../Controls/Settings/TestUtils";
 import DocumentId from "../Tree/DocumentId";
-import DocumentsTab from "./DocumentsTab";
 import { NewQueryTab } from "./QueryTab/QueryTab";
 
 describe("useTabs tests", () => {
   let database: ViewModels.Database;
   let collection: ViewModels.Collection;
   let queryTab: NewQueryTab;
-  let documentsTab: DocumentsTab;
+  let documentsTab: DocumentsTabV2;
 
   beforeEach(() => {
     updateUserContext({
@@ -56,7 +56,7 @@ describe("useTabs tests", () => {
       },
     );
 
-    documentsTab = new DocumentsTab({
+    documentsTab = new DocumentsTabV2({
       partitionKey: undefined,
       documentIds: ko.observableArray<DocumentId>(),
       tabKind: ViewModels.CollectionTabKind.Documents,
diff --git a/src/Explorer/Theme/ThemeUtil.ts b/src/Explorer/Theme/ThemeUtil.ts
new file mode 100644
index 000000000..fe4075c69
--- /dev/null
+++ b/src/Explorer/Theme/ThemeUtil.ts
@@ -0,0 +1,31 @@
+import { BrandVariants, Theme, createLightTheme } from "@fluentui/react-components";
+import { Platform } from "ConfigContext";
+import { appThemeFabricTealBrandRamp } from "../../Platform/Fabric/FabricTheme";
+
+// These are the theme colors for Fluent UI 9 React components
+const appThemePortalBrandRamp: BrandVariants = {
+  10: "#020305",
+  20: "#111723",
+  30: "#16263D",
+  40: "#193253",
+  50: "#1B3F6A",
+  60: "#1B4C82",
+  70: "#18599B",
+  80: "#1267B4",
+  90: "#3174C2",
+  100: "#4F82C8",
+  110: "#6790CF",
+  120: "#7D9ED5",
+  130: "#92ACDC",
+  140: "#A6BAE2",
+  150: "#BAC9E9",
+  160: "#CDD8EF",
+};
+
+export function getPlatformTheme(platform: Platform): Theme {
+  if (platform === Platform.Fabric) {
+    return createLightTheme(appThemeFabricTealBrandRamp);
+  } else {
+    return createLightTheme(appThemePortalBrandRamp);
+  }
+}
diff --git a/src/Explorer/Tree/Collection.ts b/src/Explorer/Tree/Collection.ts
index d7c673620..fffacb134 100644
--- a/src/Explorer/Tree/Collection.ts
+++ b/src/Explorer/Tree/Collection.ts
@@ -1,5 +1,6 @@
 import { Resource, StoredProcedureDefinition, TriggerDefinition, UserDefinedFunctionDefinition } from "@azure/cosmos";
 import { useNotebook } from "Explorer/Notebook/useNotebook";
+import { DocumentsTabV2 } from "Explorer/Tabs/DocumentsTabV2/DocumentsTabV2";
 import * as ko from "knockout";
 import * as _ from "underscore";
 import * as Constants from "../../Common/Constants";
@@ -27,9 +28,7 @@ import Explorer from "../Explorer";
 import { useCommandBar } from "../Menus/CommandBar/CommandBarComponentAdapter";
 import { CassandraAPIDataClient, CassandraTableKey, CassandraTableKeys } from "../Tables/TableDataClient";
 import ConflictsTab from "../Tabs/ConflictsTab";
-import DocumentsTab from "../Tabs/DocumentsTab";
 import GraphTab from "../Tabs/GraphTab";
-import MongoDocumentsTab from "../Tabs/MongoDocumentsTab";
 import { NewMongoQueryTab } from "../Tabs/MongoQueryTab/MongoQueryTab";
 import { NewMongoShellTab } from "../Tabs/MongoShellTab/MongoShellTab";
 import { NewQueryTab } from "../Tabs/QueryTab/QueryTab";
@@ -292,13 +291,13 @@ export default class Collection implements ViewModels.Collection {
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
 
-    const documentsTabs: DocumentsTab[] = useTabs
+    const documentsTabs: DocumentsTabV2[] = useTabs
       .getState()
       .getTabs(
         ViewModels.CollectionTabKind.Documents,
         (tab) => tab.collection && tab.collection.databaseId === this.databaseId && tab.collection.id() === this.id(),
-      ) as DocumentsTab[];
-    let documentsTab: DocumentsTab = documentsTabs && documentsTabs[0];
+      ) as DocumentsTabV2[];
+    let documentsTab: DocumentsTabV2 = documentsTabs && documentsTabs[0];
 
     if (documentsTab) {
       useTabs.getState().activateTab(documentsTab);
@@ -312,7 +311,7 @@ export default class Collection implements ViewModels.Collection {
       });
       this.documentIds([]);
 
-      documentsTab = new DocumentsTab({
+      documentsTab = new DocumentsTabV2({
         partitionKey: this.partitionKey,
         documentIds: ko.observableArray<DocumentId>([]),
         tabKind: ViewModels.CollectionTabKind.Documents,
@@ -494,13 +493,13 @@ export default class Collection implements ViewModels.Collection {
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
 
-    const mongoDocumentsTabs: MongoDocumentsTab[] = useTabs
+    const mongoDocumentsTabs: DocumentsTabV2[] = useTabs
       .getState()
       .getTabs(
         ViewModels.CollectionTabKind.Documents,
         (tab) => tab.collection && tab.collection.databaseId === this.databaseId && tab.collection.id() === this.id(),
-      ) as MongoDocumentsTab[];
-    let mongoDocumentsTab: MongoDocumentsTab = mongoDocumentsTabs && mongoDocumentsTabs[0];
+      ) as DocumentsTabV2[];
+    let mongoDocumentsTab: DocumentsTabV2 = mongoDocumentsTabs && mongoDocumentsTabs[0];
 
     if (mongoDocumentsTab) {
       useTabs.getState().activateTab(mongoDocumentsTab);
@@ -514,7 +513,7 @@ export default class Collection implements ViewModels.Collection {
       });
       this.documentIds([]);
 
-      mongoDocumentsTab = new MongoDocumentsTab({
+      mongoDocumentsTab = new DocumentsTabV2({
         partitionKey: this.partitionKey,
         documentIds: this.documentIds,
         tabKind: ViewModels.CollectionTabKind.Documents,
diff --git a/src/Explorer/Tree/DocumentId.ts b/src/Explorer/Tree/DocumentId.ts
index 4ccf71e40..c54931c75 100644
--- a/src/Explorer/Tree/DocumentId.ts
+++ b/src/Explorer/Tree/DocumentId.ts
@@ -1,10 +1,18 @@
 import * as ko from "knockout";
 import * as DataModels from "../../Contracts/DataModels";
 import { useDialog } from "../Controls/Dialog";
-import DocumentsTab from "../Tabs/DocumentsTab";
 
+/**
+ * Replaces DocumentsTab so we can plug any object
+ */
+export interface IDocumentIdContainer {
+  partitionKeyProperties?: string[];
+  partitionKey: DataModels.PartitionKey;
+  isEditorDirty: () => boolean;
+  selectDocument: (documentId: DocumentId) => Promise<void>;
+}
 export default class DocumentId {
-  public container: DocumentsTab;
+  public container: IDocumentIdContainer;
   public rid: string;
   public self: string;
   public ts: string;
@@ -15,7 +23,7 @@ export default class DocumentId {
   public stringPartitionKeyValues: string[];
   public isDirty: ko.Observable<boolean>;
 
-  constructor(container: DocumentsTab, data: any, partitionKeyValue: any[]) {
+  constructor(container: IDocumentIdContainer, data: any, partitionKeyValue: any[]) {
     this.container = container;
     this.self = data._self;
     this.rid = data._rid;
diff --git a/src/Explorer/Tree/ObjectId.ts b/src/Explorer/Tree/ObjectId.ts
index fc53a6a37..314a4cd7e 100644
--- a/src/Explorer/Tree/ObjectId.ts
+++ b/src/Explorer/Tree/ObjectId.ts
@@ -1,9 +1,8 @@
 import * as ko from "knockout";
-import DocumentId from "./DocumentId";
-import DocumentsTab from "../Tabs/DocumentsTab";
+import DocumentId, { IDocumentIdContainer } from "./DocumentId";
 
 export default class ObjectId extends DocumentId {
-  constructor(container: DocumentsTab, data: any, partitionKeyValue: any) {
+  constructor(container: IDocumentIdContainer, data: any, partitionKeyValue: any) {
     super(container, data, partitionKeyValue);
     if (typeof data._id === "object") {
       this.id = ko.observable(data._id[Object.keys(data._id)[0]]);
diff --git a/src/Explorer/Tree/ResourceTokenCollection.ts b/src/Explorer/Tree/ResourceTokenCollection.ts
index a5e6ab07f..6212c14a8 100644
--- a/src/Explorer/Tree/ResourceTokenCollection.ts
+++ b/src/Explorer/Tree/ResourceTokenCollection.ts
@@ -1,3 +1,4 @@
+import { DocumentsTabV2 } from "Explorer/Tabs/DocumentsTabV2/DocumentsTabV2";
 import * as ko from "knockout";
 import * as Constants from "../../Common/Constants";
 import * as DataModels from "../../Contracts/DataModels";
@@ -7,7 +8,6 @@ import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../UserContext";
 import { useTabs } from "../../hooks/useTabs";
 import Explorer from "../Explorer";
-import DocumentsTab from "../Tabs/DocumentsTab";
 import { NewQueryTab } from "../Tabs/QueryTab/QueryTab";
 import TabsBase from "../Tabs/TabsBase";
 import { useDatabases } from "../useDatabases";
@@ -118,15 +118,15 @@ export default class ResourceTokenCollection implements ViewModels.CollectionBas
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
 
-    const documentsTabs: DocumentsTab[] = useTabs
+    const documentsTabs: DocumentsTabV2[] = useTabs
       .getState()
       .getTabs(
         ViewModels.CollectionTabKind.Documents,
         (tab: TabsBase) =>
           tab.collection?.id() === this.id() &&
           (tab.collection as ViewModels.CollectionBase).databaseId === this.databaseId,
-      ) as DocumentsTab[];
-    let documentsTab: DocumentsTab = documentsTabs && documentsTabs[0];
+      ) as DocumentsTabV2[];
+    let documentsTab: DocumentsTabV2 = documentsTabs && documentsTabs[0];
 
     if (documentsTab) {
       useTabs.getState().activateTab(documentsTab);
@@ -139,7 +139,7 @@ export default class ResourceTokenCollection implements ViewModels.CollectionBas
         tabTitle: "Items",
       });
 
-      documentsTab = new DocumentsTab({
+      documentsTab = new DocumentsTabV2({
         partitionKey: this.partitionKey,
         resourceTokenPartitionKey: userContext.parsedResourceToken?.partitionKey,
         documentIds: ko.observableArray<DocumentId>([]),
diff --git a/src/Explorer/Tree2/ResourceTree.tsx b/src/Explorer/Tree2/ResourceTree.tsx
index 761cda2c6..45e3ba5d4 100644
--- a/src/Explorer/Tree2/ResourceTree.tsx
+++ b/src/Explorer/Tree2/ResourceTree.tsx
@@ -1,14 +1,13 @@
 import {
-  BrandVariants,
   FluentProvider,
-  Theme,
   Tree,
   TreeItemValue,
   TreeOpenChangeData,
   TreeOpenChangeEvent,
-  createLightTheme,
 } from "@fluentui/react-components";
+import { configContext } from "ConfigContext";
 import { TreeNode2, TreeNode2Component } from "Explorer/Controls/TreeComponent2/TreeNode2Component";
+import { getPlatformTheme } from "Explorer/Theme/ThemeUtil";
 import { useDatabaseTreeNodes } from "Explorer/Tree2/useDatabaseTreeNodes";
 import * as React from "react";
 import shallow from "zustand/shallow";
@@ -22,29 +21,6 @@ interface ResourceTreeProps {
   container: Explorer;
 }
 
-const cosmosdb: BrandVariants = {
-  10: "#020305",
-  20: "#111723",
-  30: "#16263D",
-  40: "#193253",
-  50: "#1B3F6A",
-  60: "#1B4C82",
-  70: "#18599B",
-  80: "#1267B4",
-  90: "#3174C2",
-  100: "#4F82C8",
-  110: "#6790CF",
-  120: "#7D9ED5",
-  130: "#92ACDC",
-  140: "#A6BAE2",
-  150: "#BAC9E9",
-  160: "#CDD8EF",
-};
-
-const lightTheme: Theme = {
-  ...createLightTheme(cosmosdb),
-};
-
 export const DATA_TREE_LABEL = "DATA";
 
 /**
@@ -113,7 +89,7 @@ export const ResourceTree2: React.FC<ResourceTreeProps> = ({ container }: Resour
 
   return (
     <>
-      <FluentProvider theme={lightTheme} style={{ overflow: "hidden" }}>
+      <FluentProvider theme={getPlatformTheme(configContext.platform)} style={{ overflow: "hidden" }}>
         <Tree
           aria-label="CosmosDB resources"
           openItems={openItems}
diff --git a/src/Platform/Fabric/FabricTheme.tsx b/src/Platform/Fabric/FabricTheme.tsx
index 5288d91c4..446f1ad93 100644
--- a/src/Platform/Fabric/FabricTheme.tsx
+++ b/src/Platform/Fabric/FabricTheme.tsx
@@ -1,4 +1,5 @@
 import { Theme, createTheme } from "@fluentui/react";
+import { BrandVariants, createLightTheme } from "@fluentui/react-components";
 
 export const appThemeFabric: Theme = createTheme({
   palette: {
@@ -206,3 +207,24 @@ export const appThemeFabric: Theme = createTheme({
     greenLight: "#13a10e",
   },
 });
+
+export const appThemeFabricTealBrandRamp: BrandVariants = {
+  10: "#001919",
+  20: "#012826",
+  30: "#01322E",
+  40: "#033f38",
+  50: "#054d43",
+  60: "#0a5c50",
+  70: "#0c695a",
+  80: "#117865",
+  90: "#1f937e",
+  100: "#2aaC94",
+  110: "#3abb9f",
+  120: "#52c7aa",
+  130: "#78d3b9",
+  140: "#9ee0cb",
+  150: "#c0ecdd",
+  160: "#e3f7ef",
+};
+
+export const appThemeFabricV9 = createLightTheme(appThemeFabricTealBrandRamp);
diff --git a/src/Shared/Telemetry/TelemetryConstants.ts b/src/Shared/Telemetry/TelemetryConstants.ts
index c6211d3f9..3b4892990 100644
--- a/src/Shared/Telemetry/TelemetryConstants.ts
+++ b/src/Shared/Telemetry/TelemetryConstants.ts
@@ -138,6 +138,7 @@ export enum Action {
   QueryGenerationFromCopilotPrompt,
   QueryEdited,
   ExecuteQueryGeneratedFromQueryCopilot,
+  DeleteDocuments,
 }
 
 export const ActionModifiers = {
diff --git a/src/setupTests.ts b/src/setupTests.ts
index 35af8a5a9..04c470c83 100644
--- a/src/setupTests.ts
+++ b/src/setupTests.ts
@@ -41,3 +41,9 @@ Object.defineProperty(window, "localStorage", {
 require("jquery-ui-dist/jquery-ui");
 (<any>global).TextEncoder = TextEncoder;
 (<any>global).TextDecoder = TextDecoder;
+
+(<any>global).ResizeObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+}));