Handsontable Basic Example (100x10)

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.css">
<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;
}

.handsontable th, .handsontable td  {
  white-space: pre-line;
  word-wrap: keep-all;
  overflow-wrap: normal;
}

JavaScript

var container = document.getElementById('example');
var hot = new Handsontable(container, {
  data:  [
    ["2017-01-01", 0, "this is a long name", "null"],
    ["2017-01-02", 0, "this is a long name", "null"],
    ["2017-01-03", 0, "null", "this is a long name"],
    ["2017-01-04", 0, "null", "this is a long name"],
    ["2017-01-05", 0, "this is a long name", "null"],
    ["2017-01-06", 0, "null", "this is a long name"]
  ],
  colHeaders: ['A', 'this is a long name', 'C'],
  manualColumnResize: true,
  manualRowResize: true,
  rowHeaders: true
});