Blazor DataGrid Example - Excel-like Filtering
Order ID Press Alt Down to open filter Menu | Customer ID Press Alt Down to open filter Menu | Freight Press Alt Down to open filter Menu | Ship City Press Alt Down to open filter Menu | Ship Country Press Alt Down to open filter Menu |
|---|
| 10001 | ALFKI | $2.30 | Berlin | Denmark |
| 10002 | ANATR | $3.30 | Madrid | Brazil |
| 10003 | ANTON | $4.30 | Cholchester | Germany |
| 10004 | BLONP | $5.30 | Marseille | Austria |
| 10005 | BOLID | $6.30 | Tsawassen | Switzerland |
| 10006 | ALFKI | $4.60 | Berlin | Denmark |
| 10007 | ANATR | $6.60 | Madrid | Brazil |
| 10008 | ANTON | $8.60 | Cholchester | Germany |
| 10009 | BLONP | $10.60 | Marseille | Austria |
| 10010 | BOLID | $12.60 | Tsawassen | Switzerland |
| 10011 | ALFKI | $6.90 | Berlin | Denmark |
| 10012 | ANATR | $9.90 | Madrid | Brazil |
This sample demonstrates filtering DataGrid columns using the Excel-like filter UI.
The Excel-like filter provides an advanced filtering interface that allows users to build complex filter criteria by selecting values from a checkbox list. Users can also access advanced filtering options such as sorting, clearing filters, and hierarchical submenus.
To enable filtering, set the AllowFiltering property to true. Change the filter type to Excel using the Type property of the GridFilterSettings component.
The DataGrid supports the following filter types:
- Filterbar - Text-based filtering row
- Menu - Dropdown filter menu
- Checkbox - Checkbox selection filter
- Excel - Excel-like advanced filter interface
In this demo, click the filtering icon in the column header to display the Excel-like filter UI.
For more detailed information about filtering, refer to the filtering documentation.