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 setup>
    import { Grid } from "@svar-ui/vue-grid";
    import { ref } from "vue";
    import { data, columns } from "./common/data";

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

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

<template>
    <Grid :init="init" :data="data" :columns="columns" :filterValues="filterValues" />
</template>

Related articles: