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

1 import 'package:syncfusion_flutter_core/theme.dart'``;

2 import 'package:syncfusion_flutter_datagrid/datagrid.dart'``;

3

4 @override

5 Widget build(BuildContext context) {

6  return SfDataGridTheme(

8       ``headerStyle: DataGridHeaderCellStyle(

9            ``backgroundColor: const Color(0xFFF1F1F1))),

10    ``child: SfDataGrid(

11      ``gridLinesVisibility: GridLinesVisibility.both,

12      ``headerGridLinesVisibility: GridLinesVisibility.both,

13      ``source: _productDataSource,

14     ``columns: <GridColumn>[

15        ``GridTextColumn(mappingName: 'customerName'``, headerText: 'Customer Name'``),

16        ``GridTextColumn (mappingName: ‘city’, headerText: ‘City’),

17       ``GridNumericColumn(mappingName: 'orderId'``, headerText: 'Order ID'``)

18        ``GridDateTimeColumn(mappingName: ‘orderDate’, headerText: ‘Order Date’),

19      ``],

20      ``stackedHeaderRows: <StackedHeaderRow>[

21        ``StackedHeaderRow(cells: [

22         ``StackedHeaderCell(

23             ``columnNames: [``'customerName'``, ‘city’],

24              ``child: Container(

25                 ``color: const Color(0xFFF1F1F1),

26                  ``child: Center(child: Text(``'Customer Details'``)))),

27          ``StackedHeaderCell(

28              ``columnNames: [‘orderid’, ‘orderDate’],

29              ``child: Container(

30                  ``color: const Color(0xFFF1F1F1),

31                  ``child: Center(child: Text(Order Details'))))

32        ``])

33      ``],

34    ``),

35  ``);

36 }

Stacked headers in Flutter DataGrid

#flutter #syncfusion #what's new