Customizing the Column Header
Similar to the cell templates, column headers can also be customized to better fit the desired use case. You can pass a text label through the header property, or provide a full-blown custom template.
Customization via Header Text
By default the column uses the field property for label text. To customize the label, set the header property to a more human readable format.
return (
<IgrGridLite>
<IgrGridLiteColumn field="price" header="Price per item"></IgrGridLiteColumn>
</IgrGridLite>
);When headerTemplate is provided, header is ignored.
Customization via Header Template
Similar to the cell template, you can also pass a custom template renderer and create your own DOM inside the column header.
const ratingHeaderTemplate = (ctx: IgrHeaderContext) => (
<h3>{"⭐ Rating ⭐"}</h3>
);
return (
<IgrGridLite>
<IgrGridLiteColumn field="rating" headerTemplate={ratingHeaderTemplate}></IgrGridLiteColumn>
</IgrGridLite>
);Additional Resources
Our community is active and always welcoming to new ideas.