React Grid Search Filter

The Ignite UI for React Search Filter feature in React Grid enables the process of finding values in the collection of data. We make it easier to set up this functionality and it can be implemented with a search input box, buttons, keyboard navigation and other useful features for an even better user experience. While browsers natively provide content search functionality, most of the time the IgrGrid virtualizes its columns and rows that are out of view. In these cases, the native browser search is unable to search data in the virtualized cells, since they are not part of the DOM. We have extended the React Material table-based grid with a search API that allows you to search through the virtualized content of the IgrGrid.

React Search Example

The following example represents IgrGrid with search input box that allows searching in all columns and rows, as well as specific filtering options for each column.

React Search Usage

Grid Setup

Let's start by creating our grid and binding it to our data. We will also add some custom styles for the components we will be using!

.gridSize {
    --ig-size: var(--ig-size-small);
}

<IgrGrid ref={gridRef} className="gridSize" autoGenerate="false" allowFiltering="true" data={data}>
    <IgrColumn field="IndustrySector" dataType="string" sortable="true"></IgrColumn>        
    <IgrColumn field="IndustryGroup" dataType="string" sortable="true"></IgrColumn>        
    <IgrColumn field="SectorType" dataType="string" sortable="true"></IgrColumn>        
    <IgrColumn field="KRD" dataType="number" sortable="true"></IgrColumn>        
    <IgrColumn field="MarketNotion" dataType="number" sortable="true"></IgrColumn>  
</IgrGrid>

Great, and now let's prepare for the search API of our IgrGrid! We can create a few properties, which can be used for storing the currently searched text and whether the search is case sensitive and/or by an exact match.

const gridRef = useRef<IgrGrid>(null);
const searchIconRef = useRef<IgrIconButton>(null)
const clearIconRef = useRef<IgrIconButton>(null);
const iconButtonPrevRef = useRef<IgrIconButton>(null);
const caseSensitiveChipRef = useRef<IgrChip>(null);
const exactMatchChipRef = useRef<IgrChip>(null);
const iconButtonNextRef = useRef<IgrIconButton>(null);
const [searchText, setSearchText] = useState('')

React Search Box Input

Now let's create our search input! By binding our searchText to the value property to our newly created input and subscribe to the inputOccured event, we can detect every single searchText modification by the user. This will allow us to use the IgrGrid's findNext and findPrev methods to highlight all the occurrences of the searchText and scroll to the next/previous one (depending on which method we have invoked).

Both the findNext and the findPrev methods have three arguments:

• Text: string (the text we are searching for)
• (optional) CaseSensitive: boolean (should the search be case sensitive or not, default value is false)
• (optional) ExactMatch: boolean (should the search be by an exact match or not, default value is false)

When searching by an exact match, the search API will highlight as results only the cell values that match entirely the SearchText by taking the case sensitivity into account as well. For example the strings 'software' and 'Software' are an exact match with a disregard for the case sensitivity.

The methods from above return a number value (the number of times the IgrGrid contains the given string).

function handleOnSearchChange(input: IgrInput, event: IgrComponentValueChangedEventArgs) {
    setSearchText(event.detail);
    gridRef.current.findNext(event.detail, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
}

function nextSearch() {
    gridRef.current.findNext(searchText, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
}


<IgrInput name="searchBox" value={searchText} inputOcurred={handleOnSearchChange}>
</IgrInput>

Add Search Buttons

In order to freely search and navigate among our search results, let's create a couple of buttons by invoking the findNext and the findPrev methods inside the buttons' respective click event handlers.

function prevSearch() {
    gridRef.current.findPrev(searchText, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
}

function nextSearch() {
    gridRef.current.findNext(searchText, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
}

<IgrIconButton key="prevIconButton" ref={iconButtonPrevRef} variant="flat" name="prev" collection="material" clicked={prevSearch}>
</IgrIconButton>
<IgrIconButton key="nextIconButton" ref={iconButtonNextRef} variant="flat" name="next" collection="material" clicked={nextSearch}>
</IgrIconButton>

Add Keyboard Search

We can also allow the users to navigate the results by using the keyboard's arrow keys and the Enter key. In order to achieve this, we can handle the keydown event of our search input by preventing the default caret movement of the input with the PreventDefault method and invoke the findNext/findPrev methods depending on which key the user has pressed.

function searchKeyDown(e: KeyboardEvent<HTMLElement>) {
    if (e.key === 'Enter') {
        e.preventDefault();
        gridRef.current.findNext(searchText, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
    } else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
        e.preventDefault();
        gridRef.current.findPrev(searchText, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
    }
}

 <div onKeyDown={searchKeyDown}>
    <IgrInput name="searchBox" value={searchText} inputOcurred={handleOnSearchChange}></IgrInput>
</div>

Case Sensitive and Exact Match

Now let's allow the user to choose whether the search should be case sensitive and/or by an exact match. For this purpose we can use the IgrChip and get its reference and use the selected property.

const caseSensitiveChipRef = useRef<IgrChip>(null);
const exactMatchChipRef = useRef<IgrChip>(null);

function updateSearch() {
    gridRef.current.findNext("searchValue", caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
}

<IgrChip ref={caseSensitiveChipRef} key="caseSensitiveChip" selectable="true">
    <span key="caseSensitive">Case Sensitive</span>
</IgrChip>
<IgrChip ref={exactMatchChipRef} key="exactMatchChip" selectable="true">
    <span key="exactMatch">Exact Match</span>
</IgrChip>

Persistence

What if we would like to filter and sort our IgrGrid or even to add and remove records? After such operations, the highlights of our current search automatically update and persist over any text that matches the SearchText! Furthermore, the search will work with paging and will persist the highlights through changes of the IgrGrid's PerPage property.

Adding icons

By using some of our other components, we can create an enriched user interface and improve the overall design of our entire search bar! We can have a nice search or delete icon on the left of the search input, a couple of chips for our search options and some material design icons combined with nice ripple styled buttons for our navigation on the right. We can wrap these components inside an input group for a more refined design.

import { IgrGridModule } from "igniteui-react-grids";
import { IgrChipModule } from "igniteui-react";

const mods: any[] = [IgrGridModule, IgrChipModule];
mods.forEach((m) => m.register());

Finally, let's update our template with the new components!

const prevIconText =
  "<svg width='24' height='24' viewBox='0 0 24 24'><path d='M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z'></path></svg>";
const nextIconText =
  "<svg width='24' height='24' viewBox='0 0 24 24'><path d='M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'></path></svg>";
const clearIconText =
  "<svg width='24' height='24' viewBox='0 0 24 24' title='Clear'><path d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'></path></svg>";
  const searchIconText =
  "<svg width='24' height='24' viewBox='0 0 24 24'><path d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z' /></svg>";

useEffect(() => {
     if (searchIconRef?.current) {
      searchIconRef.current.registerIconFromText("search", searchIconText, "material");
      searchIconRef.current.registerIconFromText("clear", clearIconText, "material");
    }
    if (iconButtonPrevRef?.current) {
        iconButtonPrevRef.current.registerIconFromText("prev", prevIconText, "material");
    }
    if (iconButtonNextRef?.current) {
        iconButtonNextRef.current.registerIconFromText("next", nextIconText, "material");
    }
}, []);

<IgrInput name="searchBox" value={searchText} inputOcurred={handleOnSearchChange}>
    <div slot="prefix" key="prefix">
        {searchText.length === 0 ? (
            <IgrIconButton
              key="searchIcon"
              ref={searchIconRef} 
              variant="flat"
              name="search" 
              collection="material"
            ></IgrIconButton>
            ) : (
            <IgrIconButton
              key="clearIcon"
              ref={clearIconRef}
              variant="flat"
              name="clear"
              collection="material"
              clicked={clearSearch}
            ></IgrIconButton>
        )}
    </div>
    <div slot="suffix" key="chipSuffix">
        <IgrChip ref={caseSensitiveChipRef} key="caseSensitiveChip" selectable="true">
        <span key="caseSensitive">Case Sensitive</span>
        </IgrChip>
        <IgrChip ref={exactMatchChipRef} key="exactMatchChip" selectable="true">
        <span key="exactMatch">Exact Match</span>
        </IgrChip>
    </div>
    <div slot="suffix" key="buttonsSuffix">
        <IgrIconButton key="prevIconButton" ref={iconButtonPrevRef} variant="flat" name="prev" collection="material" clicked={prevSearch}>
        </IgrIconButton>
        <IgrIconButton key="nextIconButton" ref={iconButtonNextRef} variant="flat" name="next" collection="material" clicked={nextSearch}>
        </IgrIconButton>
    </div>
</IgrInput>

On the right in our input group, let's create three separate containers with the following purposes:

• For displaying a couple of chips that toggle the CaseSensitive and the ExactMatch properties. We have replaced the checkboxes with two stylish chips that change color based on these properties. Whenever a chip is clicked, we invoke its respective handler.

<div slot="suffix" key="chipSuffix">
    <IgrChip ref={caseSensitiveChipRef} key="caseSensitiveChip" selectable="true" select={handleCaseSensitiveChange}>
        <span key="caseSensitive">Case Sensitive</span>
    </IgrChip>
    <IgrChip ref={exactMatchChipRef} key="exactMatchChip" selectable="true" select={handleExactMatchChange}>
        <span key="exactMatch">Exact Match</span>
    </IgrChip>
</div>

function handleCaseSensitiveChange(chip: IgrChip, event: IgrComponentBoolValueChangedEventArgs) {
  gridRef.current.findNext(searchText, event.detail, exactMatchChipRef.current.selected);
}
function handleExactMatchChange(chip: IgrChip, event: IgrComponentBoolValueChangedEventArgs) {
  gridRef.current.findNext(searchText, caseSensitiveChipRef.current.selected, event.detail);
}

• For the search navigation buttons, we have transformed our inputs into ripple styled buttons with material icons. The handlers for the click events remain the same - invoking the findNext/findPrev methods.

function prevSearch() {
    gridRef.current.findPrev(searchText, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
}

function nextSearch() {
    gridRef.current.findNext(searchText, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
}

<div slot="suffix" key="buttonsSuffix">
    <IgrIconButton key="prevIconButton" ref={iconButtonPrevRef} variant="flat" name="prev" collection="material" clicked={prevSearch}>
    </IgrIconButton>
    <IgrIconButton key="nextIconButton" ref={iconButtonNextRef} variant="flat" name="next" collection="material" clicked={nextSearch}>
    </IgrIconButton>
</div>

Known Limitations

Limitation	Description
Searching in cells with a template	The search functionality highlights work only for the default cell templates. If you have a column with custom cell template, the highlights will not work so you should either use alternative approaches, such as a column formatter, or set the searchable property on the column to false.
Remote Virtualization	The search will not work properly when using remote virtualization
Cells with cut off text	When the text in the cell is too large to fit and the text we are looking for is cut off by the ellipsis, we will still scroll to the cell and include it in the match count, but nothing will be highlighted

API References

In this article we implemented our own search bar for the IgrGrid with some additional functionality when it comes to navigating between the search results. We also used some additional Ignite UI for React components like icons, chips and inputs. The search API is listed below.

IgrGrid methods:

• findNext
• findPrev
• clearSearch
• refreshSearch

IgrColumn properties:

• searchable

Additional components with relative APIs that were used:

• IgrIcon
• IgrChip

Additional Resources

• Virtualization and Performance
• Filtering
• Paging
• Sorting
• Summaries
• Column Moving
• Column Pinning
• Column Resizing
• Selection

Our community is active and always welcoming to new ideas.

• Ignite UI for React Forums
• Ignite UI for React GitHub