Handsontable example

HTML

<script src="https://cdn.jsdelivr.net/npm/handsontable@16.1/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@16.1/styles/handsontable.min.css" /> 
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@16.1/styles/ht-theme-main.css" /> 
<script src="https://handsontable.com/docs/scripts/fixer.js"></script>

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

JavaScript

class MyEditor extends Handsontable.editors.TextEditor {

  getValue() {
  let val = this.TEXTAREA.value.slice(0, -1);
  val = val/100;
    return val //this has to change this alteration back how it looks in data
  }

  setValue(value) {
  let val = value * 100;
   this.TEXTAREA.value = val.toFixed() + '%'; //changes how the editor value looks
  }
}

function myPercentageRenderer(instance, td, row, col, prop, value, cellProperties) {
  Handsontable.renderers.NumericRenderer.apply(this, arguments);
  let val = value * 100;
  td.textContent = `${val.toFixed()} %`
}

const container = document.querySelector('#example1');
const hot = new Handsontable(container, {
  data: [
    { car: 'Mercedes A 160', year: 2017, price_usd: 7000.50, price_eur: 7000, percent: 0.03, finalPrice: `=C1 - C1*D1`},
    { car: 'Citroen C4 Coupe', year: 2018, price_usd: 8330, price_eur: 8330, percent: 0.55, finalPrice: `=C2 - C2*D2`},
    { car: 'Audi A4 Avant', year: 2019, price_usd: 33900, price_eur: 33900, percent: 0.09, finalPrice: `=C3 - C3*D3`}
  ],
  colHeaders: ['Car', 'Year', 'Price ($)', 'Discount', 'Final Price ($)'],
  themeName: 'ht-theme-main',
  columnSorting : true,
  formulas: {
  	engine: HyperFormula
  },
  height: 'auto',
  autoRowSize: true,
  autoColumnSize: true, 
  licenseKey: 'non-commercial-and-evaluation',
  columns: [
    {
      data: 'car'
      // 1st column is simple text, no special options here
    },
    {
      data: 'year',
      type: 'numeric'
    },
    {
      data: 'price_usd',
      type: 'numeric',
      numericFormat: {
        pattern: '$ 0.00',
        culture: 'es-ES' // this is the default culture, set up for USD
      },
    },
    {
      data: 'percent',
      editor: MyEditor,
      renderer: myPercentageRenderer
    },
    {
    	data: 'finalPrice',
      type: 'numeric',
      numericFormat: {
        pattern: '$ 0.00',
        culture: 'es-ES' // this is the default...