Added date filter to InvestigationTable

src/components/Investigation/InvestigationTable.js

-import React from 'react';
+import React, { useState } from 'react';
 import { Col, Glyphicon, Grid, Row } from 'react-bootstrap';
+import moment from 'moment';
 import {
   DATASET_COUNT,
   FILE_COUNT,
@@ -10,6 +11,8 @@ import ResponsiveTable from '../Table/ResponsiveTable';
 import InvestigationWidget from './InvestigationWidget';
 import { beamlineFormatter, dateFormatter, nameFormatter } from './utils';
 import { stringifyBytesSize } from '../../helpers';
+import InvestigationDateFilter from './InvestigationDateFilter';
+import styles from './InvestigationTable.module.css';
 
 function volumeFormatter(cell, investigation) {
   const volume = investigation.parameters.find((o) => o.name === VOLUME);
@@ -228,6 +231,7 @@ function getColumns(props) {
 
 function InvestigationTable(props) {
   const { expanded, user, investigations } = props;
+  const [dateFilter, setDateFilter] = useState();
 
   const expandRow = {
     showExpandColumn: true,
@@ -262,11 +266,23 @@ function InvestigationTable(props) {
   };
 
   return (
-    <ResponsiveTable
-      data={investigations}
-      columns={getColumns(props)}
-      expandRow={expandRow}
-    />
+    <>
+      <div className={styles.wrapper}>
+        <InvestigationDateFilter
+          rootClassName={styles.filter}
+          value={dateFilter && dateFilter.toDate()}
+          onDayChange={(date) => setDateFilter(moment(date))}
+          onClear={() => setDateFilter(undefined)}
+        />
+      </div>
+      <ResponsiveTable
+        data={investigations.filter(
+          (inv) => !dateFilter || dateFilter.isSame(inv.startDate, 'day')
+        )}
+        columns={getColumns(props)}
+        expandRow={expandRow}
+      />
+    </>
   );
 }
 

src/components/Investigation/InvestigationTable.module.css

+.wrapper {
+  position: relative;
+}
+
+@media (min-width: 50em) {
+  .filter {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+}