列ヘッダーのカスタマイズ
セル テンプレートと同様に、列ヘッダーも目的のユース ケースに合わせてカスタマイズできます。headerプロパティを通じてテキスト ラベルを渡したり、本格的なカスタム テンプレートを提供したりできます。
ヘッダー テキストによるカスタマイズ
デフォルトでは、列はラベル テキストに field プロパティを使用します。ラベルをカスタマイズするには、header プロパティをより人間に読みやすい形式に設定します。
<igx-grid-lite-column field="price" header="Price per item"></igx-grid-lite-column>ヘッダー テンプレートが提供されている場合、header は無視されます。
ヘッダー テンプレートによるカスタマイズ
セル テンプレートと同様に、カスタム テンプレート レンダラーを渡して、列ヘッダー内に独自の DOM を作成できます。
// そのためのディレクティブをインポートします -> IgxGridLiteHeaderTemplateDirective
import { IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteCellTemplateDirective, IgxGridLiteHeaderTemplateDirective } from 'igniteui-angular/grids/lite';
// そのためのディレクティブをインポートします
imports: [
CommonModule,
IgxGridLiteComponent,
IgxGridLiteColumnComponent,
IgxGridLiteCellTemplateDirective, // セルをテンプレート化するため
IgxGridLiteHeaderTemplateDirective // ヘッダーをテンプレート化するため
],<igx-grid-lite-column field="rating" dataType="number">
<!-- ヘッダーをテンプレート化するための igxGridLiteHeader ディレクティブ -->
<ng-template igxGridLiteHeader let-value>
<h3>⭐ Rating ⭐</h3>
</ng-template>
<!-- セルをテンプレート化するための igxGridLiteCell ディレクティブ -->
<ng-template igxGridLiteCell let-value>
<igc-rating [value]="value" readonly step="0.01" min="0" max="5">
</igc-rating>
</ng-template>
</igx-grid-lite-column>API リファレンス
-
IgxGridLite -
IgxGridLiteColumn -
IgxGridLiteHeaderTemplateDirective
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。