Blazor DataGrid Example - Default Filtering
Category Name | Product Name | Quantity per Unit | Units in Stock | Discontinued |
|---|---|---|---|---|
| Beverages | Chai | 10 boxes x 20 bags | 39 | True |
| Beverages | Chang | 24 - 12 oz bottles | 17 | True |
| Beverages | Chartreuse verte | 750 cc per bottle | 69 | True |
| Beverages | Cte de Blaye | 12 - 75 cl bottles | 17 | False |
| Beverages | Ipoh Coffee | 16 - 500 g tins | 17 | True |
| Beverages | Lakkalikri | 500 ml | 57 | True |
| Beverages | Laughing Lumberjack Lager | 24 - 12 oz bottles | 52 | False |
| Beverages | Outback Lager | 24 - 355 ml bottles | 15 | False |
| Beverages | Rhnbru Klosterbier | 24 - 0.5 l bottles | 125 | False |
| Beverages | Sasquatch Ale | 24 - 12 oz bottles | 111 | True |
| Beverages | Steeleye Stout | 24 - 12 oz bottles | 20 | True |
| Condiments | Aniseed Syrup | 12 - 550 ml bottles | 13 | True |
This sample demonstrates the DataGrid's default filtering functionality with filter bar input.
The Blazor DataGrid filtering feature allows users to view a subset of records based on filter criteria. To enable filtering, set the AllowFiltering property to true.
When filtering is enabled, a filter bar row appears below the column headers, allowing users to enter filter criteria. To filter a specific column in this demo, type the desired value in the filter bar cell and press Enter.
The filter bar supports two activation modes:
- OnEnter - The filter is activated only when the Enter key is pressed, providing explicit control over filtering.
- Immediate - The filter begins automatically after a 1500ms delay from when the user stops typing, enabling real-time filtering without explicit activation. Configure the delay duration using the GridFilterSettings component's ImmediateModeDelay property.
In this demo, you can filter the DataGrid by typing text into the filter bar cells.
For more detailed information about filtering, refer to the filtering documentation.