列ヘッダーのカスタマイズ
セル テンプレートと同様に、列ヘッダーも目的のユース ケースに合わせてカスタマイズできます。header プロパティを通じてテキスト ラベルを渡したり、本格的なカスタム テンプレートを提供したりできます。
ヘッダー テキストによるカスタマイズ
デフォルトでは、列はラベル テキストに field プロパティを使用します。ラベルをカスタマイズするには、header プロパティをより人間が読みやすい形式に設定します。
<igc-grid-lite-column field="price" header="Price per item"></igc-grid-lite-column>
[!NOTE]
headerTemplateが指定されている場合、headerは無視されます。
ヘッダー テンプレートによるカスタマイズ
セル テンプレートと同様に、カスタム テンプレート レンダラーを渡して、列ヘッダー内に独自の DOM を作成できます。
import { html } from 'lit';
const column = document.querySelector('igc-grid-lite-column');
column.headerTemplate = () => html`<h3>⭐ Rating ⭐</h3>`;
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。