Skip to main content

filter-rows

Description​

Fires when filtering data

Usage​

"filter-rows": ({
    handler: any
}) => boolean|void;

Parameters​

The callback of the action takes an object with the following parameters:

  • handler - (required) any filtering function that takes each item from the data array and returns true or false for each item.

Example​

In the example below the filter is applied to the rows whenever a user enters the value in the input field. The applyFilter() function filters the rows by the selected city. The filtering is done directly using the api.exec() method with the filter-rows action.

<script>
  import { Grid } from "@wx/svelte-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" },
  ];

  let api = $state();
  let filterCity = $state("New York");

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

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

  // Apply filter automatically whenever the filterCity changes
  $effect(() => {
    if (filterCity && api)
      applyFilter(filterCity);
  });

  // Listen to filter-rows event and log the handler action (for debugging)
  function init(api){
    api.on("filter-rows", (ev) => {
      console.log("Filtered rows:", ev.handler);
    });
  }
</script>

<input type="text" bind:value={filterCity} placeholder="Filter by City" />

<Grid {data} {columns} bind:this={api} {init} />

Related articles: