Close
Angular React Web Components Blazor
Open Source

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

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

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

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

return (
  <igc-grid-lite>
    <igc-grid-lite-column field="price" header="Price per item"></igc-grid-lite-column>
  </igc-grid-lite>
);

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

ヘッダー テンプレートによるカスタマイズ

セル テンプレートと同様に、カスタム テンプレート レンダラーを渡して、列ヘッダー内に独自の DOM を作成できます。

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

その他のリソース

Our community is active and always welcoming to new ideas.