Quick Filter / Search grid data

[Ben-CA]

Use case

Would be nice if there was integrated full search / filtering support, rather than having to develop such separately.

Proposed solution

Something like this:
https://www.ag-grid.com/react-data-grid/filter-quick/

AG Grid supports a zillion things, many of which are not needed in a small project. But almost every data grid "should" have a search field. (And because of virtualization, the Ctrl + F in-browser search won't work.)

[Ben-CA]

I suppose this can be added fairly easily separate from the grid itself:

  const filteredRows = useMemo(() => {
    if (filterText === "") { return rows; } // bypass filtering if no search term
    const lowerCaseFilter = filterText.toLowerCase();
    return rows.filter(row => {
      return Object.keys(row).some(key => {
        return String(row[key]).toLowerCase().includes(lowerCaseFilter);
      });
    });
  }, [rows, filterText]);

Where you have an input set the filterText, rows is the original data, and then you reference the filtered rows like this:

<DataGrid
        columns={columns}
        rows={filteredRows}
/>