Handsontable example

by handsoncode

HTML

<div id="example"></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

.handsontableInput {
	background: #1A42E8 !important;
	color: #FF5A12 !important;
}

Babel + JSX

class PasswordEditor extends Handsontable.editors.TextEditor {
	createElements(...args) {
  	super.createElements(...args);

    this.TEXTAREA = document.createElement('input');
    this.TEXTAREA.className = 'handsontableInput';

    this.TEXTAREA.setAttribute('type', 'password');

    this.textareaStyle = this.TEXTAREA.style;
    this.textareaStyle.backgroundColor = 'yellow !important';

    // Replace textarea with password input
    Handsontable.dom.empty(this.TEXTAREA_PARENT);
    this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);
  }
}

const container = document.getElementById('example');
const hot = new Handsontable(container, {
  data: [
  	[5, 5, 3],
    [6, 2, 5],
  ],
  licenseKey: 'non-commercial-and-evaluation',
  editor: PasswordEditor,
  rowHeaders: true,
  colHeaders: true,
});