JSFiddle - React, Tailwind, and code Playground

by fxi

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<table id="table" class="table" contenteditable=TRUE>
  <thead>
    <tr>

      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>

      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>

      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>

      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<button id="add">Add column</button>

<p id="result"></p>

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

JavaScript

const elTable = document.querySelector("#table");
const elResult = document.querySelector("#result");
const elButton = document.querySelector("#add");
elButton.addEventListener("click",addColumn);

  var tableRow, rowData = {};
  var headers = [];
  var data = [];

let gj = initGj();

elTable.addEventListener('input', update);
update();


function update(){
  data = tableToGeojson(elTable);
  elResult.innerText = JSON.stringify(data, 2, 2);
}


function tableToGeojson(table) {
  var data = tableToJson(table);
  data.forEach((r, i) => {
    gj.features[i].properties = r;
  })
  return gj;
}

//https://j.hn/html-table-to-json/
function tableToJson(table) {
var data = [];

  for (var i = 0; i < table.rows[0].cells.length; i++) {
    headers[i] = table.rows[0].cells[i].innerText;
  }
  for (var i = 1; i < table.rows.length; i++) {
    tableRow = table.rows[i];
    rowData = {};
    for (var j = 0; j < tableRow.cells.length; j++) {
      rowData[headers[j]] = tableRow.cells[j].innerText;
    }
    data.push(rowData);
  }
  return data;
}

function geojsonProps() {
  const features = gj.features || [];
  return features.map(f => f.properties)
}

function addColumn(e,name){

   if(!name){
     name =  window.prompt('New column name');
   }   
   const exists = headers.filter(h=>h===name).length > 0;
   if(exists){
      name = window.prompt(`Column ${name} already exists, choose`);
      return addColumn(null,name);
   }
   
   debugger;
   dat
   
   
   
   
   

}


function initGj() {
  return {
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "properties": {},
        "geometry": {
          "type": "Point",
          "coordinates": [
            29.267578125,
            51.72702815704774
          ]
        }
      },
      {
        "type": "Feature",
        "properties": {},
        "geometry": {
          "type": "Point",
          "coordinates": [
            41.6162109375,
            51.15178610143037
          ]
     ...