Handsontable Basic Example (100x10)

HTML

<script src="https://handsontable.com/bower_components/handsontable/dist/handsontable.full.js"></script>
<link rel="stylesheet" href="https://handsontable.com/bower_components/handsontable/dist/handsontable.full.css">
<h2>Checkboxes don't check</h2>
<p>
Head to <a href="https://handsontable.com" target="_blank">handsontable.com</a> to learn more about Handsontable.
</p>

<div id="example"></div>

CSS

body {   
  margin: 20px 30px;
  font-size: 13px;
  font-family: 'Open Sans', Helvetica, Arial;
}

a {
  color: #34A9DC;
  text-decoration: none;
}

p {
  margin: 5px 0 20px;
}

h2 {
  margin: 20px 0 0;
  font-size: 18px;
  font-weight: normal;
}

JavaScript

class CustomAttributesEditor extends Handsontable.editors.BaseEditor {
    /**
    * Initializes editor instance, DOM Element and mount hooks.
    */

    // constructor (props) {
    //     super(props)
    // }

    prepare(row, col, prop, td, originalValue, cellProperties) {
        // Invoke the original method...
        super.prepare(row, col, prop, td, originalValue, cellProperties);

        td.innerHTML = '';

        this.AttributeNames = ['Attr1', 'Attr2'];
        this.ctrls = {};
        let parsedValue = JSON.parse(Handsontable.helper.stringify(originalValue));

        // Create checkbox controls
        for (let i = 0; i < this.AttributeNames.length; i++) {
            let AttributeName = this.AttributeNames[i];

            let span = document.createElement('span');
            span.style.whiteSpace = 'nowrap';

            let checkbox = document.createElement('input');
            this.ctrls[AttributeName] = checkbox;
            checkbox.type = 'checkbox';

            if (parsedValue[AttributeName] == 'yes') {
                checkbox.checked = true;
            }
            
            let label = document.createElement('label');
            label.innerHTML = AttributeName;
            label.htmlFor = checkbox.id;

            span.appendChild(checkbox);
            span.appendChild(label);
            td.appendChild(span);
            td.appendChild(document.createElement('br'));
        }

        // Create a control that is shown/hidden when the "Attr2" checkbox is toggled
        let CustomAttributesAttr3SubDiv = document.createElement('div');
        var label = document.createElement('label');
        label.innerHTML = "Attr3 supplier:";
        CustomAttributesAttr3SubDiv.appendChild(label);
        
        var CustomAttributesAttr3 = document.createElement('input');
        if (parsedValue.hasOwnProperty('Attr3')) {
            CustomAttributesAttr3.value = parsedValue['Attr3'];
        }
        this.ctrls['Attr3'] =...