More than 1 year has passed since last update.

HandsontableのcolHeaderを見た目だけ上書きする

Posted at 2023-10-25

##やりたいこと
・後段の処理で使うので、colHeaderの値は英語表記のままにしたい
・ユーザーに見える部分のcolHeaderは日本語表記にしたい

##実現方法
CSSのbeforeで何とかする。本当はjavascriptで変更したりできるならそうしたい。

##初期状態

<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel = "stylesheet" href= "https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css">
    <title>Document</title>
</head>
<body>
    <div id = "container"></div>
    <script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>   
</body>
<script>
    var data = [
        ['Apple', 200, 5],
        ['Orange', 100, 10],
        ['Grape', 200, 3],
    ];
    var colHeaders = ['fruit', 'price', 'num'];
    container = document.getElementById('container');
    var hot = new Handsontable(container, {
        data : data,
        licenseKey:'non-commercial-and-evaluation',
        colHeaders: colHeaders,
        rowHeaders: true,
    });
</script>
</html>

##cssを編集する

/*元のHeaderを透明にする*/
.handsontable thead th{
    color: transparent;
}

appearance: none;だとセルのスタイルごと消えるので、既存のヘッダーの文字だけを透明にします。

/*ユーザーに見せたいHeaderを作る*/
.handsontable thead th:not(:nth-child(1)){
    color: #333;
}
.handsontable thead th:nth-child(2)::before{
    content: "果物";
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.handsontable thead th:nth-child(3)::before{
    content: "値段";
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.handsontable thead th:nth-child(4)::before{
    content: "個数";
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

nth-child(1)は縦列と横列が交わっている場所でデータが無いので、そこを飛ばしてcolHeaderを上書きします。
contentの中にcolHeaderに表示したい内容を書いています。
また、文字がセルの中央に来るようにしています。

##最終結果

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel = "stylesheet" href= "https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css">
    <title>Document</title>
    <style>
        /*元のHeaderを透明にする*/
        .handsontable thead th{
            color: transparent;
        }
        /*ユーザーに見せたいHeaderを作る*/
        .handsontable thead th:not(:nth-child(1)){
            color: #333;
        }
        .handsontable thead th:nth-child(2)::before{
            content: "果物";
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }
        .handsontable thead th:nth-child(3)::before{
                content: "値段";
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100%;
        }
        .handsontable thead th:nth-child(4)::before{
                content: "個数";
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100%;
        }
    </style>
</head>
<body>
    <div id = "container"></div>
    <script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>   
</body>
<script>
    var data = [
        ['Apple', 200, 5],
        ['Orange', 100, 10],
        ['Grape', 200, 3],
    ];
    var colHeaders = ['fruit', 'price', 'num'];
    container = document.getElementById('container');
    var hot = new Handsontable(container, {
        data : data,
        licenseKey:'non-commercial-and-evaluation',
        colHeaders: colHeaders,
        rowHeaders: true,
    });
</script>
</html>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up