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

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

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

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

return (
  <IgrGridLite>
    <IgrGridLiteColumn field="price" header="Price per item"></IgrGridLiteColumn>
  </IgrGridLite>
);

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

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

const ratingHeaderTemplate = (ctx: IgrHeaderContext) => (
  <h3>{"⭐ Rating ⭐"}</h3>
);


return (
  <IgrGridLite>
    <IgrGridLiteColumn field="rating" headerTemplate={ratingHeaderTemplate}></IgrGridLiteColumn>
  </IgrGridLite>
);

その他のリソース

• 列の構成
• セル テンプレート
• テーマ設定とスタイル設定

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

• Grid Lite GitHub