Seamless Excel-Like Filtering Support in Flutter DataGrid

Filtering is an essential feature in the DataGrid control. It lets us view the rows based on our required criteria. Excel-like filtering support provides users more flexibility to filter the rows as needed, easily. We are happy to announce that we have provided Excel-like filtering support to our Flutter Data Grid in the Essential Studio 2022 Volume 3 release.

In this blog, we will walk through filtering in columns using the new Excel-like filtering feature.

Getting started

You can enable excel-like filtering by just setting the SfDataGrid.allowFiltering property to true. By enabling this property, you can see the filter icons in the column header.

Filtering options

The Excel-like filtering pop-up depicts most of the options from Excel, being inspired by the Excel filter pop-up.

The filter pop-up consists of the following UI parts:

• Sorting (both directions)—Easily sort the data in ascending or descending order.
• Clear filter—Clear the filter applied to the column.
• Advanced filter option.
• Checkbox filtering.

Checkbox filtering :

Checkbox filtering is a straightforward approach to searching for the required data from the available data in a column. You can choose the data through the checked ListBox in the filter pop-up. A blank item is added automatically if the column has null or empty data.

Advanced filter option :

The advanced filter options are available based on the data type of the columns. The data types with the advanced filtering option are:

• Text
• Number
• Date

The advanced filter option helps us to apply multiple filter conditions with the required filter criteria. Each type of filter has its own set of filter conditions to apply filtering with ease. The following table shows the list of filter conditions that are supported in advanced filter options.

Callbacks

The following callbacks are implemented to listen when filtering is applied through an Excel-like filter pop-up:

• onFilterChanging—This is invoked when the filtering is being applied to a specific column.
• onFilterChanged—This is invoked after the filtering is applied to the specific column.

Programmatic filtering

DataGrid also lets users apply filtering programmatically without using Excel-like UI filtering. This can be done by adding the filter conditions along with the respective column name to the DataGridSource.filterConditions map collection. In the map collection, the key defines the columnName and the values define the list of FilterCondition.

The following methods can be used to do the filtering programmatically:

• DataGridSource.addFilter—Adds the filter conditions to a specific column.
• DataGridSource.removeFilter—Removes the filter condition from a specific column.
• DataGridSource.clearFilters—Clears all the filter conditions from all the columns or specific columns.

The following example shows how to add a filter condition programmatically.

Resource

For more details, refer to the project Excel-like filtering in Flutter DataGrid.

Conclusion

I hope you found this blog interesting. You may browse Excel-like filtering in Flutter DataGrid UG for more information on filtering features and examples.

Existing customers can obtain the most recent version of Essential Studio by visiting the License and Downloads page. If you are not already a Syncfusion customer, you may sign up for a 30-day free trial to explore what features are available.

Also, you can contact us via our support forums, support portal, or feedback portal with any questions. We are always happy to help you!