Default Handsontable Demo

by galvakojis

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: true,
  colHeaders: true,
  contextMenu: true,
  cells: function (row, col, prop) {
    var cellProperties = {};
    if (row === 0) {
      cellProperties.renderer = firstRowRenderer; 
    }
    return cellProperties;
  }
});

var secondData = [
  ["2008", -0.5, 2, 2.2, -7],
  ["2009", -0.1, 3, 4.2, -2.6],
  ["2010", 3, 2, -1, 1]
];

var secondHeader = [
  {title: "Year", type: 'text'},
  {title: "Kia", type: 'numeric', format: '0.0%', renderer: percentRenderer},
  {title: "<span class='headerBold'>Nissan</span>", type: 'numeric', format: '0.0%', renderer: percentRenderer},
  {title: "Toyota", type: 'numeric', format: '0.0%', renderer: percentRenderer},
  {title: "Honda", type: 'numeric', format: '0.0%', renderer: percentRenderer}
];

$("#headerGrid").handsontable({
  data: secondData,
  columns: secondHeader,
  minSpareCols: 0,
  minSpareRows: 0,
  rowHeaders: true,
  colHeaders: true,
  contextMenu: true
});

function percentRenderer (instance, td, row, col, prop, value, cellProperties) {
  Handsontable.renderers.NumericRenderer.apply(this, arguments);
  td.style.color = (value < 0) ? 'red' : 'green';
}

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