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 apply built-in filters, track the filter-rows action and output the field name (key) that is filtered:

import { useEffect } from "react";
import { Grid } from "@svar-ui/react-grid";
import { getData } from "../data";

const { data, countries } = getData();

const columns = [
  { id: "id", width: 50 },
  {
    id: "firstName",
    header: { filter: "text" },
    footer: "First Name",
    width: 150,
  },
  {
    id: "lastName",
    header: { filter: { type: "text" } },
    footer: "Last Name",
    width: 150,
  },
  {
    id: "email",
    header: "Email",
    footer: "Email",
  },
  {
    id: "country",
    header: {
      filter: {
        type: "richselect",
        config: {
          options: countries,
        },
      },
    },
    options: countries,
  },
  {
    id: "stars",
    header: "Stars",
    footer: "Stars",
    filter: { type: "text" },
  },
];

export default function Example() {
  // init receives the grid API instance and can be used to register events
  function init(api) {
    api.on("filter-rows", (ev) => {
      console.log("Filtered field:", ev.key);
    });
  }

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

In the next example the filter is applied to the rows whenever a user enters the value in the input field. The applyFilter() function is created to filter the rows by the selected city. The function is assigned to filter that is then triggered via the api.exec() method.

import { useEffect, useState } from "react";
import { Grid } from "@svar-ui/react-grid";

const data = [
  { id: 1, firstName: "John", lastName: "Doe", city: "New York" },
  { id: 2, firstName: "Jane", lastName: "Smith", city: "Los Angeles" },
  { id: 3, firstName: "Mike", lastName: "Jordan", city: "Chicago" },
  { id: 4, firstName: "Emily", lastName: "Davis", city: "New York" },
];

const columns = [
  { id: "firstName", name: "First Name" },
  { id: "lastName", name: "Last Name" },
  { id: "city", name: "City" },
];

export default function FilterByCityExample() {
  const [api, setApi] = useState(null);
  const [filterCity, setFilterCity] = useState("New York");

  function filterRowsByCity(city) {
    return (item) => item.city.toLowerCase() === city.toLowerCase();
  }

  function applyFilter(city) {
    if (api) {
      const filter = filterRowsByCity(city);
      api.exec("filter-rows", { filter });
    }
  }

  // Apply filter automatically whenever the filterCity changes
  useEffect(() => {
    if (filterCity && api) applyFilter(filterCity);
  }, [filterCity, api]);

  return (
    <>
      <input
        type="text"
        value={filterCity}
        onChange={(e) => setFilterCity(e.target.value)}
        placeholder="Filter by City"
      />

      {/* Use a ref callback to obtain the Grid API instance (setApi will receive the instance). */}
      <Grid data={data} columns={columns} ref={(instance) => setApi(instance)} />
    </>
  );
}

Related articles: