Handsontable example

by handsoncode

HTML

<div id="example"></div>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.css">
<script src="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.js"></script>

CSS

.handsontable .abc {
  padding: 3px 0;
  border-top: 2px solid pink
}
.htDisabled .abc {
  color: #000;
}

Babel + JSX

const example = document.getElementById('example');
const hot = new Handsontable(example, {
  data: [
    ['', 'Kia', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
    ['2012', 10, 11, 12, 13, 15, 16],
    ['2013', 10, 11, 12, 13, 15, 16],
    ['2014', 10, 11, 12, 13, 15, 16],
    ['2015', 10, 11, 12, 13, 15, 16],
    ['2016', 10, 11, 12, 13, 15, 16]
  ],
  licenseKey: 'non-commercial-and-evaluation',
  rowHeaders: true,
  colHeaders: true,
  dropdownMenu: {
    items: {
      'make_read_only': {
        hidden() {
          // if first row, disable this option
          return this.getSelectedRangeLast().to.row === 1;
        }
      },
     	'col_left': {
        hidden() {
          // if first row, disable this option
          return this.getSelectedRangeLast().to.col === 0;
        }
      },
      'col_right': {
        hidden() {
          // if first row, disable this option
          return this.getSelectedRangeLast().to.col === this.countCols() - 1;
        }
      },
      'remove_col': {
        hidden() {
          // if first row, disable this option
          return this.getSelectedRangeLast().from.col !== this.countCols() - 1;
        }
      },
      'custom': {
        name: '<div class="abc"><input type="checkbox"> Sample</div>',
        callback() {
          console.log('Working');
        },
        isCommand: false
      }
    }
  }
});