diff --git a/app/client/package.json b/app/client/package.json
index 17b993c423..b83b1d87dc 100644
--- a/app/client/package.json
+++ b/app/client/package.json
@@ -109,6 +109,7 @@
     "react-toastify": "^5.5.0",
     "react-transition-group": "^4.3.0",
     "react-use-gesture": "^7.0.4",
+    "react-window": "^1.8.6",
     "react-zoom-pan-pinch": "^1.6.1",
     "redux": "^4.0.1",
     "redux-form": "^8.2.6",
@@ -179,6 +180,7 @@
     "@types/react-beautiful-dnd": "^11.0.4",
     "@types/react-select": "^3.0.5",
     "@types/react-tabs": "^2.3.1",
+    "@types/react-window": "^1.8.2",
     "@types/redux-form": "^8.1.9",
     "@types/redux-mock-store": "^1.0.2",
     "@types/styled-system": "^5.1.9",
diff --git a/app/client/src/pages/Editor/QueryEditor/Table.tsx b/app/client/src/pages/Editor/QueryEditor/Table.tsx
index ad99494646..76aa4cb059 100644
--- a/app/client/src/pages/Editor/QueryEditor/Table.tsx
+++ b/app/client/src/pages/Editor/QueryEditor/Table.tsx
@@ -1,11 +1,14 @@
 import React from "react";
-import { CellWrapper } from "components/designSystems/appsmith/TableComponent/TableStyledWrappers";
-import { useTable, useFlexLayout } from "react-table";
 import styled from "styled-components";
-import AutoToolTipComponent from "components/designSystems/appsmith/TableComponent/AutoToolTipComponent";
-import { getType, Types } from "utils/TypeHelpers";
+import { FixedSizeList } from "react-window";
+import { useTable, useFlexLayout } from "react-table";
+
 import { Colors } from "constants/Colors";
+import { scrollbarWidth } from "utils/helpers";
+import { getType, Types } from "utils/TypeHelpers";
 import ErrorBoundary from "components/editorComponents/ErrorBoundry";
+import { CellWrapper } from "components/designSystems/appsmith/TableComponent/TableStyledWrappers";
+import AutoToolTipComponent from "components/designSystems/appsmith/TableComponent/AutoToolTipComponent";
 
 interface TableProps {
   data: Record<string, any>[];
@@ -203,6 +206,7 @@ const Table = (props: TableProps) => {
     headerGroups,
     rows,
     prepareRow,
+    totalColumnsWidth,
   } = useTable(
     {
       columns,
@@ -212,6 +216,41 @@ const Table = (props: TableProps) => {
     useFlexLayout,
   );
 
+  const scrollBarSize = React.useMemo(() => scrollbarWidth(), []);
+
+  const RenderRow = React.useCallback(
+    ({ index, style }) => {
+      const row = rows[index];
+
+      prepareRow(row);
+      return (
+        <div
+          {...row.getRowProps({
+            style,
+          })}
+          className="tr"
+        >
+          {row.cells.map((cell: any, cellIndex: number) => {
+            return (
+              <div
+                key={cellIndex}
+                {...cell.getCellProps()}
+                className="td"
+                data-rowindex={index}
+                data-colindex={cellIndex}
+              >
+                <CellWrapper isHidden={false}>
+                  {cell.render("Cell")}
+                </CellWrapper>
+              </div>
+            );
+          })}
+        </div>
+      );
+    },
+    [prepareRow, rows],
+  );
+
   if (rows.length === 0 || headerGroups.length === 0) return null;
 
   return (
@@ -242,29 +281,16 @@ const Table = (props: TableProps) => {
                 ))}
               </div>
             ))}
+
             <div {...getTableBodyProps()} className="tbody">
-              {rows.map((row: any, index: number) => {
-                prepareRow(row);
-                return (
-                  <div key={index} {...row.getRowProps()} className={"tr"}>
-                    {row.cells.map((cell: any, cellIndex: number) => {
-                      return (
-                        <div
-                          key={cellIndex}
-                          {...cell.getCellProps()}
-                          className="td"
-                          data-rowindex={index}
-                          data-colindex={cellIndex}
-                        >
-                          <CellWrapper isHidden={false}>
-                            {cell.render("Cell")}
-                          </CellWrapper>
-                        </div>
-                      );
-                    })}
-                  </div>
-                );
-              })}
+              <FixedSizeList
+                height={400}
+                itemCount={rows.length}
+                itemSize={35}
+                width={totalColumnsWidth + scrollBarSize}
+              >
+                {RenderRow}
+              </FixedSizeList>
             </div>
           </div>
         </div>
diff --git a/app/client/src/utils/helpers.tsx b/app/client/src/utils/helpers.tsx
index 5f00a201d2..9b3da0b8e9 100644
--- a/app/client/src/utils/helpers.tsx
+++ b/app/client/src/utils/helpers.tsx
@@ -260,3 +260,20 @@ export const getSelectedText = () => {
     return selectionObj && selectionObj.toString();
   }
 };
+
+/**
+ * calculates and returns the scrollwidth
+ *
+ * @returns
+ */
+export const scrollbarWidth = () => {
+  const scrollDiv = document.createElement("div");
+  scrollDiv.setAttribute(
+    "style",
+    "width: 100px; height: 100px; overflow: scroll; position:absolute; top:-9999px;",
+  );
+  document.body.appendChild(scrollDiv);
+  const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+  document.body.removeChild(scrollDiv);
+  return scrollbarWidth;
+};
diff --git a/app/client/yarn.lock b/app/client/yarn.lock
index 9ee2840d38..5fc9c07dc7 100644
--- a/app/client/yarn.lock
+++ b/app/client/yarn.lock
@@ -4222,6 +4222,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-window@^1.8.2":
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/@types/react-window/-/react-window-1.8.2.tgz#a5a6b2762ce73ffaab7911ee1397cf645f2459fe"
+  integrity sha512-gP1xam68Wc4ZTAee++zx6pTdDAH08rAkQrWm4B4F/y6hhmlT9Mgx2q8lTCXnrPHXsr15XjRN9+K2DLKcz44qEQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@^16.8.2":
   version "16.9.52"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.52.tgz#c46c72d1a1d8d9d666f4dd2066c0e22600ccfde1"
@@ -16181,6 +16188,14 @@ react-window@^1.8.2:
     "@babel/runtime" "^7.0.0"
     memoize-one ">=3.1.1 <6"
 
+react-window@^1.8.6:
+  version "1.8.6"
+  resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.6.tgz#d011950ac643a994118632665aad0c6382e2a112"
+  integrity sha512-8VwEEYyjz6DCnGBsd+MgkD0KJ2/OXFULyDtorIiTz+QzwoP94tBoA7CnbtyXMm+cCeAUER5KJcPtWl9cpKbOBg==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    memoize-one ">=3.1.1 <6"
+
 react-zoom-pan-pinch@^1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/react-zoom-pan-pinch/-/react-zoom-pan-pinch-1.6.1.tgz#da16267c258ab37e8ebcdc7c252794a9633e91ec"