React Data GridFind

Find allows for values to be searched within the grid, with all matches highlighted and navigable, similar to find (^ Ctrl + F) within the browser.

Enabling Find Copy

Find is enabled by setting the grid option findSearchValue with the text to be searched for.

const findSearchValue = 'rowing';

<AgGridReact findSearchValue={findSearchValue} />

The grid API methods findNext(), findPrevious(), and findGoTo(matchNumber) can be used to move between the matches, or findClearActive() can be used to clear the active match.

Changing the Find search value, changing the active match, or updates to the grid that cause changes to the visible cells (e.g. changing columns/rows) trigger the findChanged event. The event contains details on the active match, as well as the total number of matches.

The active match and the total number of matches can also be retrieved via the API.

Using Find with Cell Components Copy

By default, Find searches within the Formatted Value of the cell, or the raw cell value if there is no Value Formatter. This is what is displayed in the cell by default.

Cell Components may display text that does not appear in the cell value. To enable Find to search within this additional text, the getFindText callback can be implemented on the Column Definition. Find will search within this value for matches.

const [columnDefs, setColumnDefs] = useState([
    {
        field: 'year',
        getFindText: params => `Year is ${params.value}`,
    }
]);

<AgGridReact columnDefs={columnDefs} />

When providing a custom cell component, the component is responsible for highlighting any matches and active matches within the cell. The grid API provides the following methods to help with this.

The following example demonstrates a custom cell component in the Year column, which uses the features described above. The custom cell component reuses the grid CSS classes ag-find-match and ag-find-active-match to apply the same styling as the default grid cell component.

Customising Find Copy

Find can be customised by providing an object of type FindOptions to the grid option findOptions.

const findOptions = {
    caseSensitive: true,
    currentPageOnly: true,
};

<AgGridReact findOptions={findOptions} />

The following example demonstrates performing a case sensitive search, and finding matches within the current page only:

Find with Master / Detail Copy

When using Master / Detail, Find will not search within detail rows by default (either Detail Grids or Custom Details). To enable Find to search within detail rows, set searchDetail within findOptions to true:

const findOptions = {
    searchDetail: true,
};

<AgGridReact findOptions={findOptions} />

Detail Grids Copy

If a row containing a Detail Grid is expanded, Find will automatically search within the Detail Grid. If the master row is not expanded, the grid does not exist yet, so Find does not know how many matches there are. Find cannot create all of the Detail Grids as there may be a very large number of them.

If you want Find to search within collapsed detail rows, then you must provide the getFindMatches callback to the detailCellRendererParams grid option. This tells Find how many matches are expected to be in the Detail Grid. If the active match moves to within the Detail Grid, the Detail Grid will automatically be expanded.

The following example demonstrates Find across nested Master / Detail Grids:

Custom Detail Copy

For Find to work with Custom Detail Cells, Find needs to know how many matches are within the detail row. This is done by providing the getFindMatches callback to the detailCellRendererParams grid option. This tells Find how many matches are expected to be in the Custom Detail. If the active match moves to within the Custom Detail, the Custom Detail will automatically be expanded.

The Custom Detail Cell Component is responsible for highlighting matches, similar to Custom Cell Components.

The following example demonstrates Find across Custom Details:

Find with Full Width Rows Copy

For Find to work with Full Width Rows, Find needs to know how many matches are within the row. This is done by providing the getFindMatches callback to the fullWidthCellRendererParams grid option. This tells Find how many matches are expected to be in the Full Width Row.

The Full Width Row Component is responsible for highlighting matches, similar to Custom Cell Components.

The following example demonstrates Find with Full Width Rows:

Find with Custom Group Row Component Copy

Using Find with a Custom Group Row Inner Component (groupRowRendererParams.innerRenderer) or a Custom Group Row Component (groupRowRenderer) is similar to using Using Find with Cell Components. If the component displays text that does not appear in the cell value, the getFindText callback can be implemented on the groupRowRendererParams grid option. Find will search within this value for matches.

const groupRowRendererParams = {
    getFindText: params => `Group value is ${params.value}`,
};

<AgGridReact groupRowRendererParams={groupRowRendererParams} />

Content to Search Copy

Find is designed to search within "visible" cell contents.

Searching is not performed within hidden columns. Columns not displayed due to Column Groups being expanded/collapsed are counted as being hidden.

The rows are searched after filtering and sorting have been performed.

Searching will be performed within the children of Collapsed Row Groups. When the active match is set to a child row within a collapsed group, the group is expanded (along with its parents if necessary).

When using Row Pagination, searching will be performed across all pages by default.

See the Customising Find section for an example of using Find with Row Grouping, as well as how to customise behaviour for Pagination.

If data is mutated outside of the grid (e.g. not via grid options or API methods), Find will not re-run automatically. This would apply to situations where api.refreshCells() or api.redrawRows() are being used. To get Find to update, api.findRefresh() should be called after either of these API methods.