New: Custom Filtering for UI (#234)

frontend/src/Components/Table/TableRow.css

@@ -2,6 +2,6 @@
   transition: background-color 500ms;
 
   &:hover {
-    background-color: #fafbfc;
+    background-color: $tableRowHoverBackgroundColor;
   }
 }

frontend/src/Components/Table/VirtualTable.js

@@ -50,6 +50,16 @@ class VirtualTable extends Component {
     this._contentBodyNode = ReactDOM.findDOMNode(this.props.contentBody);
   }
 
+  componentDidUpdate(prevProps, preState) {
+    const scrollIndex = this.props.scrollIndex;
+
+    if (scrollIndex != null && scrollIndex !== prevProps.scrollIndex) {
+      const scrollTop = (scrollIndex + 1) * ROW_HEIGHT + 20;
+
+      this.props.onScroll({ scrollTop });
+    }
+  }
+
   //
   // Control
 
@@ -57,12 +67,6 @@ class VirtualTable extends Component {
     return this.props.items[index];
   }
 
-  scrollToRow = (rowIndex) => {
-    const scrollTop = (rowIndex + 1) * ROW_HEIGHT + 20;
-
-    this.props.onScroll({ scrollTop });
-  }
-
   //
   // Listeners
 
@@ -144,6 +148,7 @@ VirtualTable.propTypes = {
   className: PropTypes.string.isRequired,
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
   scrollTop: PropTypes.number.isRequired,
+  scrollIndex: PropTypes.number,
   contentBody: PropTypes.object.isRequired,
   isSmallScreen: PropTypes.bool.isRequired,
   header: PropTypes.node.isRequired,