Is there a way to customize the appearance of column headers in handsontable?
I have provided a jsfiddle example to showcase my current progress. While I am able to format the first row of data and change the column titles, I am facing difficulty in formatting the actual column headers.
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: "Nissan", 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: false,
colHeaders: true,
contextMenu: true,
cells: function (row, col, prop) {
var cellProperties = {};
if (row === 0) {
cellProperties.renderer = firstRowRenderer;
}
return cellProperties;
}
});
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';
}