Hello
To remove the default expand/collapse buttons you can apply css for .wx-toggle-icon class:
.wx-toggle-icon {
display: none;
}
To add custom buttons such as Expand, Collapse you can create your own buttons and add expand/collapse functionality with the help of api.exec() method and open-task action setting the mode paraneter to true /false:
const handleExpand = () => {
// Logic to expand tasks
apiRef.current.getState().tasks.forEach((task) => {
if (task.data?.length) {
apiRef.current.exec('open-task', {
id: task.id,
mode: true,
});
}
});
};
const handleCollapse = () => {
// Logic to collapse tasks
apiRef.current.getState().tasks.forEach((task) => {
if (task.data?.length) {
apiRef.current.exec('open-task', {
id: task.id,
mode: false,
});
}
});
};
As for Export to Excel/ Export to PDF, unfortunately, React Gantt does not support built-in functionality for exporting to Excel or PDF.
To include a search field and filter dropdowns for Department and User-based filtering you can implement your own search field/dropdowns to filter tasks with the logic you need.
Please check the example here: https://stackblitz.com/edit/vitejs-vite-nceusp4h?file=src%2FGanttComponent.jsx,src%2Findex.css
