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.
<igx-grid-lite-column field="price" header="Price per item"></igx-grid-lite-column>When a header template 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.
// Import the directive for it -> IgxGridLiteHeaderTemplateDirective
import { IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteCellTemplateDirective, IgxGridLiteHeaderTemplateDirective } from 'igniteui-angular/grids/lite';
// And add it to your imports array
imports: [
CommonModule,
IgxGridLiteComponent,
IgxGridLiteColumnComponent,
IgxGridLiteCellTemplateDirective, // for templating cells
IgxGridLiteHeaderTemplateDirective // for templating headers
],<igx-grid-lite-column field="rating" dataType="number">
{/* igxGridLiteHeader directive for templating the header */}
<ng-template igxGridLiteHeader let-value>
<h3>⭐ Rating ⭐</h3>
</ng-template>
{/* igxGridLiteCell directive for templating the cell */}
<ng-template igxGridLiteCell let-value>
<igc-rating [value]="value" readonly step="0.01" min="0" max="5">
</igc-rating>
</ng-template>
</igx-grid-lite-column>API References
Additional Resources
Our community is active and always welcoming to new ideas.