HT 12.0

by Gabriel Vazquez

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.css">
<br>
<div id="hot"></div>

CSS

#output {
  color: #00F;
}
/* currentHeaderClassName */
.column-header--highlight {

}
/* activeHeaderClassName */
.column-header--cell-highlight {
  background-color: #CCC !important;
}
/* .ht__highlight
.ht__active_highlight */

JavaScript

const dataObject = [
	[0, 'foo_00', 'bar0', 'baz0' ],
  [1, 'foo_01', 'bar1', 'baz1' ],
  [2, 'foo_02', 'bar2', 'baz2' ],
  [4, 'foo_03', 'bar3', 'baz3' ]
];
const hotElement = document.querySelector('#hot');
const hotElementContainer = hotElement.parentNode;
let data = dataObject;
const hotSettings = {
	licenseKey: 'non-commercial-and-evaluation',
  data,
  currentHeaderClassName: 'column-header--highlight',
  activeHeaderClassName: 'column-header--cell-highlight',
  columns: [
    {
      name: 'id',
      type: 'numeric',
      width: 40
    },
    {
      name: 'foo',
      type: 'text'
    },
    {
      name: 'bar',
      type: 'text'
    },
    {
      name: 'baz',
      type: 'text'
    }
  ],
  stretchH: 'all',
  width: 806,
  autoWrapRow: true,
  height: 487,
  maxRows: 22,
  rowHeaders: true,
  colHeaders: [
    'ID',
    'Foo',
    'Bar',
    'Baz'
  ],
  manualRowMove: false,
  manualColumnMove: true,
  columnSorting: true,
  afterSelectionEnd() {
    const highlightedColumnHeaderEl = document.querySelector('.column-header--highlight');
    if (highlightedColumnHeaderEl) {
	    console.log(highlightedColumnHeaderEl.className);
      const outputEl = document.querySelector('#output');
      outputEl.innerHTML = highlightedColumnHeaderEl.className;
    }
  },
};

const hot = new Handsontable(hotElement, hotSettings);

const buttonEl = document.querySelector('#toggle');
buttonEl.addEventListener('click', () => {
	if (data.length) {
	  data = []
  } else {
    data = dataObject;
  }
	hot.loadData(data);
});