Handsontable example

by handsoncode

HTML

<div class="tables">
  <div id="example1"></div>
  <div id="example2"></div>
</div>
<div class="changelog_tab">
  <p class="changelog">Changelog</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.css">

CSS

* {
  font: 12px sans-serif;
}
.currentRow {
    background: RGBA(181, 181, 181, 0.3) !important;
}
#example1, #example2 {
  float: left;
  margin-left: 1em;
}
#example1 {
  margin-top: 14px;
}
.changelog {
  width: 80%;
  min-height: 50px;
  max-height: 200px;
  overflow: auto;
  border: 1px solid pink;
  padding: 5px;
}
.changelog_tab {
  margin: 1em
}

JavaScript

const changelog = document.querySelector('.changelog');
let hot2;
const container = document.getElementById('example1');
const hot = new Handsontable(container, {
  data: [
    {
      car: "VW Passat",
      year: 2001,
      price_usd: 7000,
    },
    {
      car: "Hyundai Coupe",
      year: 2002,
      price_usd: 8330,
    },
    {
      car: "VW Polo",
      year: 1996,
      price_usd: 3900,
    },
  ],
  licenseKey: 'non-commercial-and-evaluation',
  colHeaders: true,
  rowHeaders: true,
  readOnly: true,
  columns: [
    {
      data: 'car',
      title: 'Car',
    },
    {
      type: 'numeric',
      data: 'year',
      title: 'Year',
    },
    {
      type: 'numeric',
      data: 'price_usd',
      title: 'Price USD',
      numericFormat: {
        pattern: {
        	output: 'currency',
          mantissa: 2,
        },
        culture: 'en-US', // this is the default culture, set up for USD
      }
    },
  ],
  outsideClickDeselects: false,
  afterSelection(r, c, r2, c2) {
    if (r === 0) {
      hot2.updateSettings({
        data: [
          ['orange', true],
          ['red', false],
          ['blue', false],
        ],
      });
    } else if (r === 1) {
      hot2.updateSettings({
        data: [
          ['black', true],
        ],
      });
    } else if (r === 2) {
      hot2.updateSettings({
        data: [
          ['green', false],
          ['blue', false],
          ['red', true],
          ['black', true],
        ],
      });
    }
  },
  currentRowClassName: 'currentRow',
  width: '100%',
});

const container2 = document.getElementById('example2');
hot2 = new Handsontable(container2, {
  data: Handsontable.helper.createSpreadsheetData(2, 2),
  licenseKey: 'non-commercial-and-evaluation',
  colHeaders: true,
  columns: [
    {	
    	title: 'Chassis color',
      readOnly: true,
    },
    {
      type: 'checkbox',
    	title: 'ABS',
    },
  ],
  afterChange: function(changes, src) {
    if (!changes) {
    	return;
    }
   ...