Skip to main content

filterValues

Description​

Optional. Sets visible values of header filters without invoking filtering

Usage​

filterValues?: { [key: string]: any };

Parameters​

The property is an object where:

  • key — a column ID
  • value — the filter input value for that column

filterValues only updates the visible state of the filter inputs. To trigger actual data filtering, call the filter-rows action explicitly.

Example​

The example shows how to set the initial filtering state:

<script>
    import { Grid } from "@svar-ui/svelte-grid";
    import { data, columns } from "./common/data";

    // Set initial filter values visible in the filter inputs
    let filterValues = $state({ firstName: "Mary", companyName: "Comp" });

    // Trigger initial filtering via the action
    function init(api) {
        api.exec("filter-rows", { filter: filterFn });
    }
</script>

<Grid {init} {data} {columns} {filterValues} />

Related articles: