【Handsontable】currentHeaderClassName カレントヘッダーのスタイル設定

f:id:coogi-se:20200303144312p:plain

Handsontable（ハンズオンテーブル）のカレントヘッダー（選択ヘッダー）のスタイルを変更する方法を紹介します。

カレントヘッダー（選択ヘッダー）のスタイルを変更するには、
currentHeaderClassNameというオプションを使用します。

`currentHeaderClassName`とは

現在選択されているすべての表示ヘッダーのクラス名。
デフォルト値： 'ht__highlight'

JavaScriptサンプル

$(function(){

  var data = [
    ["", "Ford", "Tesla", "Toyota", "Honda"],
    ["2017", 10, 11, 12, 13],
    ["2018", 20, 11, 14, 13],
    ["2019", 30, 15, 12, 13]
  ];

  var container = document.getElementById('handsonTable');

  var hot = new Handsontable(container, {
    data: data,

    // ヘッダー行を表示する
    rowHeaders: true,

    // ヘッダー列を表示する
    colHeaders: true,

    currentHeaderClassName: 'currentHeader',
  });

});

CSSサンプル

.currentHeader {
    background-color: rgb(75, 137, 255) !important;
}

カレントヘッダーのデフォルトクラス名がht__highlightなので、
currentHeaderClassNameを設定しなくてもCSSファイルに、 ht__highlightクラスを定義すれば適用されます。

coogi-memo.hatenablog.com

はしくれSEめも

SEに必要情報をめも程度に残していこうと思っています。

【Handsontable】currentHeaderClassName カレントヘッダーのスタイル設定

`currentHeaderClassName`とは

JavaScriptサンプル

CSSサンプル

関連記事

currentHeaderClassNameとは

JavaScriptサンプル

CSSサンプル

関連記事

`currentHeaderClassName`とは