SAPUI5でm.Tableをテーブルのヘッダを固定するためには一般的なUIのニーズです。
デフォルトでは縦スクロールがサポートされていない。
それならば、growing機能を活用しつつ、CSSで無理やりヘッダを固定できないか検討。
各カラムのcolumnに対してaddStyleClassでクラスを追加すれば、CSSで固定スタイルが指定できるのでは?と考えた。
js
oColumn.addStyleClass("fixed-header");
css
.fixed-header {
position: sticky;
top: 0;
background-color: white;
z-index: 10;
}
このようなスタイルを適用すれば動くのでは、と思いました。
現実:うまくいかない
調査を進めていくと、思ったようにヘッダだけにスタイルを当てることができないことがわかってきました。
主な理由:
m.Tableはgrowingを使っていてもネイティブの縦スクロールをサポートしていない(代わりに自前でアイテムを追加・描画している)。
addStyleClassでクラスを追加すると、DOM的にはColumnだけでなく、各Cell(セル)にもそのクラスが適用される。
このため、「ヘッダだけにposition: stickyを使って固定する」といった、Web標準のアプローチができません。
なぜこれは問題か
position: stickyを使って要素を固定する場合、その対象が正確に指定されていないと意図しない位置の要素まで固定されてしまうことになります。今回のように、cellにも同じクラスが入ってしまうと、テーブル全体が崩れる可能性があります。
結論:m.Tableでは現実的ではない
m.Tableの構造上、縦スクロールやヘッダ固定を「Web標準の方法で実現する」のは難しいです。
sap.ui.table.Table(グリッドテーブル)であればネイティブスクロールとヘッダ固定がサポートされているため、今回のような要件がある場合にはそちらの使用を検討すべきです。
代替案として考えられること
sap.ui.table.Tableへのコンポーネント変更