igGrid 列のスタイリング - インフラジスティックス・ジャパン株式会社Blog

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"  // セルのスタイル
  }
]