Handsontable example

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

let shop = [{

      name: "chocolate",
      status: "available",
      quantity: 4,
      cost: 200
    
  },
  {

      name: "milk 2%",
      status: "available",
      quantity: 5,
      cost: 170

  },
  {
      name: "chocolate bar",
      status: "not available",
      quantity: 11,
      cost: 150
  }
]


function myTooltipRenderer(instance, td, row, col, prop, value, cellProperties) {
  Handsontable.renderers.TextRenderer.apply(this, arguments);
  td.innerHTML = `${shop[row].status} with cost of ${shop[row].cost}`;
}

var example1 = document.getElementById('example1');
var hot = new Handsontable(example1, {
  data: shop,
  colWidths: 200,
  contextMenu: true,
  licenseKey: 'non-commercial-and-evaluation',
  colHeaders: true,
  columns: [
  	{data: 'name'}, {data: null, renderer: myTooltipRenderer}
  ]
});