Handsontable example

by handsoncode

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css">
<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
<div id="example1" class="hot handsontable htColumnHeaders"></div>

CSS

body {
  background: white;
  margin: 0;
  padding: 0;
  font-size:0.9em
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {

  function getCarData() {
    return [{
      car: "Mercedes A 160",
      year: 2011,
      price_usd: 7000,
      price_eur: 7000
    }, {
      car: "Citroen C4 Coupe",
      year: 2012,
      price_usd: 8330,
      price_eur: 8330
    }, {
      car: "Audi A4 Avant",
      year: 2013,
      price_usd: 33900,
      price_eur: 33900
    }, {
      car: "Opel Astra",
      year: 2014,
      price_usd: 5000,
      price_eur: 5000
    }, {
      car: "BMW 320i Coupe",
      year: 2015,
      price_usd: 30500,
      price_eur: 30500
    },
    {
      car: "Ford Focus",
      year: 2015,
      price_usd: 20500,
      price_eur: 20500
    },
    {
      car: "Kia Sportage",
      year: 2012,
      price_usd: 23400,
      price_eur: 23400
    },
     {
      car: "Volvo XC60",
      year: 2011,
      price_usd: 13400,
      price_eur: 13400
    }
    ];
  }

  var
    container = document.getElementById('example1'),
    hot;

  hot = new Handsontable(container, {
    data: getCarData(),
    stretchH: 'all',
    licenseKey: 'non-commercial-and-evaluation',
    manualColumnMove: true,
    colHeaders: ['Car', 'Year', 'Price ($)', 'Price (€)'],
    cells: function(row, col, prop) {
      var cellProperties = {};

      if (row === 1) {
        cellProperties.readOnly = true;
      }

      return cellProperties;
    },
  });

});