Seamless Excel-Like Filtering Support in Flutter DataGrid
Tags: mobile, webdev, flutter, dart
Published: 2022-10-20 12:44:01

---
title: Seamless Excel-Like Filtering Support in Flutter DataGrid
published: true
date: 2022-10-19 11:00:15 UTC
tags: mobile, webdev, flutter, dart
canonical_url: https://www.syncfusion.com/blogs/post/seamless-excel-like-filtering-in-flutter-datagrid.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cfeby7q3p6lfnusymxcl.png
---

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 DataGrid](https://www.syncfusion.com/flutter-widgets/flutter-datagrid "Flutter DataGrid") in the Essential Studio [2022 Volume 3](https://www.syncfusion.com/forums/177858/essential-studio-2022-volume-3-main-release-v20-3-0-47-is-available-for-download "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](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/allowFiltering.html "allowFiltering property of Flutter DataGrid") property to **true**. By enabling this property, you can see the filter icons in the column header.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Flutter-DataGrid-widget-with-allowFiltering-property-enabled-1.png" alt="Flutter DataGrid widget with allowFiltering property enabled" style="width:100%">

  <figcaption>Flutter DataGrid widget with allowFiltering property enabled</figcaption>

</figure>

When clicking the filter icon, the Excel-like filtering pop-up will appear.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Flutter-DataGrid-with-Excel-like-filtering-pop-up.png" alt="Flutter DataGrid with Excel-like filtering pop-up" style="width:100%">

  <figcaption>Flutter DataGrid with Excel-like filtering pop-up</figcaption>

</figure>

## 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.

The following .gif image depicts how to apply the filtering using the checked ListBox option.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Table-with-Excel-like-checkbox-filtering-1.gif" alt="Table with Excel-like checkbox filtering" style="width:100%">

  <figcaption>Table with Excel-like checkbox filtering</figcaption>

</figure>

### 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.
<table>
<tbody>
<tr>
<td style="width: 212px;" width="208"><strong>Text</strong></td>
<td style="width: 212px;" width="208"><strong>Number</strong></td>
<td style="width: 212px;" width="208"><strong>Date</strong></td>
</tr>
<tr>
<td style="width: 212px;" width="208">
<ul>
 	<li>Equals</li>
 	<li>Does Not Equal</li>
 	<li>Begins With</li>
 	<li>Does Not Begin With</li>
 	<li>Ends With</li>
 	<li>Does Not End With</li>
 	<li>Contains</li>
 	<li>Does Not Contain</li>
 	<li>Empty</li>
 	<li>Not Empty</li>
 	<li>Null</li>
 	<li>Not Null</li>
</ul>
</td>
<td style="width: 212px;" width="208">
<ul>
 	<li>Equals</li>
 	<li>Does Not Equal</li>
 	<li>Less Than</li>
 	<li>Less Than Or Equal</li>
 	<li>Greater Than</li>
 	<li>Greater Than Or Equal</li>
 	<li>Null</li>
 	<li>Not Null</li>
</ul>
</td>
<td style="width: 212px;" width="208">
<ul>
 	<li>Equals</li>
 	<li>Does Not Equal</li>
 	<li>After</li>
 	<li>After Or Equal</li>
 	<li>Before</li>
 	<li>Before Or Equal</li>
 	<li>Null</li>
 	<li>Not Null</li>
</ul>
</td>
</tr>
</tbody>
</table>

You can also choose whether the AND or OR logical operator should be applied between the two filter conditions you applied in the advanced filter options.

The following GIF depicts how to apply multiple filter conditions to a column.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Flutter-DataGrid-with-Excel-like-filtering-demo-for-advanced-filter-options.gif" alt="Flutter DataGrid with Excel-like filtering demo for advanced filter options" style="width:100%">

  <figcaption>Flutter DataGrid with Excel-like filtering demo for advanced filter options</figcaption>

</figure>

You can retrieve just the filtered rows using the [DataGridSource.effectiveRows](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource/effectiveRows.html "effectiveRows property of Flutter DataGrid") property.

## Callbacks

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

- [onFilterChanging](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/onFilterChanging.html "onFilterChanging property of Flutter DataGrid")—This is invoked when the filtering is being applied to a specific column.
- [onFilterChanged](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/onFilterChanged.html "onFilterChanged property of Flutter DataGrid")—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](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource/filterConditions.html "filterConditions property of Flutter DataGrid") map collection. In the map collection, the key defines the **columnName** and the values define the list of [FilterCondition](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/FilterCondition-class.html "FilterCondition class of Flutter DataGrid").

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

- [DataGridSource.addFilter](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource/addFilter.html "addFilter method of Flutter DataGrid")—Adds the filter conditions to a specific column.
- [DataGridSource.removeFilter](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource/removeFilter.html "removeFilter method of Flutter DataGrid")—Removes the filter condition from a specific column.
- [DataGridSource.clearFilters](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource/clearFilters.html "clearFilters method of Flutter DataGrid")—Clears all the filter conditions from all the columns or specific columns.

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

```dart
@override
Widget build(BuildContext context) {
  return Column(
    children: [
      Expanded(
        child: SfDataGrid(source: _employeeDataSource, columns: [
          GridColumn(
              columnName: 'ID',
              label: Container(
                  padding: EdgeInsets.symmetric(horizontal: 16.0),
                  alignment: Alignment.centerRight,
                  child: Text(
                    'ID',
                    overflow: TextOverflow.ellipsis,
                  ))),
          GridColumn(
              columnName: 'Name',
              label: Container(
                  padding: EdgeInsets.symmetric(horizontal: 16.0),
                  alignment: Alignment.centerLeft,
                  child: Text(
                    'Name',
                    overflow: TextOverflow.ellipsis,
                  ))),
          GridColumn(
              columnName: 'Designation',
              label: Container(
                  padding: EdgeInsets.symmetric(horizontal: 16.0),
                  alignment: Alignment.centerLeft,
                  child: Text(
                    'Designation',
                    overflow: TextOverflow.ellipsis,
                  ))),
          GridColumn(
              columnName: 'Salary',
              label: Container(
                  padding: EdgeInsets.symmetric(horizontal: 16.0),
                  alignment: Alignment.centerRight,
                  child: Text(
                    'Salary',
                    overflow: TextOverflow.ellipsis,
                  ))),
        ]),
      ),
      MaterialButton(
          child: Text('Add Filter'),
          onPressed: () {
            _employeeDataSource.addFilter('ID',
                FilterCondition(type: FilterType.lessThan, value: 1005));
          }),
    ],
  );
}
```

## Resource

For more details, refer to the project [Excel-like filtering in Flutter DataGrid](https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/datagrid/datagrid_filtering.dart "Example for Excel-like filtering support in Flutter DataGrid on GitHub").

## Conclusion

I hope you found this blog interesting. You may browse [Excel-like filtering in Flutter DataGrid](https://help.syncfusion.com/flutter/datagrid/filtering "Documentation: 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](https://www.syncfusion.com/account/downloads "License and download page of Essential Studio") page. If you are not already a Syncfusion customer, you may sign up for a 30-day [free trial](https://www.syncfusion.com/downloads "Free evaluation of the Syncfusion Essential Studio") to explore what features are available.

Also, you can contact us via our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/flutter "Syncfusion Feedback Portal") with any questions. We are always happy to help you!

### Related blogs

- [Syncfusion Essential Studio 2022 Volume 3 Is Here!](https://www.syncfusion.com/blogs/post/syncfusion-essential-studio-2022-volume-3-is-here.aspx "Blog: Syncfusion Essential Studio 2022 Volume 3 Is Here!")
- [Create A Repeating Appointment Using The Recurrence Rule In Flutter Event Calendar](https://www.syncfusion.com/blogs/post/create-a-repeating-appointment-using-the-recurrence-rule-in-flutter-event-calendar.aspx "Blog: Create A Repeating Appointment Using The Recurrence Rule In Flutter Event Calendar")
- [Major Update: Syncfusion Flutter Widgets Are Now Windows-Compatible](https://www.syncfusion.com/blogs/post/major-update-syncfusion-flutter-widgets-are-now-windows-compatible.aspx "Blog: Major Update: Syncfusion Flutter Widgets Are Now Windows-Compatible")
- [Simple Steps to Create an Investment (SIP) Calculator in Flutter](https://www.syncfusion.com/blogs/post/simple-steps-to-create-an-investment-sip-calculator-in-flutter.aspx "Blog: Simple Steps to Create an Investment (SIP) Calculator in Flutter")