this.setHover(true)}
- onMouseLeave={() => this.setHover(false)}
+ const renderHeader = () => (
+
setHover(true)}
+ onMouseLeave={() => setHover(false)}
+ >
+
-
-
- {table.name}
-
-
+
+ {table.name}
+
+
-
- {table.isMetadataLoading || table.isExtraMetadataLoading ? (
-
- ) : (
- e.stopPropagation()}
- >
- {this.renderControls()}
-
- )}
-
+
+ {table.isMetadataLoading || table.isExtraMetadataLoading ? (
+
+ ) : (
+ e.stopPropagation()}
+ >
+ {renderControls()}
+
+ )}
- );
- }
+
+ );
- renderBody() {
- const { table } = this.props;
+ const renderBody = () => {
let cols;
if (table.columns) {
cols = table.columns.slice();
- if (this.state.sortColumns) {
+ if (sortColumns) {
cols.sort((a, b) => {
const colA = a.name.toUpperCase();
const colB = b.name.toUpperCase();
@@ -253,33 +232,54 @@ class TableElement extends React.PureComponent {
const metadata = (
this.setHover(true)}
- onMouseLeave={() => this.setHover(false)}
+ onMouseEnter={() => setHover(true)}
+ onMouseLeave={() => setHover(false)}
css={{ paddingTop: 6 }}
>
- {this.renderWell()}
+ {renderWell()}
- {cols &&
- cols.map(col => )}
+ {cols?.map(col => (
+
+ ))}
);
return metadata;
- }
+ };
- render() {
- return (
-
- {this.renderBody()}
-
- );
- }
-}
+ const collapseExpandIcon = () => (
+
+
+
+ );
+
+ return (
+
+ {renderBody()}
+
+ );
+};
TableElement.propTypes = propTypes;
TableElement.defaultProps = defaultProps;