Default Handsontable Demo

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="example" class="dataTable"></div>

CSS

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

h2 {
    margin: 20px 0;
}

JavaScript

$(document).ready(function () {
var session;
    var colHeadings = ['A', 'B', 'C'];
    var data = [
        ['2009', 0, 2941555],
        ['2009', 0, 2941555]
        
    ],
        container = document.getElementById('example'),
        hot;
     
    hot = new Handsontable(container, {
        data: data,
        colHeaders: colHeadings,
       
         afterGetColHeader: function (col, TH) {
            // nothing for first column
            if (col == -1)
            {
                return;
            }
          }
          });
          
         
       $("th").dblclick(function (e) {
           e.preventDefault();
           var a = hot.getSelected();
          var b  = hot.getColHeader(a[1],a[2]);
            var headers = hot.getColHeader();
           var value;
           
          if($("th").find("input[name='id']").val())
          {
              value  = $("th").find("input[name='id']").val();
              headers[session] = value;
               session = a[1];
               headers[a[1]]="<input name='id' type='text' value="+b+"\>";
        hot.updateSettings({
                    colHeaders: headers
                });
          }
           else
           {
               session = a[1];
               headers[a[1]]="<input name='id' type='text' value="+b+"\>";
                     hot.updateSettings({
                    colHeaders: headers
                });
          $(this).find("input[name='id']").focus(); 
           }
               
        }); 
    
   
    
       
   $("th").change(function (e){
      e.preventDefault();
      var a = hot.getSelected();
       var b  = hot.getColHeader(a[1],a[2]);
            var headers = hot.getColHeader();
      var value  = $(this).find("input[name='id']").val();
       headers[a[1]] = value;
        hot.updateSettings({
                    colHeaders: headers
                });
});
    

   
   

});