HeaderRenderer

Header cell renderer function type. Full control over header cell content. User is responsible for all content and interactions.

When using this, you have complete control but must manually include sort icons, filter buttons, and resize handles using the helper functions.

type HeaderRenderer = (ctx: HeaderCellContext<TRow>) => Node | string | void | null

Example

// Custom header with all standard elements
const customHeader: HeaderRenderer = (ctx) => {
  const div = document.createElement('div');
  div.className = 'custom-header';
  div.innerHTML = `<span class="label">${ctx.value}</span>`;

  // Add sort icon (returns null if not sortable)
  const sortIcon = ctx.renderSortIcon();
  if (sortIcon) div.appendChild(sortIcon);

  // Add filter button (returns null if not filterable)
  const filterBtn = ctx.renderFilterButton();
  if (filterBtn) div.appendChild(filterBtn);

  // Resize handles are added automatically for resizable columns
  return div;
};

// Minimal header (no sort/resize)
const minimalHeader: HeaderRenderer = (ctx) => {
  return `<div class="minimal">${ctx.value}</div>`;
};

// Column config usage
columns: [
  { field: 'name', headerRenderer: customHeader },
]

See Also

• HeaderCellContext for context properties and helper functions
• HeaderLabelRenderer for simpler label-only customization