JSFiddle - React, Tailwind, and code Playground

HTML

<html>

<head>
	<title>Parcel Sandbox</title>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="https://cdn.grapecity.com/wijmo/5.20182.524/styles/wijmo.min.css" rel="stylesheet" />
	<script src="https://cdn.grapecity.com/wijmo/5.20182.524/controls/wijmo.min.js"></script>
	<script src="https://cdn.grapecity.com/wijmo/5.20182.524/controls/wijmo.input.min.js"></script>
	<script src="https://cdn.grapecity.com/wijmo/5.20182.524/controls/wijmo.grid.min.js"></script>

	<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
	<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

	<link href="src/styles.css" rel="stylesheet" />
</head>

<body>
  <p>
  Double click on a cell in country column
  </p>
	<div id="theGrid">
	</div>
	
	<div id="dialog" style="display: none">
		<div class="wj-dialog-header">
			Cell Edit: Country
		</div>
		<div class="wj-dialog-body">
			<div class="editor"></div>
		</div>
		<div class="wj-dialog-footer">
			<button class="btn btn-default wj-hide-ok">OK</button>
			<button class="btn btn-default wj-hide-cancel">Cancel</button>
		</div>
	</div>
	<script type="javascript" src="src/index.js">
	</script>
</body>

</html>

CSS

.wj-flexgrid {
  max-height: 450px;
}

#dialog {
  width: 450px;
}

#dialog .wj-dialog-body {
  height: 300px;
}

.wj-cell p:first-child {
  margin: 0px;
  padding-top: 3px;
  padding-bottom: 3px;
}

JavaScript

// import './style.css';
// document.body.onload = function() {
var grid;
let eDialog = new wijmo.input.Popup("#dialog", {
  modal: true
});
let textEditor = new Quill(eDialog.hostElement.querySelector(".editor"), {
  theme: "snow"
});
window["edt"] = textEditor;
grid = new wijmo.grid.FlexGrid("#theGrid", {
  itemsSource: getData(50)
});
grid.columns[1].width = 150;
grid.columns[1].isContentHtml = true;
grid.columns[1].isReadOnly = true;
grid.columns[1].multiLine = true;
grid.hostElement.addEventListener("dblclick", e => {
  let htInfo = grid.hitTest(e);
  if (
    !htInfo.panel ||
    htInfo.panel.cellType != wijmo.grid.CellType.Cell ||
    htInfo.panel.columns[htInfo.col].binding != "country"
  ) {
    return;
  }

  let data = grid.getCellData(htInfo.row, htInfo.col);

  textEditor.setText("");
  textEditor.root.innerHTML = data;
  eDialog.show(true, e => {
    if (e.dialogResult == "wj-hide-ok") {
      updateCellContent(htInfo);
    }
  });
});

function updateCellContent(htInfo) {
  let newData = textEditor.root.innerHTML;
  grid.setCellData(htInfo.row, htInfo.col, newData);
  grid.autoSizeRow(htInfo.row, false);
}

function getCbData() {
  return "US,Germany,UK,Japan,Italy,Greece".split(",");
}

function getData(count) {
  // create some random data
  var countries = "<p>US</p>,<p>Ger<strong>ma</strong>ny</p>,<p>UK</p>,<p><i>Japan</i></p>,<p>Italy</p>,<p>Greece</p>".split(
      ","
    ),
    data = [];
  for (var i = 0; i < count; i++) {
    var condition = Boolean(Math.floor(Math.random() + 0.5));
    data.push({
      id: i,
      country: countries[i % countries.length],
      sales: Math.random() * 10000,
      checked: condition
    });
  }
  return data;
}
// };