javascriptjqueryhtmlcsshandsontable

How to highlight the selected row and header of handsontable?

As a requirement I want to highlight the row and column header of a selected cell in handsontable, basically I want to change the background color of the corresponding header on click of a cell.

Handsontable has built in property which highlights the whole row on click of a cell

var
    data = [
      ['', 'Kia', 'Nissan', 'Toyota', 'Honda'],
      ['2013', 10, 11, 12, 13],
      ['2014', 20, 11, 14, 13],
      ['2015', 30, 15, 12, 13]
    ],
    container = document.getElementById('example1'),
    hot;

  hot = Handsontable(container, {
    data: data,
    minRows: 5,
    minCols: 6,
    currentRowClassName: 'currentRow',
    currentColClassName: 'currentCol',
    rowHeaders: true,
    colHeaders: true
  });

  hot.selectCell(2,2);

But I just want to highlight the headers by changing its background color, is there any way to achieve it using custom renderer?

Solution

  • changing the CSS Code in your example from .highlight { … } to th.highlight { … } should do the trick. At the end table headers in Handsontable are just elements.