列ヘッダーのカスタマイズ

    セル テンプレートと同様に、列ヘッダーも目的のユース ケースに合わせてカスタマイズできます。headerプロパティを通じてテキスト ラベルを渡したり、本格的なカスタム テンプレートを提供したりできます。

    ヘッダー テキストによるカスタマイズ

    デフォルトでは、列はラベル テキストに field プロパティを使用します。ラベルをカスタマイズするには、header プロパティをより人間に読みやすい形式に設定します。

    <igx-grid-lite-column field="price" header="Price per item"></igx-grid-lite-column>
    Note

    ヘッダー テンプレートが提供されている場合、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>

    その他のリソース

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