Skip to main content

filter-tasks

Description​

Fires when filtering tasks

Usage​

"filter-tasks": ({
    filter?: (task: ITask) => boolean,
    open?: boolean,
    key?: string,
    value: any,
}) => boolean | void;

Parameters​

The callback of the action takes an object with the following parameters:

  • filter - (optional) a filtering function that runs for each task and returns true if the task should be displayed or false if it should be hidden; the function receives each task as an ITask object (a single task object from the tasks array)
  • open - (optional) defines whether to open branches if child nodes match filtering criteria; true by default
  • key - (optional) column name for which filtering value is applied
  • value - (required) filter value for the column
note

Typically, users will invoke this action only with the filter parameter. When filtering is triggered from inline column filters in the grid header, the action also includes the key and value parameters.

Example​

The example below demonstrates how to filter tasks programmatically using a custom filter function.

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

    const data = getData();
    let api = $state();

    api.exec("filter-tasks", {
        filter: (task) => (task.text || "").toLowerCase().includes("phase"),
    });
</script>

<Gantt
    bind:this={api}
    tasks={data.tasks}
    links={data.links}
    scales={data.scales}
/>

The example below demonstrates filtering via inline column filters in the grid header. When a user types in a column filter, the filter-tasks action is triggered automatically with the corresponding key and value.

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

    const data = getData();
    let api = $state();

    const textfilter = { filter: { type: "text", config: { clear: true } } };

    const columns = [
        { id: "text", header: ["Task name", textfilter], width: 200 },
        { id: "start", header: "Start date", width: 130 },
        { id: "duration", header: "Duration", width: 100 },
    ];
</script>

<Gantt
    bind:this={api}
    tasks={data.tasks}
    links={data.links}
    scales={data.scales}
    {columns}
/>

Related article: Filtering data