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>
<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',
  beforeKeyDown: function(e) {
    if (e.key !== 'Enter') {
      document.querySelector('.print').innerHTML = `${this.getActiveEditor().TEXTAREA.value}${e.key}`
    } else {
      document.querySelector('.print').innerHTML = `${this.getActiveEditor().TEXTAREA.value}`
    }
  }
});