<div id="table"></div>
<script type="text/javascript">
//<![CDATA]

	(function($) {
	
	$(document).ready(function () {
		{% if data %}var data = {{ data|safe }};{% endif %}
	   	var headerRenderer = function (instance, td, row, col, prop, value, cellProperties) {
	  		Handsontable.TextCell.renderer.apply(this, arguments);
	  		$(td).css({
	    		'background':'#ccc',
	    		'font-weight':'bold'
	  		});
		};
		
		var normalRenderer = function (instance, td, row, col, prop, value, cellProperties) {
	  		Handsontable.TextCell.renderer.apply(this, arguments);
	  		$(td).css({
	    		'background':'white',
	    		'font-weight':'normal'
	  		});
		};

		var container = $("#table")
		var top = $("#id_headers_top").val();
		var left = $("#id_headers_left").val();
		var bottom = $("#id_headers_bottom").val();
		
		$("#id_headers_top").change(function(){
			top = $(this).val();
			rowCount = container.data('handsontable').rowCount
			container.data('handsontable').render()
		})
		$("#id_headers_bottom").change(function(){
			bottom = $(this).val();
			rowCount = container.data('handsontable').rowCount
			container.data('handsontable').render()
		})
		$("#id_headers_left").change(function(){
			left = $(this).val();
			rowCount = container.data('handsontable').rowCount
			container.data('handsontable').render()
		})

	  	container.handsontable({
		    {% if data %}data: data,{% endif %}
		    startRows: 5,
	    	startCols: 5,
	        rowHeaders: true,
	    	colHeaders: true,
		    contextMenu:true,
		    onChange:function(changes, source){
		    	$("#id_{{ name }}").val(JSON.stringify($(this).data('handsontable').getData()))
		    },
		    cells: function (row, col, prop) {
		    	if(row < Number(top)){
		    		return {type: {renderer: headerRenderer}};
		    	}
    			if (col < Number(left)) {
      				return {type: {renderer: headerRenderer}};
    			}
    			if(row + Number(bottom) >= rowCount){
    				return {type: {renderer: headerRenderer}};
    			}
    			return {type: {renderer: normalRenderer}};
  			}
		});  
		
		var rowCount = container.data('handsontable').rowCount
	});	 
})(jQuery); 


//]]>
</script>
<style type="text/css">
	#id_{{ name }} { display:none}
</style>