Handsontable example

by Sagar Bendale

HTML

<div id="hot"></div>

CSS

</style><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/handsontable-pro@latest/dist/handsontable.full.min.css"><link rel="stylesheet" type="text/css" href="https://handsontable.com/static/css/main.css"><script src="https://cdn.jsdelivr.net/npm/handsontable-pro@latest/dist/handsontable.full.min.js"></script>

JavaScript

var arr = Array.apply(null, {
  length: 10000
}).map(Function.call, Math.random)
var hotElement = document.querySelector('#hot');
var hotElementContainer = hotElement.parentNode;
var hotSettings = {
  data: {},
  minSpareRows: 100,
  columns: [{
      data: 'id',
      type: 'numeric',
      width: 40
    },
    {
      source: arr,
      type: 'autocomplete',
      strict: true
    }
  ],
  stretchH: 'all',
  width: 806,
  autoWrapRow: true,
  height: 487,
  maxRows: 22,
  manualRowResize: true,
  manualColumnResize: true,
  rowHeaders: true,
  colHeaders: [
    'ID',
    'Number'
  ],
  manualRowMove: true,
  manualColumnMove: true,
  contextMenu: true,
  filters: true,
  dropdownMenu: true,
  afterSelection: function(r, c, e) {
  console.log(this)
    this.alter('remove_row', r, 1);
    console.log(r);
  }
};
var ht = new Handsontable(hotElement, hotSettings);