Unlocking Ag Grid Table Search and Or Capabilities for Your Application

Ag Grid's table search and OR capabilities are a game-changer for applications that require complex filtering. This feature allows users to search for multiple values at once, making it a powerful tool for data analysis and visualization.

With Ag Grid's OR functionality, users can enter multiple search terms separated by the OR operator, and the grid will return rows that match any of the search terms. For example, a user might search for "customer name" or "order date" to find all rows that match either of these conditions.

This feature is particularly useful when working with large datasets, where users need to quickly find specific information. By leveraging Ag Grid's OR capabilities, developers can create more intuitive and user-friendly interfaces that save users time and effort.

For another approach, see: In a Contingency Table the Number of Rows and Columns

AG Grid allows you to display tool panels alongside the grid, which can include custom functionality. By default, you have a columns and a filters tool panel.

You can add your own tool panels for any custom functionality, and the article shows an example of two custom tool panels for setting AND and OR-filtering conditions separately.

The OR-filtering tool panel applies OR-Filtering conditions to the data and binds the result to the AG Grid row data property.

The AND-filtering tool panel applies AND-Filtering conditions to AG Grid row data, displaying the matching records in the grid.

To demonstrate this, the article uses a specific dataset.

For another approach, see: Ag Grid Search

Filtering is a crucial aspect of any table search and filter system, and ag grid is no exception. The default filtering behavior of ag grid applies AND-filtering, which means that rows must pass every column filter condition to get filtered through.

Ag grid provides two types of filtering: AND-filtering and OR-filtering. AND-filtering is the default behavior, where rows must pass every column filter condition to get filtered through. OR-filtering, on the other hand, allows rows that pass any filter condition to be filtered through.

To implement OR-filtering, you can use the OrFilterPanel component, which creates a state variable availableFilterOptions, where every key is an AG Grid column and every value is a JavaScript Array containing all the unique values in DataContext.rowData for that key. Each key-value pair in availableFilterOptions is then bound to a ReactSelectMe Dropdown element.

The number of filter options displayed can be controlled by setting the Filter Parameter maxNumConditions. By default, each filter initially only displays one Filter Condition, and when the user completes all the visible Filter Conditions, another Filter Condition becomes visible.

Here's a summary of the Filter Parameters:

Custom filter options can also be added to the number, text, and date filters using the IFilterOptionDef interface. This interface has several properties, including displayKey, displayName, predicateFunction, and numberOfInputs.

Custom filter placeholder text can be customized on a per column basis using filterParams.filterPlaceholder within the grid option columnDefs. The placeholder can be either a string or a function.

Accessing Data is a crucial part of our ag grid table search and OR functionality. We keep track of two separate sets of row data: the original, unfiltered row data and rows matching the OR-filtering conditions.

These two sets of data are stored in a React Context, which is accessible from anywhere within the application. This allows us to easily access and manipulate the data as needed.

The React Context stores two variables: rowData and orFilteredData. rowData contains the original, unfiltered row data, while orFilteredData contains the rows that match the OR-filtering conditions.

Here's a brief overview of what we're working with:

By keeping these two sets of data separate, we can easily apply filtering conditions and update the table accordingly.

AG Grid row data is not directly bound to the unfiltered original set of rows, but rather to an OR-filtered version of the data.

The grid receives data that may already be OR-filtered, allowing it to apply its built-in AND-filtering conditions on top of the OR-filtered data if needed.

The AG Grid instance binds its rowData property to DataContext.orFilteredRowData immutably.

This approach means the OR-filtering is applied externally from the grid and is transparent to it.

Filter Configuration is a crucial part of ag grid table search and OR functionality. It allows you to customize the filtering behavior of your grid to suit your specific needs.

You can create custom filter panels using components like OrFilterPanel, which enables OR-filtering conditions. This panel creates a state variable called availableFilterOptions, where each key is an AG Grid column and each value is an array of unique values from the data context.

To apply OR-filtering, you need to bind the selected dropdown options to a state variable called selectedFilterOptions. This variable contains the filtering conditions to be used in the OR-filtering algorithm.

The grid's filter model can be customized using filterParams.filterOptions, which allows you to add new custom filtering options to the number, text, and date filters. Custom filter options must conform to the IFilterOptionDef interface, which has properties like displayKey, displayName, predicate, and numberOfInputs.

The number of filter values and corresponding inputs is controlled by the numberOfInputs property, which can be set to 0, 1, or 2. If set to 0, all inputs are hidden, and an empty array of filter values is provided to the predicate function.

The join operator decides how the filter conditions are joined, using either AND or OR. The first join operator is editable when there are multiple.

Here's a summary of the filter configuration options:

By configuring these options, you can create a custom filter panel that meets your specific needs and provides a better user experience for your users.

Customization is key to making your ag grid table search and OR filtering experience truly tailored to your needs. You can create custom filter panels to handle OR-filtering conditions, like the OrFilterPanel, which creates a state variable to store available filter options for each column.

By using a custom tool panel, you can efficiently render dropdowns with long lists of options, thanks to the ReactSelectMe Dropdown element's virtualization feature. This allows you to display all the distinct cell values in a column.

To customize filter options, you can add new options to the built-in number, text, and date filters. For example, you can include a 'Not Equal (with Nulls)' filter option alongside the built-in 'Not Equal' option. Custom filter options must conform to the IFilterOptionDef interface, which includes properties like displayKey, displayName, predicate, and numberOfInputs.

You can customize the filter placeholder text on a per-column basis using filterParams.filterPlaceholder within the grid option columnDefs. This can be a string or a function, and when using a function, it receives parameters like filterOptionKey, filterOption, and placeholder.

Customizing Filter Placeholder Text can be a game-changer for your grid's usability.

Filter placeholder text can be customized on a per column basis using the filterParams.filterPlaceholder within the grid option columnDefs.

The placeholder can be either a string or a function, giving you flexibility in how you present the filter options to your users.

If you choose to use a function, the parameters include the filter option key, the filter option name as localised text, and the default placeholder text.

You can see the various ways of specifying filter placeholders in action by clicking on the filter menu for the different columns in the header row.

The Athlete column shows the default placeholder of Filter... with no configuration, while the Country column shows the string Country... for all filter options.

The Sport column shows the filter option key with the default placeholder, such as contains - Filter....

The Total column shows the filter option name with the suffix total, such as Equals total.

Here's a quick rundown of the different filter placeholder examples:

You can visually highlight search results within the displayed data using the Syncfusion Grid component.

This feature helps you quickly identify where the search items are found within the displayed data.

By adding a style to the matched text, you can quickly identify where the search items are present in the grid.

The queryCellInfo event is used to achieve search text highlighting in the Grid.

The queryCellInfo event checks if the current cell is in the desired search column, retrieves the cell value, search keyword, and uses the includes method to check if the cell value contains the search keyword.

If the cell value contains the search keyword, the matched text is replaced with the same text wrapped in a span tag with a custom CSS class.

You can use CSS to define the custom CSS class and style to easily identify where the search keywords are present in the grid.

The matched text can be cleared by using the clear icon within the search input field.