Render React components in column Header

I built a custom wrapper component in React to use the Gantt and I need to add a custom column header. I found this page: Specifying Columns Gantt Docs
which shows how to render react components in the columns content, but I haven’t found how to do it in the columns header.
“createPortal” won’t do the trick.

Is there any custom renderer for the column labels?

1 Like

You can use the onDataRender handler to add a React component to the header:

gantt.config.columns = [
		name: "buttons1",
		label: "Buttons 1",

gantt.attachEvent("onDataRender", function (id, e) {
	const container = document.querySelector(".gantt_grid_head_buttons1") || document.createElement("div");
		<Button variant="contained" color="primary" size="small" onClick={() => alert("This is a contained Material Button in the grid header")}>
1 Like