列セル テンプレート

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

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

<!-- Templates TBD in Blazor -->
<IgbGridLiteColumn Field="Price"></IgbGridLiteColumn>

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

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

<!-- Templates TBD in Blazor -->
<IgbGridLiteColumn Field="Price"></IgbGridLiteColumn>

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

// Return the custom currency formatted value
const totalCellTemplate = (ctx: IgrCellContext) => (
  <span>{asCurrency(ctx.value * ctx.row.data.count)}</span>
);

カスタム DOM テンプレート

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

<!-- Templates TBD in Blazor -->
<IgbGridLiteColumn Field="Rating"></IgbGridLiteColumn>

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

カスタム セル レンダラーには 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>;
}

その他のリソース

• Column Configuration
• Sorting
• Filtering
• Theming & Styling

Our community is active and always welcoming to new ideas.

• Grid Lite GitHub