From 4d9727203b5d4f0b392fb3c6350b66d071b21e73 Mon Sep 17 00:00:00 2001
From: akash-codemonk <67054171+akash-codemonk@users.noreply.github.com>
Date: Tue, 29 Sep 2020 16:12:24 +0530
Subject: [PATCH] Stop showing empty table when there are no records (#790)

---
 .../src/pages/Editor/QueryEditor/Table.tsx    | 38 +------------------
 1 file changed, 2 insertions(+), 36 deletions(-)

diff --git a/app/client/src/pages/Editor/QueryEditor/Table.tsx b/app/client/src/pages/Editor/QueryEditor/Table.tsx
index 9dc40037f5..b203296947 100644
--- a/app/client/src/pages/Editor/QueryEditor/Table.tsx
+++ b/app/client/src/pages/Editor/QueryEditor/Table.tsx
@@ -95,6 +95,8 @@ const Table = (props: TableProps) => {
     useFlexLayout,
   );
 
+  if (rows.length === 0 || headerGroups.length === 0) return null;
+
   return (
     <StyledTableWrapped
       width={200}
@@ -126,7 +128,6 @@ const Table = (props: TableProps) => {
               ))}
             </div>
           ))}
-          {headerGroups.length === 0 && renderEmptyRows(1, 2)}
           <div {...getTableBodyProps()} className="tbody">
             {rows.map((row: any, index: number) => {
               prepareRow(row);
@@ -150,7 +151,6 @@ const Table = (props: TableProps) => {
                 </div>
               );
             })}
-            {rows.length === 0 && renderEmptyRows(1, 2)}
           </div>
         </div>
       </div>
@@ -158,38 +158,4 @@ const Table = (props: TableProps) => {
   );
 };
 
-const renderEmptyRows = (rowCount: number, columns: number) => {
-  const rows: string[] = new Array(rowCount).fill("");
-  const tableColumns = new Array(columns).fill("");
-  return (
-    <React.Fragment>
-      {rows.map((row: string, index: number) => {
-        return (
-          <div
-            className="tr"
-            key={index}
-            style={{
-              display: "flex",
-              flex: "1 0 auto",
-            }}
-          >
-            {tableColumns.map((column: any, colIndex: number) => {
-              return (
-                <div
-                  key={colIndex}
-                  className="td"
-                  style={{
-                    boxSizing: "border-box",
-                    flex: "1 0 auto",
-                  }}
-                />
-              );
-            })}
-          </div>
-        );
-      })}
-    </React.Fragment>
-  );
-};
-
 export default Table;