refactor: Add AutoSizer to react-virtualized Grid (#17606)

* remove styles from renderCell * remove styling on grid
apache · Dec 2, 2021 · d9e9c3a · d9e9c3a
1 parent b13d953
commit d9e9c3a
Showing 1 changed file with 34 additions and 34 deletions.
diff --git a/superset-frontend/src/components/FilterableTable/FilterableTable.tsx b/superset-frontend/src/components/FilterableTable/FilterableTable.tsx
@@ -20,6 +20,7 @@ import JSONbig from 'json-bigint';
 import React, { PureComponent } from 'react';
 import JSONTree from 'react-json-tree';
 import {
+  AutoSizer,
   Column,
   Grid,
   ScrollSync,
@@ -58,8 +59,8 @@ function safeJsonObjectParse(
   }
 }
 
-const SCROLL_BAR_HEIGHT = 15;
 const GRID_POSITION_ADJUSTMENT = 4;
+const SCROLL_BAR_HEIGHT = 15;
 const JSON_TREE_THEME = {
   scheme: 'monokai',
   author: 'wimer hazenberg (http://www.monokai.nl)',
@@ -479,39 +480,38 @@ export default class FilterableTable extends PureComponent<
     return (
       <StyledFilterableTable>
         <ScrollSync>
-          {({ onScroll, scrollTop }) => (
-            <div
-              className="filterable-table-container Table"
-              data-test="filterable-table-container"
-              ref={this.container}
-            >
-              <div className="LeftColumn">
-                <Grid
-                  cellRenderer={this.renderGridCellHeader}
-                  columnCount={orderedColumnKeys.length}
-                  columnWidth={getColumnWidth}
-                  height={rowHeight}
-                  rowCount={1}
-                  rowHeight={rowHeight}
-                  scrollTop={scrollTop}
-                  width={this.totalTableWidth}
-                />
-              </div>
-              <div className="RightColumn">
-                <Grid
-                  cellRenderer={this.renderGridCell}
-                  columnCount={orderedColumnKeys.length}
-                  columnWidth={getColumnWidth}
-                  height={totalTableHeight - rowHeight}
-                  onScroll={onScroll}
-                  overscanColumnCount={overscanColumnCount}
-                  overscanRowCount={overscanRowCount}
-                  rowCount={this.list.length}
-                  rowHeight={rowHeight}
-                  width={this.totalTableWidth}
-                />
-              </div>
-            </div>
+          {({ onScroll, scrollLeft }) => (
+            <>
+              <AutoSizer disableHeight>
+                {({ width }) => (
+                  <div>
+                    <Grid
+                      cellRenderer={this.renderGridCellHeader}
+                      columnCount={orderedColumnKeys.length}
+                      columnWidth={getColumnWidth}
+                      height={rowHeight}
+                      rowCount={1}
+                      rowHeight={rowHeight}
+                      scrollLeft={scrollLeft}
+                      width={width}
+                      style={{ overflow: 'hidden' }}
+                    />
+                    <Grid
+                      cellRenderer={this.renderGridCell}
+                      columnCount={orderedColumnKeys.length}
+                      columnWidth={getColumnWidth}
+                      height={totalTableHeight - rowHeight}
+                      onScroll={onScroll}
+                      overscanColumnCount={overscanColumnCount}
+                      overscanRowCount={overscanRowCount}
+                      rowCount={this.list.length}
+                      rowHeight={rowHeight}
+                      width={width}
+                    />
+                  </div>
+                )}
+              </AutoSizer>
+            </>
           )}
         </ScrollSync>
       </StyledFilterableTable>