Skip to content

hifiveのデータグリッドライブラリを使いこなす(2)「左カラムを固定化」

by : 2017/04/12

業務要件でグリッドを使うことは多々あります。そんな中で出てくる要望の一つにヘッダーの固定化があります。さらにこれが進むと、左側の幾つかのカラムだけは固定表示して欲しいと言われます。特に右側にカラムが伸びていく、横幅の大きいグリッドでそういったニーズが出てきます。

今回はそんな要望にも応えられるhifiveのグリッドの使い方を紹介します。

左カラム固定のデモ

実装すると次のようになります。

ヘッダープロパティを変更する

今回のベースはhifiveのデータグリッドライブラリを使いこなす(1)「グリッドの基本形」になります。その中にあるvisiblePropertiesを変更します。

元:

修正後:

header(ヘッダー)として id と name を指定しました。これでこの2つのカラムは左側に固定表示となります。残りと main キーで指定されたカラムは表示されますが、スクロール対象となります。

次に各カラムの表示幅を設定します。

sizeはピクセル指定になります。表示する情報に応じて調整します。なお、文字がはみ出しても隣のカラムには影響しません(overflow: hiddenになります)。

最後にダミーデータを入れる部分を変更します。これはダミーデータなので本来は不要です。

こうすることで、データが詰まったグリッドができあがりました。


左側のヘッダーを固定にして欲しいというニーズはよくあります。スタイルシートとJavaScriptで独自実装もできますが、柔軟に対応するのは難しいでしょう。hifiveのグリッドをぜひ役立ててください。

Edit fiddle – JSFiddle

banner_02

From → hifive

コメントする

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。