Not able to add html to the row header

You can set a custom HTML for the row header using onBeforeRowHeaderRender like this:

onBeforeRowHeaderRender: args => {
  args.row.html = `<div style="font-weight:bold; margin-bottom:5px;">${args.row.name}</div>`;
}

However, this is just raw HTML and it doesn’t let you include Angular-specific tags and properties.

The Lite version doesn’t support Angular components in the row headers yet.

One of the upcoming releases will add support for active areas in row headeers which can be used to add active elements with a custom Angular click handler.

Thank you!

There is now a new release available (2025.3.703) which supports row header active areas.

There is also a demo available that shows how to use the onBeforeRowHeaderRender event to define them.