How to Filter a Blazor Table Control using .NET

Filtering is a fundamental feature in data-driven applications, enabling users to find and focus on the information that matters most quickly. As datasets grow larger and more complex, efficient filtering becomes essential for improving usability and productivity.

In a previous topic, we covered how to convert an HTML Blazor table into a rich datagrid using ComponentOne FlexGrid for Blazor.

By using FlexGrid instead of a regular HTML table, you can easily implement a wide variety of filtering solutions. This tutorial will look at the different ways to filter a Blazor datagrid, including Excel-like column filters, a search box, a filter row, and a customizable filter panel using ComponentOne DataFilter.

We will explore:

• How to Filter using Column Filters
• How to Filter using a Search Box
• How to Filter using a Filter Row
• How to Filter using a Filter Panel

Ready to Try It Out? Download ComponentOne Today!

How to Filter a Blazor Datagrid using Column Filters

For a familiar spreadsheet-style experience, FlexGrid supports built-in Excel-like column filters. These filters are available directly from the column headers and allow users to sort data quickly, select specific values, apply condition-based filters, and combine multiple filtering criteria.

With an intuitive dropdown interface similar to Microsoft Excel, users can easily analyze large datasets without requiring additional configuration or custom code. This filtering can be enabled or disabled by setting the AllowFiltering property on the FlexGrid or on a specific column.

<FlexGrid AutoGenerateColumns="false" ItemsSource="_customers" AllowFiltering="false">
    <FlexGridColumns>
       <GridColumn Header="Active" Binding="Active" AllowFiltering="false"/>
       <GridColumn Header="First Name" Binding="FirstName"/>
       <GridColumn Header="Last Name" Binding="LastName" />
       <GridColumn Header="Country" Binding="CountryId" DataMap="@_countryDataMap"  />
       <GridColumn Header="City" Binding="City" FilterLoading="@CityOnFilterLoading"/>
       <GridColumn Header="OrderCount" Binding="OrderCount"/>
       <GridColumn Header="LastOrderDate" Binding="LastOrderDate" />
    </FlexGridColumns>
</FlexGrid>

View demo

How to Filter a Blazor Datagrid Using a Search Box

For a clean, modern UI, many app developers prefer to enable filtering through a simple search box.

It's not only easy in concept, but it's also easy to implement. You can configure a search box using a C1TextBox and by adding the FullTextFilterBehavior to your FlexGrid.

<p>  
    <C1TextBox @bind-Text="filterText" Placeholder="Search Text" />  
</p>  

<FlexGrid ItemsSource="DataSource" AutoGenerateColumns="true">  
    <FlexGridBehaviors>  
        <FullTextFilterBehavior FilterString="@filterText" MatchNumbers="true" />  
    </FlexGridBehaviors>  
</FlexGrid>  

In the above code snippet, the C1TextBox component is used as a search box, and its Text value is bound to the FilterString of the FullTextFilterBehavior element. This type of filtering works as a basic text search, so the tradeoff is that you can't do conditional filtering. If you'd like to turn the search box into an AI-powered one, check out WinForms Datagrid AI Filter Prompts, Part 2: Smarter Filtering.

View demo - View full source code on GitHub

How to Filter a Blazor Datagrid Using a Filter Row

The Blazor FlexGrid also supports a classic filter row approach to filtering data at runtime. This approach is a hybrid of dropdown column filters and a search box, allowing end-users to apply a different filter to each column simultaneously. But filtering is limited to text-based searches. 

You can add a filter row using the GridFilterRow component. It will automatically add text boxes for each column, and typing in any of them will filter the data.

<FlexGrid ItemsSource="DataSource" AutoGenerateColumns="true">  
    <FlexGridRows>  
        <GridFilterRow Placeholder="Search" AutoComplete="true" />  
    </FlexGridRows>  
</FlexGrid> 

View demo - View full source code on GitHub

How to Filter a Blazor Datagrid Using a Filter Panel

The C1DataFilter provides a modern sidebar filtering experience similar to those found on popular e-commerce and analytics platforms. It seamlessly integrates with multiple Blazor controls, including FlexGrid, FlexChart, and ListView, allowing users to refine data across different visualizations and components.

The control supports a wide range of built-in filter types, such as Boolean, range, date range, and checklist filters. These filters can be generated automatically from the underlying data while also allowing developers to create custom filters tailored to specific business requirements.

To create a filter panel UI, pass the same data source to the C1DataFilter component as you do to your datagrid. It will automatically generate the UI and the desired filter types for different data types.

<C1DataFilter @ref="theFilter" ItemsSource="@DataSource"></C1DataFilter>
<FlexGrid @ref="theGrid" ItemsSource="@DataSource" AutoGenerateColumns="true"></FlexGrid> 

The filters displayed within C1DataFilter can also be defined separately for more customization.

View demo - View full source code on GitHub

Conclusion

Filtering plays a critical role in helping users navigate and analyze data efficiently. In this tutorial, we've explored several filtering options available in ComponentOne FlexGrid for Blazor, from built-in Excel-style column filters and search functionality to the powerful C1DataFilter component. By combining these features, you can create intuitive data exploration experiences that help users quickly find the information they need.

To get started, download ComponentOne Blazor Edition and explore the included samples, or install the C1.Blazor.Grid and C1.Blazor.DataFilter NuGet packages in your next project.

Ready to Try it Out? Download ComponentOne Today!