HeaderCellContext

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

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	ColumnConfig<TRow>	Column configuration reference.
value	string	The header text (from column.header or column.field).
sortState	desc | asc | unknown	Current sort state for this column.
filterActive	boolean	Whether the column has an active filter.
cellEl	HTMLElement	The header cell DOM element being rendered into.
renderSortIcon	() => HTMLElement | unknown	Render the standard sort indicator icon. Returns null if column is not sortable.
renderFilterButton	() => HTMLElement | unknown	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.