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>
);

    [!NOTE] 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.