suddjian commented on a change in pull request #18729:
URL: https://github.com/apache/superset/pull/18729#discussion_r810223656
##########
File path: superset-frontend/src/components/FilterableTable/FilterableTable.tsx
##########
@@ -103,101 +103,89 @@ interface FilterableTableProps {
orderedColumnKeys: string[];
data: Record<string, unknown>[];
height: number;
- filterText: string;
- headerHeight: number;
- overscanColumnCount: number;
- overscanRowCount: number;
- rowHeight: number;
- striped: boolean;
- expandedColumns: string[];
+ filterText?: string;
+ headerHeight?: number;
+ overscanColumnCount?: number;
+ overscanRowCount?: number;
+ rowHeight?: number;
+ striped?: boolean;
+ expandedColumns?: string[];
}
-interface FilterableTableState {
- sortBy?: string;
- sortDirection?: SortDirectionType;
- fitted: boolean;
- displayedList: Datum[];
-}
-
-export default class FilterableTable extends PureComponent<
- FilterableTableProps,
- FilterableTableState
-> {
- static defaultProps = {
- filterText: '',
- headerHeight: 32,
- overscanColumnCount: 10,
- overscanRowCount: 10,
- rowHeight: 32,
- striped: true,
- expandedColumns: [],
- };
-
- list: Datum[];
-
- complexColumns: Record<string, boolean>;
-
- widthsForColumnsByKey: Record<string, number>;
-
- totalTableWidth: number;
-
- totalTableHeight: number;
-
- container: React.RefObject<HTMLDivElement>;
-
- constructor(props: FilterableTableProps) {
- super(props);
- this.list = this.formatTableData(props.data);
- this.addJsonModal = this.addJsonModal.bind(this);
- this.getCellContent = this.getCellContent.bind(this);
- this.renderGridCell = this.renderGridCell.bind(this);
- this.renderGridCellHeader = this.renderGridCellHeader.bind(this);
- this.renderGrid = this.renderGrid.bind(this);
- this.renderTableCell = this.renderTableCell.bind(this);
- this.renderTableHeader = this.renderTableHeader.bind(this);
- this.sortResults = this.sortResults.bind(this);
- this.renderTable = this.renderTable.bind(this);
- this.rowClassName = this.rowClassName.bind(this);
- this.sort = this.sort.bind(this);
+const FilterableTable = ({
+ orderedColumnKeys,
+ data,
+ height,
+ filterText = '',
+ headerHeight = 32,
+ overscanColumnCount = 10,
+ overscanRowCount = 10,
+ rowHeight = 32,
+ striped = true,
+ expandedColumns = [],
+}: FilterableTableProps) => {
+ const formatTableData = (data: Record<string, unknown>[]): Datum[] =>
+ data.map(row => {
+ const newRow = {};
+ Object.entries(row).forEach(([key, val]) => {
+ if (['string', 'number'].indexOf(typeof val) >= 0) {
+ newRow[key] = val;
+ } else {
+ newRow[key] = val === null ? null : JSONbig.stringify(val);
+ }
+ });
+ return newRow;
+ });
- // columns that have complex type and were expanded into sub columns
- this.complexColumns = props.orderedColumnKeys.reduce(
+ const [sortByState, setSortByState] = useState<string |
undefined>(undefined);
+ const [sortDirectionState, setSortDirectionState] = useState<
+ SortDirectionType | undefined
+ >(undefined);
+ const [fitted, setFitted] = useState(false);
+ const [list] = useState<Datum[]>(formatTableData(data));
Review comment:
This will call `formatTableData` every render, but we are only using it
to initialize the state. Should instead pass a function.
```suggestion
const [list] = useState<Datum[]>(() => formatTableData(data));
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
