# HeaderCellContext

> _Since v1.4.0_

Context passed to `headerRenderer` for complete control over header cell content.
When using this, you control the header content. Resize handles are added automatically
for resizable columns.

#### Example

```typescript
headerRenderer: (ctx) => {
  const div = document.createElement('div');
  div.className = 'custom-header';
  div.innerHTML = `<span>${ctx.value}</span>`;
  // Optionally include sort icon
  const sortIcon = ctx.renderSortIcon();
  if (sortIcon) div.appendChild(sortIcon);
  return div;
}
```

## Properties

| Property | Type | Description |
| -------- | ---- | ----------- |
| `column` | <code><a href="/grid/api/core/interfaces/columnconfig/">ColumnConfig</a>&lt;TRow&gt;</code> | Column configuration reference. |
| `value` | <code>string</code> | The header text (from column.header or column.field). |
| `sortState` | <code>desc &#124; asc &#124; unknown</code> | Current sort state for this column. |
| `filterActive` | <code>boolean</code> | Whether the column has an active filter. |
| `cellEl` | <code>HTMLElement</code> | The header cell DOM element being rendered into. |
| `renderSortIcon` | <code>() =&gt; HTMLElement &#124; unknown</code> | Render the standard sort indicator icon. Returns null if column is not sortable. |
| `renderFilterButton` | <code>() =&gt; HTMLElement &#124; unknown</code> | Render the standard filter button. Returns null if FilteringPlugin is not active or column is not filterable. Note: The actual button is added by FilteringPlugin's afterRender hook. |