Skip to main content

open-filter

Description​

Fires when a filter is activated for a field

Usage​

"open-filter": ({
    id: string | null,
    area?: "values" | "rows" | "columns"
}) => boolean | void;

Parameters​

The callback of the action takes the next parameters:

  • area - the area where a field is applied ("rows", "columns", "values")
  • id - the id of a field; if there's a single id argument with null value, the filter will be closed.
info

For handling the inner events you can use the Event Bus methods

Returns​

The function may return either a boolean value or void. When it returns false, the event operation in question will be halted.

Example​

The example below shows how to make the Configuration panel hide upon closing the filter box:

const table = new pivot.Pivot("#root", {
    fields,
    data: dataset,
    config: {
        rows: ["studio", "genre"],
        columns: [],
        values: [
            {
                field: "title",
                method: "count"
            },
            {
                field: "score",
                method: "max"
            }
        ]
    }
});

table.api.on("open-filter", (ev) => {
    if(!ev.id) {
        table.api.exec("show-config-panel", {
            mode: false
        });
    }    
});

In the next example we output to console the id of the field for which filter is activated:

const table = new pivot.Pivot("#root", {
    fields,
    data,
    config: {
        rows: ["studio", "genre"],
        columns: [],
        values: [
            {
                field: "title",
                method: "count"
            },
            {
                field: "score",
                method: "max"
            }
        ]
    }
});

table.api.on("open-filter", (ev) => {
    console.log("The field id for which filter is activated:", ev.id);
});