You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by hu...@apache.org on 2021/11/23 19:26:33 UTC
[superset] 01/01: init
This is an automated email from the ASF dual-hosted git repository.
hugh pushed a commit to branch hugh/sqllab-grid
in repository https://gitbox.apache.org/repos/asf/superset.git
commit d124960e7131c715abf74f29fe1839eb50a77fe8
Author: hughhhh <hu...@gmail.com>
AuthorDate: Tue Nov 23 11:24:32 2021 -0800
init
---
.../components/FilterableTable/FilterableTable.tsx | 91 ++++++++--------------
1 file changed, 31 insertions(+), 60 deletions(-)
diff --git a/superset-frontend/src/components/FilterableTable/FilterableTable.tsx b/superset-frontend/src/components/FilterableTable/FilterableTable.tsx
index 9714907..4711b44 100644
--- a/superset-frontend/src/components/FilterableTable/FilterableTable.tsx
+++ b/superset-frontend/src/components/FilterableTable/FilterableTable.tsx
@@ -22,7 +22,7 @@ import JSONTree from 'react-json-tree';
import {
Column,
Grid,
- ScrollSync,
+ AutoSizer,
SortDirection,
SortDirectionType,
SortIndicator,
@@ -424,24 +424,21 @@ export default class FilterableTable extends PureComponent<
rowIndex: number;
style: React.CSSProperties;
}) {
+ // if (rowIndex === 0) {
+ // return (
+ // <div key={key} style={style}>
+ // header
+ // </div>
+ // );
+ // }
+
const columnKey = this.props.orderedColumnKeys[columnIndex];
const cellData = this.list[rowIndex][columnKey];
- const cellText = this.getCellContent({ cellData, columnKey });
- const content =
- cellData === null ? <i className="text-muted">{cellText}</i> : cellText;
+
+ // TODO: handle NULL cases
const cellNode = (
- <div
- key={key}
- style={{
- ...style,
- top:
- typeof style.top === 'number'
- ? style.top - GRID_POSITION_ADJUSTMENT
- : style.top,
- }}
- className={`grid-cell ${this.rowClassName({ index: rowIndex })}`}
- >
- <div css={{ width: 'inherit' }}>{content}</div>
+ <div key={key} style={style}>
+ {this.getCellContent({ cellData, columnKey })}
</div>
);
@@ -453,12 +450,7 @@ export default class FilterableTable extends PureComponent<
}
renderGrid() {
- const {
- orderedColumnKeys,
- overscanColumnCount,
- overscanRowCount,
- rowHeight,
- } = this.props;
+ const { orderedColumnKeys, rowHeight } = this.props;
let { height } = this.props;
let totalTableHeight = height;
@@ -475,46 +467,25 @@ export default class FilterableTable extends PureComponent<
const getColumnWidth = ({ index }: { index: number }) =>
this.widthsForColumnsByKey[orderedColumnKeys[index]];
+ const { innerWidth: width, innerHeight } = window;
+ console.log('width', width);
+ console.log('length', innerHeight);
+
// fix height of filterable table
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>
- )}
- </ScrollSync>
- </StyledFilterableTable>
+ <AutoSizer>
+ {({ width }) => (
+ <Grid
+ cellRenderer={this.renderGridCell}
+ columnCount={orderedColumnKeys.length}
+ columnWidth={getColumnWidth}
+ rowCount={this.list.length}
+ rowHeight={rowHeight}
+ height={totalTableHeight}
+ width={width}
+ />
+ )}
+ </AutoSizer>
);
}