Handsontable example

HTML

<script src="https://cdn.jsdelivr.net/npm/handsontable@11.1/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@11.1/dist/handsontable.full.min.css" /> 
<script src="https://handsontable.com/docs/8.3.2/components/numbro/dist/languages.min.js"></script>

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

JavaScript

let popValues = {
	'US-2020-POPULATION': 331449281,
  'GER-2020-POPULATION': 84221555
}

const container = document.querySelector('#example1');
const hot = new Handsontable(container, {
  data: [
   {id: 1, value: null}
  ],
  colHeaders: true,
  height: 'auto',
  licenseKey: 'non-commercial-and-evaluation',
  columns: [
    {
      readOnly: true,
      data: 'id'
    },
    {
     data: 'value',
     renderer: customRenderer
    }
  ]
});

function customRenderer(instance, td, row, col, prop, value, cellProperties) {
  Handsontable.renderers.TextRenderer.apply(this, arguments);
  if(value !== null && value !== ""){
  	td.innerHTML = popValues[value]
  }
}


setTimeout(function(){
	hot.setDataAtCell(0, 1, 'US-2020-POPULATION')
}, 2000)