NocoBaseのテーブルブロックでヘッダー行を固定したい

こんにちは、柳澤です。

NocoBaseのテーブルブロックで大量のレコードを表示していると、スクロールしているうちに「今どの列を見ているんだっけ？」と分からなくなることはないでしょうか。

今回はテーブルブロックの「ブロックの高さ(Block height)」を設定することで、テーブルヘッダーを固定する方法を紹介します。

困っていたこと

テーブルブロックで「ブロックの高さ」を指定していない場合、ブロックの高さはレコード数に応じて伸び続けます。50件以上のレコードを表示しているブロックでは、ページ全体をスクロールして下の方のレコードを見ているうちに、テーブルヘッダーがどんどん上に流れて画面外に消えてしまいます。

このため、今見ている列がどの項目だったのか分からなくなり、確認のためにわざわざ上までスクロールし直す…という無駄な動作が発生します。

上記のように、ヘッダーが見えない状態でスクロールしていると、どの列を見ているのか非常に分かりづらいです。

「ブロックの高さ」を設定する

この問題は、テーブルブロックの設定にある「ブロックの高さ(Block height)」を指定することで解消できます。ブロックの高さを固定すると、ブロック内のレコードだけがスクロールするようになり、テーブルヘッダーが常に画面上部に固定表示されるようになります。

設定方法は簡単です。テーブルブロック右上のアイコンから設定メニューを開き、「ブロックの高さの設定」(v1)もしくは「Block height」(v2)を選択します。

メニューを選択すると、高さの指定方法を選べます。「高さを指定」（pxを入力）か、「全画面表示」から選択可能です。

高さを設定して保存すると、テーブルブロックの表示が変わります。

テーブルブロックのレコードだけがスクロールするようになり、テーブルヘッダーは常に固定表示されます。これで、何百件スクロールしてもどの列を見ているか迷うことがなくなりました。

px指定 or 全画面表示

「ブロックの高さ」はpx単位で固定値を指定することもできますが、指定した値はあくまで絶対値なので、利用者のモニターの解像度によって見え方が変わってしまいます。

たとえば大きめの高解像度モニターで確認しながら高さを決めてしまうと、解像度が低い（画面が縦に狭い）モニターで見た場合には、テーブルブロックが画面の大部分を占めてしまい、逆にスクロールしづらくなることがあります。

「全画面表示」であれば、ブロックのサイズが自動的に画面（ページ）と同じサイズとなります。

但し、「全画面表示」では他のブロックがある場合はその分高さが縮みます。
他に画面を占有するほど高いブロックがある場合は「px」単位で指定することをオススメします。

まとめ

NocoBaseのテーブルブロックで表示件数が多くなる場合は、「ブロックの高さ」を設定してテーブルヘッダーを固定しておくのがおすすめです。ちょっとした設定ですが、データを確認する際のストレスがかなり減ります。

まだ「ブロックの高さ」を設定していないテーブルブロックがあれば、ぜひお試しあれ。