--- title: "What’s New in 2020 Volume 4: Flutter DataGrid" published_at: "2021-01-29T10:30:07+00:00" modified_at: "2025-03-20T09:50:16+00:00" url: "https://www.syncfusion.com/blogs/post/whats-new-in-2020-volume-4-flutter-datagrid" excerpt: "In the 2020 Volume 4 release, we have included the following new features for the Flutter DataGrid (data table): Stacked headers Infinite scrolling or load more Compatibility for visual density Column header enhancement Scrollbar enhancement Let’s see more details about..." taxonomy_category: - "DataGrid" - "Desktop" - "Flutter" - "Mobile" - "Syncfusion" - "UI" - "Web" - "What's new" taxonomy_post_tag: - "Android" - "DataGrid" - "Flutter" - "iOS" - "Mobile" - "UI" - "Web" - "What's New" --- # What’s New in 2020 Volume 4: Flutter DataGrid [Neelakandan Kannan](https://www.syncfusion.com/blogs/author/neelakandan-kannan) ![What’s New in 2020 Volume 4: Flutter DataGrid](https://www.syncfusion.com/blogs/wp-content/uploads/2021/01/What%E2%80%99s-New-in-2020-Volume-4-Flutter-DataGrid.png) In the [2020 Volume 4 release](https://www.syncfusion.com/forums/160733/essential-studio-2020-volume-4-release-v18-4-0-30-is-available-for-download) , we have included the following new features for the [Flutter DataGrid](https://www.syncfusion.com/flutter-widgets/flutter-datagrid) (data table): - [Stacked headers](#stacked-headers) - [Infinite scrolling or load more](#infinite-scrolling-or-load-more-rows) - [Compatibility for visual density](#compatibility-for-visual-density) - [Column header enhancement](#column-header-enhancement) - [Scrollbar enhancement](#scrollbar-enhancement) Let’s see more details about these features. ## Stacked headers The DataGrid now supports displaying multiple column headers. This are known as unbound header rows, which span across multiple columns and rows. The following code example illustrates stacked headers in the Flutter DataGrid. ``` import 'package:syncfusion_flutter_core/theme.dart'; import 'package:syncfusion_flutter_datagrid/datagrid.dart'; @override Widget build(BuildContext context) { return SfDataGridTheme( data: SfDataGridThemeData( headerStyle: DataGridHeaderCellStyle( backgroundColor: const Color(0xFFF1F1F1))), child: SfDataGrid( gridLinesVisibility: GridLinesVisibility.both, headerGridLinesVisibility: GridLinesVisibility.both, source: _productDataSource, columns: [ GridTextColumn(mappingName: 'customerName', headerText: 'Customer Name'), GridTextColumn (mappingName: ‘city’, headerText: ‘City’), GridNumericColumn(mappingName: 'orderId', headerText: 'Order ID') GridDateTimeColumn(mappingName: ‘orderDate’, headerText: ‘Order Date’), ], stackedHeaderRows: [ StackedHeaderRow(cells: [ StackedHeaderCell( columnNames: ['customerName', ‘city’], child: Container( color: const Color(0xFFF1F1F1), child: Center(child: Text('Customer Details')))), StackedHeaderCell( columnNames: [‘orderid’, ‘orderDate’], child: Container( color: const Color(0xFFF1F1F1), child: Center(child: Text(Order Details')))) ]) ], ), ); } ``` ![Stacked headers in Flutter DataGrid](https://www.syncfusion.com/blogs/wp-content/uploads/2021/01/stacked_header.gif) Stacked headers in Flutter DataGrid ## Infinite scrolling or load more rows Show an interactive view at the bottom of the DataGrid when the scroll head reaches the maximum offset while scrolling down. While fetching more data, the loading indicator is displayed at the bottom. The following .gif image shows the infinite scrolling in the DataGrid. ![Infinite scrolling feature in the DataGrid](https://www.syncfusion.com/blogs/wp-content/uploads/2021/01/inifinite_scrolling.gif) Infinite scrolling in Flutter DataGrid You can also load more data with an interactive UI widget like a button. More data will be fetched when the widget is tapped. The following .gif image shows the load more rows triggered when tapping the button. ![Load more option in Flutter DataGrid](https://www.syncfusion.com/blogs/wp-content/uploads/2021/01/load_more.gif) Load more option in Flutter DataGrid ## Compatibility for visual density Improve the vertical and horizontal compactness of the widgets in the UI with the help of the [visualDensity](https://api.flutter.dev/flutter/material/ThemeData/visualDensity.html) property in [ThemeData](https://api.flutter.dev/flutter/material/ThemeData-class.html) . Now, the DataGrid is compatible with this support. The DataGrid’s row height and cell padding will be automatically adjusted based on [visualDensity](https://api.flutter.dev/flutter/material/ThemeData/visualDensity.html) . In the following screenshot, visual density is set to standard. ![Standard visual density](https://www.syncfusion.com/blogs/wp-content/uploads/2021/01/android_visualdensity_as_standard.png) Standard visual density In the following screenshot, visual density is set to compact. ![Compact visual density](https://www.syncfusion.com/blogs/wp-content/uploads/2021/01/android_visualdensity_as_compact.png) Compact visual density In the following screenshot, visual density is set to comfortable. ![Comfortable visual density](https://www.syncfusion.com/blogs/wp-content/uploads/2021/01/android_visualdensity_as_comfortable.png) Comfortable visual density ## Column header enhancement We have enhanced a couple of items in the column header: - **Hovering effect**: In web platform, hovering effect will be applied if mouse hovers over the column headers. - **Grid line support**: We have introduced a separate property to display grid lines in column headers. This can be done by using the [headerGridLinesVisibility](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/headerGridLinesVisibility.html) property. This is useful when you are adding stacked headers. ## Scrollbar enhancement We have provided the following support for vertical and horizontal scrollbars: - **Always show scrollbars**: You can always show vertical and horizontal scrollbars in the DataGrid by enabling the [isScrollbarAlwaysShown](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/isScrollbarAlwaysShown.html) property. - **Set physics for scrollbars**: You can set [scroll physics](https://api.flutter.dev/flutter/widgets/ScrollPhysics-class.html) to vertical and horizontal scrollbars. This is useful when you want to disable the scrolling and can be done by setting [NeverScrollableScrollPhysics](https://api.flutter.dev/flutter/widgets/NeverScrollableScrollPhysics-class.html) to the [verticalScrollPhysics](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/verticalScrollPhysics.html) and [horizontalScrollPhysics](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/horizontalScrollPhysics.html) properties. ## Conclusion I hope you now have a clear idea of the new features and enhancements available in the [Syncfusion Flutter DataGrid widget](https://www.syncfusion.com/flutter-widgets/flutter-datagrid) in the [2020 Volume 4 release](https://www.syncfusion.com/forums/160733/essential-studio-2020-volume-4-release-v18-4-0-30-is-available-for-download) . Browse our [documentation](https://help.syncfusion.com/flutter/introduction/overview) to learn more about our Flutter widgets. You can also see Syncfusion’s Flutter app with many examples in this [GitHub repo](https://github.com/syncfusion/flutter-examples) . Don’t miss our demo app in [Google Play](https://play.google.com/store/apps/details?id=com.syncfusion.flutter.examples&hl=en) and the [App Store](https://apps.apple.com/in/app/syncfusion-flutter-ui-widgets/id1475231341) . If you aren’t a customer yet, you can try our 30-day [free trial](https://www.syncfusion.com/downloads) to check out these features. Also, if you wish to send us feedback or would like to submit any questions, please feel free to post them in the comments section of this blog post. You can also contact us through our [support forum](https://www.syncfusion.com/forums) , [feedback portal](https://www.syncfusion.com/feedback) , or [Direct-Trac support system](https://www.syncfusion.com/support/directtrac/incidents) . We are always happy to assist you!