Default Handsontable Demo

by mpusarla

HTML

<script src="http://handsontable.com/dist/jquery.handsontable.full.js"></script>
<link rel="stylesheet" href="http://handsontable.com/dist/jquery.handsontable.full.css">
<link rel="stylesheet" href="http://handsontable.com/demo/css/samples.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 item1 = {};
    item1.title = "Title 1 ";
    item1.description = "Desc 1";
    item1.text = "Text 1";
    
    
    var item2 = {};
    item2.title = "Title 2";
    item2.description = "Desc 2";
    item2.text = "Text 2";
        
    var myData = [];
    myData.push(item1);
    myData.push(item2);
    
    
   var myColumns = [
      {data: "title", renderer: "text"},
        {data: "description", renderer: 'text'},
            {data: "text", renderer: 'text'}
    ]

$("#exampleGrid").handsontable({
    data: myData,
    columns: myColumns,
    startRows: 5,
    startCols: 5,
    minSpareCols: 1,
    //always keep at least 1 spare row at the right
    minSpareRows: 1,
    //always keep at least 1 spare row at the bottom,
    rowHeaders: true,
    colHeaders: true,
    contextMenu: true
});