diff --git a/src/components/table/index.js b/src/components/table/index.js
new file mode 100644
index 0000000..4cfef1a
--- /dev/null
+++ b/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 (
+
+
+ {({ width, height }) => {
+ const totalHeight = rowHeight * rowLength
+ const overflow = totalHeight > height
+ const columnWidth = overflow ? (width - this.scrollbarWidth) / columns.length
+ : width / columns.length
+ return
+ {columns.map(column => (
+
+ ))}
+
+ }}
+
+
+ )
+ }
+}
+
+export default TableView
diff --git a/src/containers/index_route.js b/src/containers/index_route.js
index 4f8d93a..4c16b80 100644
--- a/src/containers/index_route.js
+++ b/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
}]
}
diff --git a/src/containers/top_bar.js b/src/containers/top_bar.js
index 731014c..0cd4545 100644
--- a/src/containers/top_bar.js
+++ b/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'
}
})