Ag featuregrid (#588)

add feature grid based on ag-grid

package.json

@@ -67,7 +67,9 @@
   "peerDependencies": {
     "antd": "~3.0",
     "ol": "~4.0",
-    "react": "~16.0"
+    "react": "~16.0",
+    "ag-grid": "~17",
+    "ag-grid-react": "~17"
   },
   "dependencies": {
     "@turf/turf": "5.1.6",
@@ -85,6 +87,8 @@
     "validator": "9.4.1"
   },
   "devDependencies": {
+    "ag-grid": "17.1.1",
+    "ag-grid-react": "17.1.0",
     "antd": "3.3.3",
     "babel-cli": "6.26.0",
     "babel-core": "6.26.0",
@@ -115,6 +119,7 @@
     "np": "2.20.1",
     "ol": "4.6.5",
     "react": "16.3.2",
+    "react-dom-factories": "1.0.2",
     "react-styleguidist": "7.0.8",
     "react-test-renderer": "16.3.2",
     "regenerator-runtime": "0.11.1",

src/Container/AgFeatureGrid/AgFeatureGrid.example.md

@@ -0,0 +1,113 @@
+This example demonstrates the usage of the AgFeatureGrid:
+
+```jsx
+const React = require('react');
+const PropTypes = require('prop-types');
+const OlMap = require('ol/map').default;
+const OlView = require('ol/view').default;
+const OlLayerTile = require('ol/layer/tile').default;
+const OlSourceOsm = require('ol/source/osm').default;
+const OlProj = require('ol/proj').default;
+const OlFormatGeoJson = require('ol/format/geojson').default;
+
+const federalStates = require('../../../assets/federal-states-ger.json');
+
+const format = new OlFormatGeoJson();
+const features = format.readFeatures(federalStates);
+
+class NameColumnRenderer extends React.Component {
+  render() {
+    const {
+      value
+    } = this.props;
+    return <a href={`https://en.wikipedia.org/wiki/${value}`}>{value}</a>;
+  }
+}
+
+NameColumnRenderer.propTypes = {
+  value: PropTypes.any
+};
+
+class MathRoundRenderer extends React.Component {
+  render() {
+    const {
+      value
+    } = this.props;
+    return Math.round(value);
+  }
+}
+
+MathRoundRenderer.propTypes = {
+  value: PropTypes.any
+};
+
+class AgFeatureGridExample extends React.Component {
+
+  constructor(props) {
+
+    super(props);
+
+    this.mapDivId = `map-${Math.random()}`;
+
+    this.map = new OlMap({
+      layers: [
+        new OlLayerTile({
+          name: 'OSM',
+          source: new OlSourceOsm()
+        })
+      ],
+      view: new OlView({
+        center: OlProj.fromLonLat([37.40570, 8.81566]),
+        zoom: 4
+      })
+    });
+  }
+
+  componentDidMount() {
+    this.map.setTarget(this.mapDivId);
+  }
+
+  render() {
+    return(
+      <div>
+        <AgFeatureGrid
+          features={features}
+          map={this.map}
+          enableSorting={true}
+          enableFilter={true}
+          enableColResize={true}
+          attributeBlacklist={['gml_id', 'USE', 'RS', 'RS_ALT']}
+          columnDefs={{
+            'GEN': {
+              headerName: 'Name',
+              cellRenderer: 'nameColumnRenderer'
+            },
+            'SHAPE_LENG': {
+              headerName: 'Length',
+              cellRenderer: 'mathRoundRenderer'
+            },
+            'SHAPE_AREA': {
+              headerName: 'Area',
+              cellRenderer: 'mathRoundRenderer'
+            }
+          }}
+          zoomToExtent={true}
+          selectable={true}
+          frameworkComponents={{
+            nameColumnRenderer: NameColumnRenderer,
+            mathRoundRenderer: MathRoundRenderer
+          }}
+        />
+        <div
+          id={this.mapDivId}
+          style={{
+            height: '400px'
+          }}
+        />
+      </div>
+    )
+  }
+}
+
+<AgFeatureGridExample />
+```