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

* remove styles from renderCell

* remove styling on grid
This commit is contained in:
Hugh A. Miles II 2021-12-02 09:47:47 -08:00 committed by GitHub
parent b13d953b34
commit d9e9c3a3de
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -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>