業務要件でグリッドを使うことは多々あります。そんな中で出てくる要望の一つにヘッダーの固定化があります。さらにこれが進むと、左側の幾つかのカラムだけは固定表示して欲しいと言われます。特に右側にカラムが伸びていく、横幅の大きいグリッドでそういったニーズが出てきます。
今回はそんな要望にも応えられるhifiveのグリッドの使い方を紹介します。
実装すると次のようになります。
ヘッダープロパティを変更する
今回のベースはhifiveのデータグリッドライブラリを使いこなす（1）「グリッドの基本形」になります。その中にあるvisiblePropertiesを変更します。
元：
修正後：
header（ヘッダー）として id と name を指定しました。これでこの2つのカラムは左側に固定表示となります。残りと main キーで指定されたカラムは表示されますが、スクロール対象となります。
次に各カラムの表示幅を設定します。
sizeはピクセル指定になります。表示する情報に応じて調整します。なお、文字がはみ出しても隣のカラムには影響しません（overflow: hiddenになります）。
最後にダミーデータを入れる部分を変更します。これはダミーデータなので本来は不要です。
こうすることで、データが詰まったグリッドができあがりました。
左側のヘッダーを固定にして欲しいというニーズはよくあります。スタイルシートとJavaScriptで独自実装もできますが、柔軟に対応するのは難しいでしょう。hifiveのグリッドをぜひ役立ててください。
