How do I format the column headers in handsontable?

I have a jsfiddle to demonstrate what I have so far. I can format the first row of data change the column headers to my titles but I can't seem to format the 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';
}

How do I format the column headers in handsontable?

I have a jsfiddle to demonstrate what I have so far. I can format the first row of data change the column headers to my titles but I can't seem to format the 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';
}

• javascript
• handsontable

Share Follow asked Oct 16, 2015 at 15:10 opticyclicopticyclic 8,1761919 gold badges9696 silver badges178178 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

The third option is that Handsontable has its own CSS for th that you need to override for cell formatting. If you want a single header to change you can modify the CSS like this:

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

The columns property also takes HTML in the title so you can add a span and style the text (but not the cell) in CSS.

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}

];

span.headerBold{
    font-weight:bold;
}

The jsfiddle has been updated http://jsfiddle/2z7kboc5/16/

For now, unfortunately, the custom renderers don't apply to headers. Instead you can do one of two things. The first is shown in the docs as an example of rendering HTMl in the headers:

colHeaders: function(col) {
    var txt;

    switch (col) {
        case 0:
            return '<b>Bold</b> and <em>Beautiful</em>';

        case 1:
            txt = "Some <input type='checkbox' class='checker' ";
            txt += isChecked ? 'checked="checked"' : '';
            txt += "> checkbox";

            return txt;
    }
}

What you see here is that they added a checkbox and some other HTML nodes. This is for dynamic changes to the header. If you don't care about the dynamic part, you can simply define your headers with HTML in them and it'll render correctly.

The second option, if you DO want dynamically changing headers, is to define your headers statically like mentioned previously, but update them with some event. For example, say you were validating your whole table and when a cell goes red, you want the header of that column to also be red. What you'd do is add an event in the afterChange Handsontable event. In here, you would call a function that would change the header like so:

var headers = ['First col', 'Second col', 'Third col'];

/**
 * A custom function that we created to dynamically update the content in the
 * header.
 * @param  {Array} cellsNotValidated    Array of column indeces not validated.
 */
function updateHeader(cellsNotValidated) {
    for (var i = 0; i <= headers.length - 1; i++) {
        // if i is in cellsNotValidated, it has to be red;
        var cellHeaderSelector = $(headers[i]);
        var cellNotValidated = cellsNotValidated.indexOf(i) >= 0;

        if (cellNotValidated) {
            headers[i] = cellHeaderSelector.addClass('notValidated');
        } else {
            headers[i] = cellHeaderSelector.removeClass('notValidated');
        }
    };

    // make sure to update your hot instance to trigger the re-render the grid
    hotInstance.updateSettings({
        colHeaders: headers
    });
}

With this, you now have all your headers tagged with a class name. You could then add css directly to the class and have a dynamic header definition. Hope this helps!