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' } })