列のセル テンプレート

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

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

// 列要素への参照を取得します
const column = document.querySelector('igc-grid-lite-column[field="price"]');

// cellTemplate プロパティを設定します
column.cellTemplate = (params: IgcCellContext<T, K>) => { return html`<!-- template content -->`};

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

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

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

// 列要素への参照を取得します
const column = document.querySelector('igc-grid-lite-column');

// カスタム通貨形式の値を返します
column.cellTemplate = (params) => asCurrency(params.value); // => "€123,456.79"

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

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

// 列要素への参照を取得します
const column = document.querySelector('igc-grid-lite-column');

// カスタム通貨形式の値を返します
column.cellTemplate = ({value, row}) => asCurrency(value * row.data.count);

カスタム DOM テンプレート

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

宣言的な DOM フラグメントを構築するために、Lit とそのタグ付きテンプレート構文が提供する機能を再利用しています。

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

// Lit パッケージから `html` タグ関数をインポートします。
import { html } from "lit";

// 列要素への参照を取得します
const column = document.querySelector('igc-grid-lite-column[field="rating"]');

// グリッド内の `rating` 値を表すために別の Web コンポーネントを使用します
column.cellTemplate = ({ value }) => html`<igc-rating readonly value=${value}></igc-rating>`;

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

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

API リファレンス

その他のリソース

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

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

• Grid Lite GitHub