Checkbox Filtering in React Data Grid
Checkbox filtering in the Syncfusion® React Data Grid displays unique column values in a popup list with checkboxes. To ensure fast loading, an initial set of values is shown by default, while additional records are retrieved during scrolling. Built‑in virtualization manages large datasets efficiently by rendering only visible items and loading others on demand, maintaining smooth performance even with extensive lists. A search option in the checkbox filter popup enhances usability by enabling quick lookup and precise filtering of values.
Enable Checkbox filtering
Checkbox filtering in the Data Grid can be enabled by setting the filterSettings.type property to CheckBox. This mode displays all unique column values as a checklist, allowing quick selection and filtering.
String columns in the Data Grid include an additional option, "Add current selection to filter", which appears after performing a search in the filter dialog. This option retains existing selections while adding new ones, making it easy to build cumulative filters without re‑selecting values each time. The behavior is similar to Microsoft Excel’s filter functionality, providing a familiar and efficient way to refine data.
Set filter type per column
The Data Grid supports multiple filter types, allowing customization at the column level. To apply Excel‑style filtering instead of checkbox filtering for a specific column, filter.type property to Excel in that column’s configuration. This ensures the column displays Excel filtering options rather than the default checkbox filter.
In this example, the "Task ID", "State", "Assigned Date" and "Deadline" columns filter type set as Excel.
Hide search option in Checkbox filter
The checkbox filter popup includes a search box by default to help find values in the checklist. To hide the search box for a specific column, handle the onFilterDialogBeforeOpen event and set args.options.disableSearchOption = true for the target column in the event handler.
In this example, the search box in the checkbox filter popup for the "Status" column is hidden by setting args.options.disableSearchOption = true inside the onFilterDialogBeforeOpen event.
Bind custom data source
The checkbox filter dialog in the Data Grid can display values from a custom list instead of using the data in the column. A custom list is assigned to the options.dataSource property inside the onFilterDialogBeforeOpen event. When the filter dialog opens, it shows values from this custom source, making filtering simpler and more flexible.
In this example, a hotel booking management system restricts the "Payment Status" filter to display only "Paid" and "Pending" options. By excluding "Cancelled" and "Refunded" statuses from the filter choices, staff can quickly focus on active bookings that require attention, improving operational efficiency for tasks like room allocation, guest services, and revenue management.