LyteNyte Grid logo for light mode. Links back to the documentation home page.
Github repository for this project. 1771 Technologies home page
Filtering

Quick Search Filtering

A quick search filter uses a query string to filter rows by matching the search term against all or selected values in a row.

Note

Applying a quick search filter varies depending on the row source. Refer to the guides below for each supported row data source:

While this guide focuses on using client row filtering, these filter concepts apply to all row sources.

Implementing Quick Search

Implement quick search by passing a filter function to the grid that checks whether a cell value contains the search string. The demo below uses a case-insensitive inclusion match. For fuzzy search, integrate a library like Fuse.js.

Quick Search Filter

Fork code on stack blitzFork code on code sandbox

The demo tracks a query value in state, generates a corresponding filter function, and passes it to the data source.

const [query, setQuery] = useState("");


const filterFn = useMemo(() => {
  if (!query) return null;


  return (row: Grid.T.RowLeaf<GridSpec["data"]>) => {
    const d = row.data;
    const stringValue = `${d.customer} ${d.email} ${d.paymentMethod} ${d.product} ${d.productDescription} ${d.purchaseDate} ${d.cardNumber}`;


    return stringValue.toLowerCase().includes(query.toLowerCase());
  };
}, [query]);

An input element updates the query value. The input is debounced to ensure that the filter does not run on every keystroke, as shown in the following example.

<input
  data-ln-input
  onChange={(e) => {
    const value = e.target.value;


    if (t.current) clearTimeout(t.current);


    // Simple debounce
    t.current = setTimeout(() => {
      setQuery(value);
      t.current = null;
    }, 100);
  }}
/>

Next Steps