Skip to main content

filter-rows

Description​

Fires when filtering data

Usage​

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

Parameters​

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

  • filter - (optional) any filtering function that takes each item from the data array and returns true or false for each item
  • key - (optional) field name
  • value - (optional) filter value

Example​

The example below demonstrates how to track the filter-rows action and display which field was used for filtering:

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

    const data = getData();

    function init(api) {
        api.on("filter-rows", (ev) => {
            console.log("Filtered field:", ev.key);
        });
    }
</script>

<Gantt
    {init}
    tasks={data.tasks}
    links={data.links}
/>

The example below demonstrates how to use the filter-rows action to dynamically filter tasks in the Gantt chart when a user types in the input field.

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

    const data = getData();

    let api = $state();
    let text = $state("");

    function init(ganttApi) {
        api = ganttApi;
    }

    function applyFilter(value) {
        const filter = value
            ? (task) =>
                    (task.text || "").toLowerCase().includes(value.toLowerCase())
            : null;

        api.exec("filter-rows", { filter });
    }

    // Reapply filter whenever the input text changes
    $effect(() => {
        if (api) applyFilter(text);
    });
</script>

<input type="text" bind:value={text} placeholder="Filter by Task name" />

<Gantt {init} tasks={data.tasks} links={data.links} />