Handsontable example

HTML

<script src="https://cdn.jsdelivr.net/npm/handsontable@11.0/dist/handsontable.full.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@11.0/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>

CSS

.handsontable .htUpper {
  font-weight: bold;
}

JavaScript

function isUpper(str) {
  return str === str.toUpperCase();
}


const container = document.querySelector('#example1');
const hot = new Handsontable(container, {
  data: [
  {
      car: 'Mercedes A 160',
      year: 2017,
      price_usd: 7000,
      price_eur: 7000
    },
    {
      car: 'Citroen C4 Coupe',
      year: 2018,
      price_usd: 8330,
      price_eur: 8330
    },
    {
      car: 'Audi A4 Avant',
      year: 2019,
      price_usd: 33900,
      price_eur: 33900
    },
    {
      car: 'Opel Astra',
      year: 2020,
      price_usd: 5000,
      price_eur: 5000
    },
    {
      car: 'BMW 320i Coupe',
      year: 2021,
      price_usd: 30500,
      price_eur: 30500
    }
  ],
  colHeaders: ['Car', 'Year', 'Price ($)', 'Price (€)'],
  columnSorting: true,
  height: 'auto',
  licenseKey: 'non-commercial-and-evaluation',
  afterChange: function(changes, src) {
    if (changes) {
    let newValue = changes[0][3];
			if(isUpper(newValue)){
      	this.setCellMeta(changes[0][0], this.propToCol(changes[0][1]), 'className', 'htUpper');
        this.render()
      }
    }
  }
});