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

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

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

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

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

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

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

import { html } from 'lit';


const column = document.querySelector('igc-grid-lite-column');
column.headerTemplate = () => html`<h3>⭐ Rating ⭐</h3>`;

API リファレンス

その他のリソース

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

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

• Grid Lite GitHub