1 files changed, 45 insertions, 15 deletions
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>
     )
   }
 }