JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="propertiestable">
</body>

CSS

.datatable
                {
                font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
                font-size: 12px;
                background: #fff;
                margin: 45px;
                width: 480px;
                border-collapse: collapse;
                text-align: left;
                }
                th
                {
                font-size: 14px;
                font-weight: normal;
                color: #039;
                padding: 10px 8px;
                border-bottom: 2px solid #6678b1;
                }
                td
                {
                border-bottom: 1px solid #ccc;
                color: #669;
                padding: 6px 8px;
                }
                tbody tr:hover td
                {
                color: #009;
                }

JavaScript

var datapointsjson = {
        "type": "FeatureCollection",
        "features": [{
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    136.33, -31.5
                ]
            },
            "properties": {
                "regno": "R123456",
                "taxon": "genus1 species1",
                "sitecode": "",
                "nearestnamedplace": "FREELING ISLAND",
                "preciselocation": "south coast",
                "collection": "Herpetology"
            }
        }, {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    137.07, -36.23
                ]
            },
            "properties": {
                "regno": "R654185",
                "taxon": "genus2 species2",
                "sitecode": "",
                "nearestnamedplace": "Neptune Island",
                "preciselocation": "Middle of island",
                "collection": "Herpetology"
            }
        }, {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    142.0358, -38.7719
                ]
            },
            "properties": {
                "regno": "R6528445",
                "taxon": "genus3 species3",
                "sitecode": "TT02",
                "nearestnamedplace": "Woolongong",
                "preciselocation": "5 km N",
                "collection": "Herpetology"
            }
        }, {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    137.6914, -32.2789
                ]
            },
            "properties": {
                "regno": "R654987",
                "taxon": "genus4 species4",
                "sitecode": "IL0601",
                "nearestnamedplace":...