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:

import { useState } from "react";
import { Grid } from "@svar-ui/react-grid";
import { data, columns } from "./common/data";

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

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

    return (
        <Grid init={init} data={data} columns={columns} filterValues={filterValues} />
    );
}

export default App;

Related articles: