Configuring the tasks tree area

The grid with tasks tree can be used for quick navigation.

By default, the tasks tree area contains 4 columns:

• Task name
• Start date
• Duration
• '+' column. A special column with the '+' button which allows users to add tasks

Configuring columns

Columns with default parameters are applied by default and you don't need to specify the columns objects.

Default columns array you can see here: columns.

Adding a column

If you want to add a new column, add the columns object to the array and specify its id parameter in the task object. id is the mandatory parameter which defines the content of cells and the cell will take the value of the matching property from a task by default.

<script>
    import { Gantt } from "wx-svelte-gantt";      

    const columns = [
        { id: "holder", header: "Holder", width: 90, align: "center" },
        //other columns
    ];

    const tasks = [ 
    {
      id: 1,
      start: new Date(2022, 2, 4),
      end: new Date(2023, 2, 4),
      progress: 20,
      parent: 1,
      type: "task",
      holder: "Nick",
   },
   //other tasks
]

</script>    

<Gantt {tasks} {columns} />

Configuring columns width

To add columns with the fixed width, set the width value, the default value is 120. To make the width of columns flexible, apply the flexgrow parameter of the columns property. It specifies specifies how much space (width) relative to the grid width the column will take (it will take no effect on columns with the set width); the property is specified as a number and if flexgrow is set to 1 in one column only, the column will take the full available width.

Example:

<script>
    import { getData } from "../data";
    import { Gantt } from "wx-svelte-gantt";

    const data = getData();

    const columns = [
        { id: "text", header: "Task name", flexgrow: 2 },
        {
            id: "start",
            header: "Start date",
            flexgrow: 1,
            align: "center",
        },
        {
            id: "duration",
            header: "Duration",
            align: "center",
            flexgrow: 1,
        },
        {
            id: "action",
            header: "",
            width: 50,
            align: "center",
        },
    ];
</script>

<Gantt
    tasks={data.tasks}
    links={data.links}
    scales={data.scales}
    {columns}
/>

Disabling the tasks reordering

By default, a user can reorder tasks in the grid area with drag&drop. To disable the tasks ordering feature, you can apply the api.intercept() method to handle the drag-task action.

<script>
    import { getData } from "./data";
    import { Gantt } from "wx-svelte-gantt";

    const data = getData();
    
    api.intercept("drag-task", ev => {
        if (typeof ev.top !== "undefined")
        return false;
    });


</script>

<Gantt
    columns={data.columns}
    tasks={data.tasks} />

Another way to disable the feature is to switch to the read-only mode.

Hiding the tasks tree area

To hide the area with tasks tree, set the columns property to false:

<script>
    import { getData } from "./data";
    import { Gantt } from "wx-svelte-gantt";

    const data = getData();

</script>

<Gantt
    columns={false}
    tasks={data.tasks} />