This is an example containing a property grid
import React from 'react';
import { render } from 'react-dom';
import OlFeature from 'ol/feature';
import OlGeomPoint from 'ol/geom/point';
import {
PropertyGrid
} from '@terrestris/react-geo';
//
// ***************************** SETUP *****************************************
//
const feature = new OlFeature({
geometry: new OlGeomPoint([19.09, 1.09]),
});
const attributeObject = {
foo: 'bar',
foo2: 'bar2',
foo3: 'bar3',
foo9: 'bar9',
name: 'Point'
};
feature.setProperties(attributeObject);
feature.setId(1909);
const attributeNames = {
foo: 'A',
foo2: 'nice',
foo9: 'example'
};
//
// ***************************** SETUP END *************************************
//
render(
<div className="example-block">
<h2>PropertyGrid without a filter:</h2>
<PropertyGrid
feature={feature}
/>
<br />
<h2>PropertyGrid with filtered attributes (foo and foo9 only):</h2>
<PropertyGrid
feature={feature}
attributeFilter={['foo', 'foo9']}
style={{width: '50%'}}
/>
<br />
<h2>PropertyGrid with different column width (70 % width for column name / 30 % width for column value):</h2>
<PropertyGrid
feature={feature}
attributeNameColumnWidthInPercent={70}
style={{width: '50%'}}
/>
<br />
<h2>PropertyGrid with column name mapping:</h2>
<PropertyGrid
feature={feature}
attributeFilter={['foo', 'foo2', 'foo9', 'name']}
attributeNames={attributeNames}
style={{width: '50%'}}
/>
</div>,
document.getElementById('exampleContainer')
);