Customizing the Column Header

    Semelhante aos templates de células, cabeçalhos de coluna também podem ser personalizados para melhor se adequar ao caso de uso desejado. Você pode passar um rótulo de texto pelaheader propriedade ou fornecer um modelo personalizado completo.

    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

    Semelhante ao template de célula, você também pode passar um renderizador de templates personalizado e criar seu próprio DOM dentro do cabeçalho da coluna.

    import { html } from 'lit';


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

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.