Render React components in column Header

Gantt
#1

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
#2

Hello,
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");
	ReactDOM.render(
		<Button variant="contained" color="primary" size="small" onClick={() => alert("This is a contained Material Button in the grid header")}>
			contained
		</Button>,
		container
	);
});
1 Like