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

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

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

左カラム固定のデモ

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

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

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

元：

修正後：

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

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

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

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

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

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

Edit fiddle – JSFiddle