kintone

レコード詳細画面でサブテーブルのヘッダを固定する

どうもこんにちは!サボりにサボり倒しているTeruです。
言い訳はもうやめにしませんか。

さて、本日はレコード詳細画面でサブテーブルのヘッダを固定しよう!というテーマです。
サブテーブルは便利ですが、閲覧するときに縦に長いテーブルになるとヘッダが隠れてしまい、
何の項目だっけ…?となってしまうことがあります。

今回はそのヘッダを固定することで、スクロールしても項目名を表示し続けるカスタマイズです。
※公式非推奨のDOM操作を行うため、アップデート後に機能しなくなる可能性があります。

ヘッダーを固定するまでの道のり

①サブテーブルのtheadにクラス名を追加する

CSSでヘッダを固定するため、固定したいテーブルのヘッダ要素にクラス名を追加します。

theadの要素を取得する

var th = document.querySelector('.subtable-header-gaia'); // 一覧の要素取得

theadにクラス名を追加する

今回は「header_fixed」をクラス名に追加します。

 th.setAttribute("class", "subtable-header-gaia header_fixed");

ここまででjavascriptは終了。

②追加したクラスに対してCSSを設定する

先ほど追加した「header_fixed」に対して固定化するCSSを設定します。
また、kintoneのヘッダに被らないようにz-indexも併せて設定します。

@charset "UTF-8";
.header_fixed th {
  position: -webkit-sticky;
  position: sticky;
  top: 128px;
  z-index: 1;
}

完成版

コピペ用JavaScript(○○.jsの形式で適用)

jQuery.noConflict();
(function($) {
   "use strict";
   kintone.events.on("app.record.detail.show", function(event) {
       var th = document.querySelector('.subtable-header-gaia');
        th.setAttribute("class", "subtable-header-gaia header_fixed");
   });
})(jQuery);

コピペ用CSS(○○.cssの形式で適用)

@charset "UTF-8";
.header_fixed th {
  position: -webkit-sticky;
  position: sticky;
  top: 128px;
  z-index: 1;
}

ひっそりプラグイン化を検討中…