インフラジスティックス・ジャパン株式会社のBlog

インフラジスティックス・ジャパン株式会社のチームメンバーが技術トレンド、製品Tips、サポート情報からライセンス、日々の業務から感じることなど、さまざまなトピックについてお伝えするBlogです。

igGrid 列のスタイリング

igGrid の列をスタイリングしてみましょう。

セルは columnCssClass オプション、ヘッダは headerCssClass オプションを利用してそれぞれスタイリングを行うことができます。

igGrid では通常セルやヘッダのテキストを左寄せで表示するようになっています。今回は columnCssClass と headerCssClass を利用してテキストのアラインメントを指定します。 


ヘッダ・・・すべての列で中央寄せ

セル・・・数値列は右寄せ、テキスト列は左寄せ

 

スタイル:

<style>
  /*ヘッダのスタイル*/
  .headerStyle
  {
    text-align: center !important;
  }
  /*セルのスタイル*/
  .numberStyle
  {
    text-align: right;
  }
</style>

 

列の定義:

columns: [
  {
      headerText: "ID",
      key: "ID",
      dataType: "number",
      width: "70px",
      headerCssClass: "headerStyle", // ヘッダのスタイル
      columnCssClass: "numberStyle"  // セルのスタイル
  }, {
      headerText: "名前",
      key: "Name",
      dataType: "string",
      width: "200px",
      headerCssClass: "headerStyle" // ヘッダのスタイル
  }, {
      headerText: "住所",
      key: "Address",
      dataType: "string",
      width: "180px",
      headerCssClass: "headerStyle" // ヘッダのスタイル
  }, {
      headerText: "年齢",
      key: "Age",
      dataType: "number",
      width: "70px",
      headerCssClass: "headerStyle", // ヘッダのスタイル
      columnCssClass: "numberStyle"  // セルのスタイル
  }
]

 

実行結果:

ヘッダはすべての列で中央寄せ、セルは ID 列と年齢列を右寄せに変更することができました。

igGrid

 

サンプルはこちらから。
(本サンプルは16.1バージョンで作成されました)

 

リファレンス:

columnCssClass オプション 
http://jp.igniteui.com/help/api/2016.1/ui.iggrid#options:columns.columnCssClass

headerCssClass オプション 
http://jp.igniteui.com/help/api/2016.1/ui.iggrid#options:columns.headerCssClass

 

Ignite UI for JavaScript の詳細な情報は https://jp.infragistics.com/products/ignite-ui を御覧ください。

jp.infragistics.com