Handsontable example

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" /> 
<script src="https://handsontable.com/docs/8.3.2/components/numbro/dist/languages.min.js"></script>

<div id="example1" class="hot "></div>
<button class="btn">Print <code>myVariable</code></button>
<div class="print"></div>

JavaScript

let myVariable;

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 row = changes[0][0];
      let col = this.propToCol(changes[0][1]);
      if (row == 0 && col == 0) {
        myVariable = changes[0][3]
      }
    }
  }
});


document.querySelector('.btn').addEventListener('click', function() {
  document.querySelector('.print').innerHTML = myVariable
})