列のセル テンプレート

デフォルトでは、グリッドは列のフィールドを使用してセル内の値を文字列としてレンダリングします。これは基本的なシナリオでは問題ありませんが、レンダリングされる出力をカスタマイズしたい場合や、最終的な出力が異なるデータ フィールドの組み合わせである場合は、セル テンプレートをカスタマイズできます。

列の cellTemplate プロパティを設定することで、これを実現できます。

// cellTemplate 関数を定義します
const currencyCellTemplate = (ctx: IgrCellContext) => (
  {/* Template contents */}
);

// cellTemplate プロパティを設定します
return (
  <IgrGridLite data={data} id="grid-lite">
    <IgrGridLiteColumn
      field="price"
      header="Price"
      dataType="number"
      cellTemplate={currencyCellTemplate}
    ></IgrGridLiteColumn>
  </IgrGridLite>
);

フォーマッタ関数として使用する

簡単なシナリオでは、必要に応じてフォーマット済みの値を返すだけで済みます。以下は数値をロケール通貨形式で表示する例です。

const formatCurrency = new Intl.NumberFormat("en-150", {
  style: "currency",
  currency: "EUR",
});

// カスタム通貨形式の値を返します
const currencyCellTemplate = (ctx: IgrCellContext) => (
  <span>{formatCurrency(ctx.value)}</span>
);

データ ソースの異なるフィールドの値を組み合わせることもできます。

const { format: asCurrency } = new Intl.NumberFormat("en-150", {
  style: "currency",
  currency: "EUR",
});

// カスタム通貨形式の値を返します
const totalCellTemplate = (ctx: IgrCellContext) => (
  <span>{asCurrency(ctx.value * ctx.row.data.count)}</span>
);

カスタム DOM テンプレート

cellTemplate プロパティを値フォーマッタとして使用する以外に、独自の DOM テンプレートを作成することもできます。これはセル コンテナー内にレンダリングされます。

標準の DOM 要素だけでなく、他のライブラリの Web コンポーネントもテンプレート化できます。

// defineComponents と、rating コンポーネントなどの igniteui-webcomponents コンポーネントをインポートします。
import { defineComponents, IgcRatingComponent } from "igniteui-webcomponents";

defineComponents(IgcRatingComponent);

// React のセル テンプレート内で、Web コンポーネントを通常どおりに使用します
const satisfactionCellTemplate = (ctx: IgrCellContext) => (
  <span>
    <igc-rating readonly value={ctx.value}></igc-rating>
  </span>
);

セル コンテキスト オブジェクト

カスタム セル レンダラーには GridLiteCellContext オブジェクトがパラメータとして渡され、以下のプロパティを持ちます。

/**
 * 行セル テンプレート コールバックのコンテキスト オブジェクトです。
 */
export interface GridLiteCellContext<
  T extends object,
  K extends Keys<T> = Keys<T>
> {
  /**
   * テンプレートの親であるセル要素です。
   */
  parent: GridLiteCell<T>;
  /**
   * セルを含む行要素です。
   */
  row: GridLiteRow<T>;
  /**
   * この列の現在の構成です。
   */
  column: ColumnConfiguration<T, K>;
  /**
   * このセルに対するデータ ソースの値です。
   */
  value: PropertyType<T, K>;
}

その他のリソース

• 列の構成
• ソート
• フィルタリング
• テーマ設定とスタイル設定

コミュニティに参加して新しいアイデアをご提案ください。

• Grid Lite GitHub