From 15d0314c1bb3a00dd6627088792af1eb57b39d25 Mon Sep 17 00:00:00 2001
From: justin-park <justin.park@airbnb.com>
Date: Fri, 7 Oct 2022 15:41:10 -0700
Subject: [PATCH 1/2] fix(sqllab): resultset disappeared on switching tabs

---
 superset-frontend/src/components/FilterableTable/index.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/superset-frontend/src/components/FilterableTable/index.tsx b/superset-frontend/src/components/FilterableTable/index.tsx
index 16ae37e671e76..f1e4de9d6487c 100644
--- a/superset-frontend/src/components/FilterableTable/index.tsx
+++ b/superset-frontend/src/components/FilterableTable/index.tsx
@@ -348,6 +348,10 @@ const FilterableTable = ({
     fitTableToWidthIfNeeded();
   }, []);
 
+  useEffect(() => {
+    totalTableHeight.current = height;
+  }, [height]);
+
   const hasMatch = (text: string, row: Datum) => {
     const values: string[] = [];
     Object.keys(row).forEach(key => {

From fcefb26580528f5b74f495233cac74894b6e416b Mon Sep 17 00:00:00 2001
From: justin-park <justin.park@airbnb.com>
Date: Fri, 7 Oct 2022 16:36:40 -0700
Subject: [PATCH 2/2] replace useRef by prop

---
 .../src/components/FilterableTable/index.tsx  | 33 +++++++------------
 1 file changed, 12 insertions(+), 21 deletions(-)

diff --git a/superset-frontend/src/components/FilterableTable/index.tsx b/superset-frontend/src/components/FilterableTable/index.tsx
index f1e4de9d6487c..b33c3e13d0ff4 100644
--- a/superset-frontend/src/components/FilterableTable/index.tsx
+++ b/superset-frontend/src/components/FilterableTable/index.tsx
@@ -332,7 +332,6 @@ const FilterableTable = ({
       .map(key => widthsForColumnsByKey[key])
       .reduce((curr, next) => curr + next),
   );
-  const totalTableHeight = useRef(height);
   const container = useRef<HTMLDivElement>(null);
 
   const fitTableToWidthIfNeeded = () => {
@@ -348,10 +347,6 @@ const FilterableTable = ({
     fitTableToWidthIfNeeded();
   }, []);
 
-  useEffect(() => {
-    totalTableHeight.current = height;
-  }, [height]);
-
   const hasMatch = (text: string, row: Datum) => {
     const values: string[] = [];
     Object.keys(row).forEach(key => {
@@ -567,15 +562,13 @@ const FilterableTable = ({
   };
 
   const renderGrid = () => {
-    totalTableHeight.current = height;
-    if (
+    // exclude the height of the horizontal scroll bar from the height of the table
+    // and the height of the table container if the content overflows
+    const totalTableHeight =
       container.current &&
       totalTableWidth.current > container.current.clientWidth
-    ) {
-      // exclude the height of the horizontal scroll bar from the height of the table
-      // and the height of the table container if the content overflows
-      totalTableHeight.current -= SCROLL_BAR_HEIGHT;
-    }
+        ? height - SCROLL_BAR_HEIGHT
+        : height;
 
     const getColumnWidth = ({ index }: { index: number }) =>
       widthsForColumnsByKey[orderedColumnKeys[index]];
@@ -604,7 +597,7 @@ const FilterableTable = ({
                       cellRenderer={renderGridCell}
                       columnCount={orderedColumnKeys.length}
                       columnWidth={getColumnWidth}
-                      height={totalTableHeight.current - rowHeight}
+                      height={totalTableHeight - rowHeight}
                       onScroll={onScroll}
                       overscanColumnCount={overscanColumnCount}
                       overscanRowCount={overscanRowCount}
@@ -648,15 +641,13 @@ const FilterableTable = ({
       );
     }
 
-    totalTableHeight.current = height;
-    if (
+    // exclude the height of the horizontal scroll bar from the height of the table
+    // and the height of the table container if the content overflows
+    const totalTableHeight =
       container.current &&
       totalTableWidth.current > container.current.clientWidth
-    ) {
-      // exclude the height of the horizontal scroll bar from the height of the table
-      // and the height of the table container if the content overflows
-      totalTableHeight.current -= SCROLL_BAR_HEIGHT;
-    }
+        ? height - SCROLL_BAR_HEIGHT
+        : height;
 
     const rowGetter = ({ index }: { index: number }) =>
       getDatum(sortedAndFilteredList, index);
@@ -669,7 +660,7 @@ const FilterableTable = ({
         {fitted && (
           <Table
             headerHeight={headerHeight}
-            height={totalTableHeight.current}
+            height={totalTableHeight}
             overscanRowCount={overscanRowCount}
             rowClassName={rowClassName}
             rowHeight={rowHeight}