Default Handsontable Demo

by Luiz Vargas

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>Handsontable Stackoverflow Header Question</h2>

<div id="colouredGrid" class="dataTable"></div>
<br/>
<br/>
<br/>
<div id="headerGrid" class="dataTable"></div>

CSS

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

h2 {
    margin: 20px 0;
}

.handsontable th:nth-child(1){
    background-color:aquamarine;
    font-weight:bold;
}

span.headerBold{
    font-weight:bold;
}

JavaScript

var firstData = [
  ["Year", "Kia", "Nissan", "Toyota", "Honda"],
  ["2008", 10, 11, 12, 13],
  ["2009", 20, 11, 14, 13],
  ["2010", 30, 15, 12, 13]
];

$("#colouredGrid").handsontable({
  data: firstData,
  startRows: 4,
  startCols: 5,
  minSpareCols: 0,
  minSpareRows: 0,
  rowHeaders: false,
  //colHeaders: true,
  contextMenu: false,
  cells: function (row, col, prop) {
    var cellProperties = {};
    if (row === 0) {
      cellProperties.renderer = firstRowRenderer; 
    }
    return cellProperties;
  }
});

function firstRowRenderer(instance, td, row, col, prop, value, cellProperties) {
  Handsontable.renderers.TextRenderer.apply(this, arguments);
  td.style.fontWeight = 'bold';
  td.style.color = 'blue';
  td.style.background = '#CEC';
}