Filter Bar in React Data Grid

The Syncfusion® React Data Grid component provides a filter bar with input fields at the column level to define filter criteria. Setting filterSettings.enabled to true displays the filter row directly below the column headers.

Filter bar expressions

The following filter expressions (operators) can be entered manually in the filter bar.

Filter bar expressions are supported only for columns that use the default TextBox filter component. They are automatically disabled when the filterBarType property is explicitly defined, since custom filter UI types do not support expression‑based filtering.

Enable filter operator popup

The Data Grid supports dynamic operator selection in filter bars, providing more flexible filtering than the default fixed configuration. Operators can be changed directly while interacting with the grid.

When filterSettings.enableFilterBarOperators is set to true, each filter bar cell displays a dropdown list of operators specific to its column type. The available operators include:

• String: equals, contains, starts with, and other string operators.

• Date and Number: greater than, less than, equals, and related numeric operators.

• Boolean: true or false.

Option to change the default filter operator in the filter popup

By default, string columns use the "starts with" operator, while number, date, and boolean columns use the "equals" operator.

In the filter popup, the default operator for a column can be changed by specifying the filter.operator property in the column definition. This property replaces the built in default (such as "starts with" for strings or "equals" for numbers, dates, and booleans) with the operator you define.

Option to customize the operator list in the filter popup

By default, the Data Grid displays all available operators in the dropdown list based on the column type. The operators shown in the filter popup can be customized for each column by setting the filter.filterOperators property in the column configuration. This property accepts an array of string values and specifies which operators appear in the filter popup, allowing the UI to be customized to meet specific requirements.

Built in filter bar types

The Data Grid component assigns filter bar types based on column data types through the filter.filterBarType property, which streamlines input handling and customization. By default, the grid renders a Syncfusion® React TextBox component in the filter bar for each column. Filter values can be entered directly into these input fields. The TextBox component accepts all input types as strings, including numeric expressions. The available filter types are:

Customizing filter bar types

The Data Grid component enables customization of filter bar input controls through the filter.params property, providing control over the appearance and behavior of filters based on different data types.

TextBox filter type with placeholder configuration

The FilterBarType.TextBox type uses the Syncfusion® React TextBox component for filtering string data. The textbox can be customized using the filter.params property, which supports attributes such as clearButton, placeholder, and other textbox-specific properties. The following example demonstrates adding a placeholder and positioning it with labelMode for all the columns.

NumericTextBox filter type with spin button configuration

The FilterBarType.NumericTextBox type uses the Syncfusion® React NumericTextBox component for filtering numeric data. The numeric textbox can be customized using the filter.params property, which supports attributes such as clearButton, min, max, spinButton, and other numeric textbox specific properties. In the following example, the NumericTextBox component used to filter the "Units Sold" column, by setting the filter.params to enable a spinButton along with min as "1" and max as "100".

DatePicker filter type with date range configuration

The FilterBarType.DatePicker type uses the DatePicker component for filtering date values. The datepicker can be customized using the filter.params property, which supports attributes such as minDate, maxDate, placeholder and other datepicker specific properties. The following example demonstrates setting minDate to "January" and maxDate to "February" for the "Booking Date" column, and minDate to "March" and maxDate to "April" for the "Appointment Date" column to enable quick date filtering.

Filter bar modes

The Data Grid component provides two modes for applying filters through the filter bar are FilterBarMode.Immediate and FilterBarMode.OnEnter. These modes are configured by setting filterSettings.mode to the desired option. Each mode provides a unique interaction pattern, selectable based on performance considerations and layout preferences.

Immediate mode

By default, the Data Grid component uses the FilterBarMode.Immediate setting for its filter bar. In this mode, filtering occurs in real-time as input is typed. A filter request is automatically triggered every "1500ms" after the last character is entered. If no further input is received within that interval, the current input value is used to execute the filter action.

The delay between filter requests can be adjusted by setting the filterSettings.immediateModeDelay property.

const filterSettings: FilterSettings = {
    enabled: true,
    mode: FilterBarMode.Immediate,
    type: 'FilterBar',
    immediateModeDelay: 2000,
};

This property is applicable only when using FilterBarMode.Immediate mode.

OnEnter mode

When filterSettings.mode is set to FilterBarMode.OnEnter, the grid captures the filter input but does not apply filtering until the Enter key is pressed.

Optimizing Data Grid component performance with OnEnter filter mode

By default, the Data Grid component sends filter requests to the server at regular intervals in FilterBarMode.Immediate mode as input is typed. To enhance performance and reduce frequent server calls, configure the filterSettings.mode property to FilterBarMode.OnEnter. In this mode, filtering is triggered only when the Enter key is pressed, optimizing server interactions.

Filter bar template with custom component

By default, the grid displays a TextBox component in the filter bar cell. To render different components such as DatePicker, NumericTextBox, or DropdownListin the filter bar, use the filterTemplate property in the grid column configuration.

Hide filter bar for template column

By default, the filter bar is disabled for template columns in the grid. To hide the filter bar input and enable a customized filtering experience, set the column’s filterTemplate property.

See also

• Disabling Filtering for Specific Columns

• Grid Filtering Event Reference

• Handling Filtering in Custom API Services