Seamless Excel-Like Filtering Support in Flutter DataGrid
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (173).NET Core  (29).NET MAUI  (203)Angular  (107)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (40)Black Friday Deal  (1)Blazor  (211)BoldSign  (13)DocIO  (24)Essential JS 2  (106)Essential Studio  (200)File Formats  (65)Flutter  (132)JavaScript  (219)Microsoft  (118)PDF  (81)Python  (1)React  (98)Streamlit  (1)Succinctly series  (131)Syncfusion  (897)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (50)Windows Forms  (61)WinUI  (68)WPF  (157)Xamarin  (161)XlsIO  (35)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (8)Business intelligence  (55)Button  (4)C#  (146)Chart  (127)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (63)Development  (618)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (39)Extensions  (22)File Manager  (6)Gantt  (18)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (501)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (42)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (52)Security  (3)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (10)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (381)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (17)Web  (582)What's new  (323)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Seamless Excel-Like Filtering Support in Flutter DataGrid

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

Flutter DataGrid widget with allowFiltering property enabled
Flutter DataGrid widget with allowFiltering property enabled

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

Flutter DataGrid with Excel-like filtering pop-up
Flutter DataGrid with Excel-like filtering pop-up

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.

Table with Excel-like checkbox filtering
Table with Excel-like checkbox filtering

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.

TextNumberDate
  • Equals
  • Does Not Equal
  • Begins With
  • Does Not Begin With
  • Ends With
  • Does Not End With
  • Contains
  • Does Not Contain
  • Empty
  • Not Empty
  • Null
  • Not Null
  • Equals
  • Does Not Equal
  • Less Than
  • Less Than Or Equal
  • Greater Than
  • Greater Than Or Equal
  • Null
  • Not Null
  • Equals
  • Does Not Equal
  • After
  • After Or Equal
  • Before
  • Before Or Equal
  • Null
  • Not Null

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.

Flutter DataGrid with Excel-like filtering demo for advanced filter options
Flutter DataGrid with Excel-like filtering demo for advanced filter options

You can retrieve just the filtered rows using the DataGridSource.effectiveRows property.

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:

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

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

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!

googleplay.png

Related blogs

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed