diff --git a/src/components/tables/ReferenceTable.js b/src/components/tables/ReferenceTable.js
index c14e629..af1f7a2 100644
--- a/src/components/tables/ReferenceTable.js
+++ b/src/components/tables/ReferenceTable.js
@@ -1,5 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
+import {Modal} from 'semantic-ui-react';
import {getReferencedBy} from '../../utils/api';
import SortableTable from './SortableTable';
import './ReferenceTable.css';
@@ -10,6 +11,7 @@ class ReferenceTable extends React.Component {
this.state = {
loadingReferences: false,
referenceData: [],
+ showChildModal: null,
};
}
@@ -58,6 +60,14 @@ class ReferenceTable extends React.Component {
});
};
+ onChildRowClick = child => {
+ this.setState({showChildModal: child});
+ };
+
+ closeModal = () => {
+ this.setState({showChildModal: null});
+ };
+
render() {
return (
@@ -73,7 +83,26 @@ class ReferenceTable extends React.Component {
headerCells={this.props.tableHeaders}
data={this.state.referenceData}
rowChildren={true}
+ onChildRowClick={this.onChildRowClick}
/>
+
this.closeModal()}
+ dimmer="inverted"
+ >
+
+ {this.state.showChildModal
+ ? this.state.showChildModal.id
+ : null}
+
+
+
+
+ {JSON.stringify(this.state.showChildModal, null, 2)}
+
+
+
+
) : null}
diff --git a/src/components/tables/SortableTable.css b/src/components/tables/SortableTable.css
index abe51cf..a1a6014 100644
--- a/src/components/tables/SortableTable.css
+++ b/src/components/tables/SortableTable.css
@@ -16,9 +16,3 @@
.sortable-table td:hover {
background-color: var(--d3b-hoverblue);
}
-
-.sortable-table__child-row:hover,
-.sortable-table__child-row td:hover {
- background-color: inherit !important;
- cursor: default;
-}
diff --git a/src/components/tables/SortableTable.js b/src/components/tables/SortableTable.js
index 9490e41..b1e2df8 100644
--- a/src/components/tables/SortableTable.js
+++ b/src/components/tables/SortableTable.js
@@ -110,7 +110,10 @@ class SortableTable extends React.Component {
key={`${child.id}-${j}`}
className="sortable-table__child-row"
>
-
+ this.props.onChildRowClick(child)}
+ >
{child.id}
@@ -140,6 +143,7 @@ SortableTable.propTypes = {
),
rowChildren: PropTypes.bool,
onRowClick: PropTypes.func,
+ onChildRowClick: PropTypes.func,
};
SortableTable.defaultProps = {
@@ -147,6 +151,7 @@ SortableTable.defaultProps = {
data: [],
rowChildren: false,
onRowClick: () => {},
+ onChildRowClick: () => {},
};
export default SortableTable;