[Work in progress] Table view

src/components/table/index.js

@@ -0,0 +1,66 @@
+import React from 'react'
+import Table from 'react-virtualized/dist/commonjs/Table/Table'
+import Column from 'react-virtualized/dist/commonjs/Table/Column'
+import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer'
+import getScrollBarWidth from 'get-scrollbar-width'
+
+require('react-virtualized/styles.css')
+
+const rowHeight = 30
+
+class TableView extends React.Component {
+  shouldComponentUpdate (nextProps) {
+    return nextProps.filteredFeatures !== this.props.filteredFeatures
+  }
+
+  componentWillMount () {
+    this.scrollbarWidth = getScrollBarWidth()
+  }
+
+  getColumns () {
+    const { filteredFeatures } = this.props
+    const featureWithProperties = filteredFeatures.find(d => d.hasOwnProperty('properties'))
+    if (!featureWithProperties) { return [] }
+    return Object.keys(featureWithProperties.properties)
+  }
+
+  render () {
+    const { filteredFeatures } = this.props
+    const rowGetter = ({ index }) => filteredFeatures[index].properties
+    const rowLength = filteredFeatures.length
+    const columns = this.getColumns()
+    return (
+      <div style={{width: '100%', height: '100%', position: 'absolute'}}>
+        <AutoSizer>
+          {({ width, height }) => {
+            const totalHeight = rowHeight * rowLength
+            const overflow = totalHeight > height
+            const columnWidth = overflow ? (width - this.scrollbarWidth) / columns.length
+              : width / columns.length
+            return <Table
+              disableHeader={false}
+              ref='table'
+              headerHeight={rowHeight}
+              height={height}
+              rowCount={filteredFeatures.length}
+              rowGetter={rowGetter}
+              rowHeight={rowHeight}
+              width={width}
+            >
+              {columns.map(column => (
+                <Column
+                  label={column}
+                  key={column}
+                  dataKey={column}
+                  width={columnWidth}
+                />
+              ))}
+            </Table>
+          }}
+        </AutoSizer>
+      </div>
+    )
+  }
+}
+
+export default TableView

src/containers/index_route.js

@@ -14,6 +14,7 @@ import Settings from '../components/settings'
 import MapView from '../components/map'
 import ReportView from '../components/report'
 import MediaView from '../components/media'
+import TableView from '../components/table'
 
 const styles = {
   outer: {
@@ -90,6 +91,9 @@ IndexRoute.defaultProps = {
   }, {
     id: 'report',
     component: ReportView
+  }, {
+    id: 'table',
+    component: TableView
   }]
 }
 

src/containers/top_bar.js

@@ -63,6 +63,11 @@ const messages = defineMessages({
     id: 'topbar.report',
     defaultMessage: 'Report',
     description: 'Report tab name'
+  },
+  table: {
+    id: 'topbar.table',
+    defaultMessage: 'Table',
+    description: 'Table tab name'
   }
 })