HeaderLabelRenderer

Header label renderer function type. Customize the label while framework handles sort icons, filter buttons, resize handles.

Use this for simple label customizations without taking over the entire header. The grid automatically appends sort icons, filter buttons, and resize handles.

type HeaderLabelRenderer = (ctx: HeaderLabelContext<TRow>) => Node | string | void | null

Example

// Add required indicator
const requiredHeader: HeaderLabelRenderer = (ctx) => {
  return `${ctx.value} <span style="color: red;">*</span>`;
};

// Add unit suffix
const priceHeader: HeaderLabelRenderer = (ctx) => {
  const span = document.createElement('span');
  span.innerHTML = `${ctx.value} <small>(USD)</small>`;
  return span;
};

// Column config usage
columns: [
  { field: 'name', headerLabelRenderer: requiredHeader },
  { field: 'price', headerLabelRenderer: priceHeader },
]

See Also

• HeaderLabelContext for context properties
• HeaderRenderer for full header control