Apex Grid Column Header Customization

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 headerText property, or provide a full-blown custom template.

Customization via header text

By default the column uses the key configuration property for label text. To customize the label, set the headerText property to a more human readable format.

{
  key: 'price',
  headerText: 'Price per item'
}

When headerTemplate is provided, headerText 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';


  {
    key: 'rating',
    headerTemplate: () => html`<h3>⭐ Rating ⭐</h3>`,
  }

Reset Password

Apex Grid Column Header Customization

Stay Updated