JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.css" /> 

<div id="example" class="hot "></div><br/>

CSS

.dcc-link{
    color: #00f;
  }
  
  .dcc-link:hover{
    cursor: pointer;
    text-decoration: underline;
  }

JavaScript

var data = [
  ["Ferrari", "Ford", "Tesla", "Toyota", "Chevrolet"],
  ["2017", 10, 11, 12, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "],
  ["2018", 20, 11, 14, 13],
  ["2019", 30, 15, 12, 13]
];

var container = document.getElementById('example');
var hot = new Handsontable(container, {
  data: data,
  rowHeaders: true,
  colHeaders: ['ID', 'Full name', 'Position','Country', 'Comments'],
    cells: function(row, col) {
    const cellPrp = {};
    if (col === 4) {
      cellPrp.renderer= (instance, td, row, col, prop, value, cellProperties) => {
            const lookUpmore = document.createElement('a');
            lookUpmore.setAttribute('class', 'dcc-link');
            lookUpmore.innerText = 'Read More';
            lookUpmore.style.color = 'blue';
            const lookUpmore1 = document.createElement('a');
            lookUpmore1.setAttribute('class', 'dcc-link');
            lookUpmore1.innerText = 'Read More';
            lookUpmore1.style.color = 'blue';
            const lookUpless = document.createElement('a');
            lookUpless.setAttribute('class', 'dcc-link');
            lookUpless.innerText = 'Read Less';
            lookUpless.style.color = 'blue';
            Handsontable.dom.empty(td);           
            if(value && value.length > 10){
              td.innerHTML = `${value ? value.substring(0,50)+'...  ' : ''}`;
              td.appendChild(lookUpmore);
            }else{
              td.innerHTML = `${value ? value : ''}`;
            }
            if(value && value.length > 100){
              Handsontable.dom.addEvent(lookUpmore, 'click', () => {
                td.innerHTML = `${value ? value.substring(0,100)+'...  ' : ''}`;
                td.appendChild(lookUpmore1);
                instance.deselectCell();
              });
            }else if(value && value.length < 100){
              Handsontable.dom.addEvent(lookUpmore, 'click', () => {
     ...