IgrGrid – セルテキストを右寄せにする

  • 公開日:
  • 最終更新日:

IgrGrid を使用してグリッドを作成する際、セル内のテキストを右寄せにする方法を紹介します。(下図は dataType=”String” を指定したときの様子)。

方法

セルのテキストを右寄せするには、cellStylesまたはcellClassesを活用して CSS を適用します。
以下の例では、Name 列をcellStylesを使用して右寄せし、Country 列をcellClassesを用いて右寄せしています。

cellStyles を使用して右寄せする方法

cellStyles を使用して直接 justifyContent: “flex-end” を適用し、セル内のテキストを右寄せします。

<IgrColumn 
           field="name" 
           header="Name" 
           dataType="String"
           cellStyles={{ justifyContent: "flex-end" }}
         />

cellClasses を使用して右寄せする方法

cellClasses を使用し sampleClass というクラスを作成します。

<IgrColumn
          field="country"
          header="Country"
          dataType="String"
          cellClasses={{ sampleClass: () => true,}}
        />

.sampleClass に justify-content: flex-end; を適用します。

.sampleClass {
  justify-content: flex-end;
}

実行結果

この設定により、Name 列と Country 列のテキストが右寄せされます (下図例)。

  • Name 列は cellStyles を使用して直接 justifyContent: “flex-end” を適用。
  • Country 列は cellClasses を使用し、.sampleClass に justify-content: flex-end; を適用。
サンプルプログラムのダウンロード GitHub リポジトリはこちら

ダウンロード後、以下のコマンドで実行できます。

npm ci
npm run dev

関連ドキュメント

Tagged: