CODEWITHSUNDEEP
javascripthandsontable
opticyclic
opticyclic

Reputation: 8116

How Do I Format The Column Headers In Handsontable?

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';
}

Upvotes: 1

Views: 10628

Answers (2)

ZekeDroid
ZekeDroid

Reputation: 7209

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!

Upvotes: 1

opticyclic
opticyclic

Reputation: 8116

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.net/2z7kboc5/16/

Upvotes: 2

Related Questions