0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

m.Tableでgrowingを使ったヘッダの固定(できなかったので備忘録として)

Last updated at Posted at 2025-05-26

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へのコンポーネント変更

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?