Skip to main content

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: defaultColumns.

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", label: "Holder", width: "90px", align: "center" },
        //other columns
    ];

    const tasks = [ 
    {
      id: 1,
      start_date: "01-04-2022",
      end_date: "01-04-2023",
      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 from here; the default value is "120px". 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 need 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} />