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:

import { Gantt } from "@svar-ui/react-gantt";
import { getData } from "../data";

const data = getData();

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

    return <Gantt init={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.

import { useState, useEffect } from "react";
import { Gantt } from "@svar-ui/react-gantt";
import { getData } from "../data";

function Example() {
    const data = getData();

    const [api, setApi] = useState(null);
    const [text, setText] = useState("");

    function init(ganttApi) {
        setApi(ganttApi);
    }

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

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

    // Reapply filter whenever the input text changes or when the API becomes available
    useEffect(() => {
        if (api) applyFilter(text);
    }, [api, text]);

    return (
        <>
            <input
                type="text"
                value={text}
                onChange={(e) => setText(e.target.value)}
                placeholder="Filter by Task name"
            />

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