Skip to main content

taskTemplate

Description​

Optional. Defines your own template for tasks bars

Usage​

taskTemplate?: Component<{
    data: ITask;
    api: IApi;
    onAction: (ev: {
        action: string;
        data: { [key: string]: any };
    }) => void;
}>;

ITask is a single task object from the tasks array.

Parameters​

  • taskTemplate - the React component to be applied as a template to the content of the task bar with the following props:

  • data - (required) a single task object from the tasks array

  • api - (required) the API gateway object for interacting with the Gantt API

  • onAction - (required) callback prop for handling custom actions triggered inside the task template:

    • action – (required) string representing the action name
    • data – (required) object with additional data related to the action

Example​

import { Gantt } from "@svar-ui/react-gantt";
import MyTaskTemplate from "./MyTaskTemplate.jsx";
import { useRef } from "react";

const data = getData();

export default function App() {
    const apiRef = useRef();

    return (
        <Gantt
            taskTemplate={MyTaskTemplate}
            tasks={data.tasks}
            links={data.links}
            scales={data.scales}
            ref={apiRef}
        />
    );
}

For a full example with an example of the template, custom actions and event handling, see Applying template to task bars.