Excel Mode Filtering in React Grid
Excel-like filtering in the Syncfusion React Data Grid delivers a familiar, Excel-style interface that makes working with data faster and more intuitive. Searchable checkbox lists, quick value lookup, and built-in sorting options make it easy to create complex filter combinations in significantly less time — providing a true Excel-like experience.
Enable Excel mode filtering
Excel mode filtering is enabled by setting the filterSettings.type property to Excel in the Grid. Each column displays a filter icon, and clicking it opens an Excel‑style filter popup for applying filter options.
Set filter type per column
The Data Grid supports multiple filter types, allowing customization at the column level. To apply Checkbox‑style filtering instead of Excel filtering for a specific column, filter.type property to CheckBox in that column’s configuration. This ensures the column displays checkbox filtering options rather than the default excel filter.
In this example, the "Title", "Assignee" and "Department" columns filter type set as CheckBox.
Hide sort and search in Excel filter
The search and sorting options in the Excel filter popup can be hidden using the onFilterDialogBeforeOpen event. To hide these options for specific columns, set args.options.disableSearchOption and args.options.disableSortOption to true.
In this example, the "Status" column hides both the search and sort options in the Excel filter popup.
Bind custom data source
By default, the Excel‑style filter dialog displays the unique values from a column’s data. This list can be replaced with a custom set of values to control which options appear in the filter popup. To update the filter values, set the desired data to the options.dataSource property inside the onFilterDialogBeforeOpen event. When the dialog opens, it shows the specified values, providing greater flexibility and control over the filtering options.
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. The sort option in the Excel filter popup is hidden for all columns by setting args.options.disableSortOption = true in the onFilterDialogBeforeOpen event.