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.

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

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

    import { html } from 'lit';


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

    Additional Resources

    Our community is active and always welcoming to new ideas.