Default Handsontable Demo

HTML

<link rel="stylesheet" href="http://handsontable.com/demo/css/samples.css">
<script src="http://handsontable.com/dist/handsontable.full.js"></script>
<link rel="stylesheet" href="http://handsontable.com/dist/handsontable.full.css">
<h2>Default Handsontable Demo</h2>

<div id="exampleGrid" class="dataTable"></div>

CSS

body {
    background-color: white;
    margin: 20px;
}

h2 {
    margin: 20px 0;
}

JavaScript

var myData = [
{
id: 17,
page: null,
slot: null,
scope: null,
name: "test1",
value: "123",
where_set: null,
note: null,
example: null,
image: null,
collection_id: 72,
created_at: "2016-06-30T02:58:35.332Z",
updated_at: "2016-06-30T02:58:35.332Z",
ce_type: "type1"
},
{
id: 18,
page: null,
slot: null,
scope: null,
name: "test2",
value: "456",
where_set: null,
note: null,
example: null,
image: null,
collection_id: 72,
created_at: "2016-06-30T02:58:35.335Z",
updated_at: "2016-06-30T02:58:35.335Z",
ce_type: "type2"
},
{
id: null,
page: null,
slot: null,
scope: null,
name: null,
value: null,
where_set: null,
note: null,
example: null,
image: null,
collection_id: 72,
created_at: null,
updated_at: null,
ce_type: null
}],
    container = document.querySelector('#exampleGrid');

var hot = new Handsontable(container, {
    data: myData,
    startRows: 5,
    startCols: 13,
    //always keep at least 1 spare row at the right
    minSpareRows: 1,
    //always keep at least 1 spare row at the bottom,
    colHeaders: [
                "id",
                "page",
                "slot",
                "scope",
                "name",
                "value",
                "where_set",
                "note",
                "example",
                "image",
                "collection_id",
                "created_at",
                "updated_at",
                "ce_type"
                ],
    columns: [{data: "page"}, {data: "value"}],        
    contextMenu: true,
     hiddenColumns: {
    columns: [1],
    indicators: true
  }
});