Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (150).NET Core  (25)Angular  (46)ASP.NET  (48)ASP.NET Core  (61)ASP.NET MVC  (84)Azure  (28)Blazor  (84)DocIO  (19)Essential JS 2  (68)Essential Studio  (162)Flutter  (99)JavaScript  (146)Microsoft  (101)PDF  (57)React  (32)Succinctly series  (120)Syncfusion  (464)TypeScript  (30)Uno Platform  (2)UWP  (4)Vue  (26)Webinar  (21)Windows Forms  (54)WPF  (113)Xamarin  (124)XlsIO  (24)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (105)Chart  (48)Cloud  (9)Company  (445)Dashboard  (6)Data Science  (3)Data Validation  (3)DataGrid  (41)Development  (248)Doc  (7)DockingManager  (1)eBook  (91)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (19)Extensions  (12)File Manager  (4)Gantt  (8)Gauge  (6)Git  (4)Grid  (26)HTML  (9)Installer  (2)Knockout  (2)LINQPad  (1)Linux  (1)M-Commerce  (1)Metro Studio  (11)Mobile  (207)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (21)Performance  (5)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (5)Road Map  (9)Scheduler  (23)SfDataGrid  (8)Silverlight  (21)Sneak Peek  (16)Solution Services  (2)Spreadsheet  (7)SQL  (7)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (9)Tips and Tricks  (54)UI  (113)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (1)Visual Studio  (18)Visual Studio Code  (10)Web  (190)What's new  (120)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
What’s New in 2020 Volume 4: Flutter DataGrid

What’s New in 2020 Volume 4: Flutter DataGrid

In the 2020 Volume 4 release, we have included the following new features for the Flutter DataGrid (data table):

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: <GridColumn>[
        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>[
        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
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
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
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 property in ThemeData. Now, the DataGrid is compatible with this support. The DataGrid’s row height and cell padding will be automatically adjusted based on visualDensity.

In the following screenshot, visual density is set to standard.

Standard visual density
Standard visual density

In the following screenshot, visual density is set to compact.

Compact visual density
Compact visual density

In the following screenshot, visual density is set to comfortable.

Comfortable visual density
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 property. This is useful when you are adding stacked headers.

Scrollbar enhancement

We have provided the following support for vertical and horizontal scrollbars:

Conclusion

I hope you now have a clear idea of the new features and enhancements available in the Syncfusion Flutter DataGrid widget in the 2020 Volume 4 release.

Browse our documentation to learn more about our Flutter widgets. You can also see Syncfusion’s Flutter app with many examples in this GitHub repo. Don’t miss our demo app in Google Play and the App Store.

If you aren’t a customer yet, you can try our 30-day free trial 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 forumfeedback portal, or Direct-Trac support system. We are always happy to assist you!

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin
Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top