3 files changed, 55 insertions, 23 deletions

diff --git a/client/table/citations.table.js b/client/table/citations.table.js
index ef5ab0b5..c1c71906 100644
--- a/client/table/citations.table.js
+++ b/client/table/citations.table.js
@@ -1,11 +1,9 @@
 import React, { Component } from 'react'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
 import { ReactTabulator } from 'react-tabulator'
 import { saveAs } from 'file-saver'
 
 import { Loader } from '../common'
-import { toArray, toTuples, domainFromUrl } from '../util'
+import { domainFromUrl } from '../util'
 
 export const citationsColumns = [
   { title: 'Title', field: 'title', sorter: 'string' },
@@ -111,7 +109,7 @@ class CitationsTable extends Component {
             value={this.state.q}
             onChange={e => this.updateFilter(e.target.value)}
             className='q'
-            placeholder='Enter text to search citations...'
+            placeholder='Enter text to search citations'
           />
           <span className='download' onClick={() => this.download()}>Download CSV</span>
         </div>
diff --git a/client/table/file.table.js b/client/table/file.table.js
index c880810a..c195b09d 100644
--- a/client/table/file.table.js
+++ b/client/table/file.table.js
@@ -1,17 +1,17 @@
 import React, { Component } from 'react'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
 import { ReactTabulator } from 'react-tabulator'
 import csv from 'parse-csv'
 
-import { toArray, toTuples, domainFromUrl } from '../util'
+import { domainFromUrl } from '../util'
 import { Loader } from '../common'
 
 class FileTable extends Component {
   state = {
     keys: [],
     data: [],
+    filteredData: [],
     columns: [],
+    q: '',
   }
 
   componentDidMount() {
@@ -25,7 +25,7 @@ class FileTable extends Component {
           const data = csv.toJSON(text, { headers: { included: true } })
           // console.log(data)
           const columns = this.getColumns(keys, data, payload.fields)
-          this.setState({ keys, data, columns })
+          this.setState({ keys, data, filteredData: data, columns })
         } catch (e) {
           console.error("error making json:", payload.url)
           console.error(e)
@@ -34,10 +34,11 @@ class FileTable extends Component {
   }
 
   getColumns(keys, data, fields) {
-    let titles = fields.length ? fields[0].split(', ') : keys
+    let titles = fields.Headings ? fields.Headings.split(', ') : keys
     // let numberFields = []
     let columns = keys.map((field, i) => {
       const title = titles[i] || field
+      let widthGrow = 1
       if (field.match('url')) {
         let textField = field.replace('url', 'label')
         data.forEach(el => el[textField] = domainFromUrl(el[field]))
@@ -49,31 +50,60 @@ class FileTable extends Component {
           sorter: 'string'
         }
       }
+      if (title === 'Embassy') {
+        widthGrow = 2
+      }
       switch (field) {
         case 'images':
         case 'year':
           return { title, field: field.toLowerCase(), sorter: 'number' }
         default:
-          return { title, field: field.toLowerCase(), sorter: 'string' }
+          return { title, field: field.toLowerCase(), sorter: 'string', widthGrow }
       }
     })
     return columns
   }
 
+  updateFilter(q) {
+    const { keys, data } = this.state
+    if (!q.length) {
+      this.setState({ q, filteredData: data })
+    } else {
+      let qRe = new RegExp('(' + q.replace(/\s+/g, ' ').trim().replace(' ', '|') + ')', 'gi')
+      let filteredData = data.filter(row => keys.some(key => row[key].match(qRe)))
+      this.setState({ q, filteredData })
+    }
+  }
+
   render() {
+    const { payload } = this.props
+    const { q, columns, data, filteredData } = this.state
     if (!this.state.data.length) {
       return <Loader />
     }
+    const fn = payload.url.split('/').pop()
     return (
-      <ReactTabulator
-        columns={this.state.columns}
-        data={this.state.data}
-        options={{
-          height: Math.min(37 * this.state.data.length + 29, 311),
-          layout: 'fitColumns',
-          placeholder: 'No Data Set',
-        }}
-      />
+      <div className='citationBrowser'>
+        <div className='citationHeader'>
+          <input
+            type="text"
+            value={q}
+            onChange={e => this.updateFilter(e.target.value)}
+            className='q'
+            placeholder='Enter text to search data'
+          />
+          <a className='download' href={payload.url} filename={fn}>Download CSV</a>
+        </div>
+        <ReactTabulator
+          columns={columns}
+          data={filteredData}
+          options={{
+            height: Math.min(37 * data.length + 29, 311),
+            layout: 'fitColumns',
+            placeholder: 'No Data Set',
+          }}
+        />
+      </div>
     )
   }
 }
diff --git a/client/table/tabulator.css b/client/table/tabulator.css
index 95768976..0ea81974 100644
--- a/client/table/tabulator.css
+++ b/client/table/tabulator.css
@@ -40,7 +40,7 @@
   max-width: 400px;
   margin-bottom: 10px;
   background-image: url(/assets/img/icon-search.png);
-  background-position: 380px center;
+  background-position: 378px center;
   background-repeat: no-repeat;
   box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
   border: 0;
@@ -53,17 +53,21 @@
   align-items: flex-start;
   justify-content: space-between;
 }
-span.download {
+.download {
   display: block;
   font-size: 13px;
   color: #ddd;
   cursor: pointer;
   background: #333;
-  padding: 5px 8px;
+  padding: 5px 8px 5px 8px;
   border-radius: 5px;
   transition: all 0.2s;
+  border: 0 !important;
 }
-.desktop span.download:hover {
+.content a.download {
+  padding: 5px 8px 5px 8px;
+}
+.desktop .download:hover {
   color: #fff;
   background: #666;
 }
\ No newline at end of file