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">
<button id="btn">Test</button>
    <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

let data = [
    {a:'', b:'Tesla', c:'Volvo', d:'Toyota', e:'Ford'},
];

function doTest(){
    hot.updateData([
        {a:'1', b:'2', c:'3', d:'4', e:'5'},
    ]);
}

const container = document.getElementById('example');
const btn = document.getElementById('btn');
btn.addEventListener("click", doTest);

var hot = new Handsontable(container, {
  data: data,
  minSpareCols: 1,
  minSpareRows: 1,
  rowHeaders: true,
  colHeaders: true,
  contextMenu: true,
  nestedRows: false,
  licenseKey: 'non-commercial-and-evaluation'
});