JSFiddle - React, Tailwind, and code Playground

by Mehdi17

HTML

<script src="https://cdn.jsdelivr.net/npm/handsontable@12/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12/dist/handsontable.full.min.css">
<script src="https://cdn.jsdelivr.net/npm/handsontable@12/dist/languages/all.js"></script>


<div id="example1" class="hot handsontable"></div>

JavaScript

function myTooltipRenderer(instance, td, row, col, prop, value, cellProperties) {
  Handsontable.renderers.TextRenderer.apply(this, arguments);
  td.innerHTML = '';
  var divMain = document.createElement('DIV');
  divMain.title = 'This is dummy tooltip';
  divMain.innerHTML = value
  td.appendChild(divMain);
}

let ctrl = {
  colHeaders: [
    "Experiment",
    "Status",
    "Total Cost $K",
    "Duration weeks",
    "Start Date",
    "% Completed",
    "Issue",
    "Issue Type",
    "Issue Readiness",
  ],
  columns: [],
  data: [],
};

ctrl.data = [{
    "_id": "6297be5c76908d702e1d31bc",
    "name": "Modular design possible?",
    "ignorance": 6,
    "impact": 2,
    "type": "default",
    "isDfv": false,
    "isSwot": false,
    "score": 12,
    "cost": 10000,
    "resourceFte": 1,
    "totalCost": 10023.08,
    "duration": 8,
    "expName": "llOtheraisMod",
    "expId": "6297be5c76908d702e1d31bb",
    "issueColor": "#FFFFB7",
    "needToLearn": "Can we achieve a modular design that is cost effective to manufacture and fits within design specificationsm",
    "goingToLearn": "Seek partnerships with watch designers and manufacturers who specialize in modular design. Bring contract manufacturer into meetings with watch designers to gauge feasibility and manufacturing",
    "toMeasure": "Cost of goods sold based on design and ease of manufacturing for contract manufacturing partner",
    "successCriteria": "Per unit COGS must be <30% of average unit selling price",
    "status": "Backlog",
    "inIterationPlan": false,
    "startDate": "31-Dec-1969",
    "issueType": "Specify",
    "impactMappingList": [{
      "key": "unitCOGS",
      "display": "Unit Cost-of-Goods-and-Services",
      "reason": {
        "high": "",
        "low": ""
      }
    }],
    "abilityToLaunch": {
      "key": "default",
      "reason": {
        "optimism": "",
        "pessimism": ""
      }
    },
    "isPotentialShowStopper": false,
    "defined": 0
  },
  {
    "_id":...