|
1 | 1 | # How-to-Display-Sum-and-Average-of-Grouped-Column-with-Custom-Caption-Summary-in-SfDataGrid |
2 | | -This demo shows how to Display Sum and Average of Grouped Column with Custom Caption Summary in SfDataGrid |
| 2 | + |
| 3 | +In this article, we will show you how to display the sum and average of a grouped column with a custom caption summary in [Flutter DataTable](https://www.syncfusion.com/flutter-widgets/flutter-datagrid). |
| 4 | + |
| 5 | +Initialize the [SfDataGrid](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid-class.html) widget with the necessary properties. The [DataGridSource.performGrouping](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource/performGrouping.html) method is triggered when grouping is applied to the SfDataGrid. Within this method, [custom logic](https://help.syncfusion.com/flutter/datagrid/grouping#custom-grouping) can be implemented to return a String based on specific grouping criteria. |
| 6 | + |
| 7 | +To support group caption summaries, two helper properties—groupColumn and occurrence—are used. These track the total salary and the number of employees in each group. As rows are grouped, the salary is added to the group's total in groupColumn, and the count is incremented in occurrence. |
| 8 | + |
| 9 | +These aggregated values are then used to calculate and display the sum and average salary for each group. This is done by customizing the text in the [buildGroupCaptionCellWidget](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource/buildGroupCaptionCellWidget.html) method. |
| 10 | + |
| 11 | +```dart |
| 12 | + Map<String, int> groupColumn = {}; |
| 13 | + Map<String, int> occurance = {}; |
| 14 | +
|
| 15 | + @override |
| 16 | + Widget? buildGroupCaptionCellWidget( |
| 17 | + RowColumnIndex rowColumnIndex, |
| 18 | + String summaryValue, |
| 19 | + ) { |
| 20 | + final matchingKey = groupColumn.keys.firstWhere( |
| 21 | + (key) => summaryValue.contains(key), |
| 22 | + orElse: () => '', |
| 23 | + ); |
| 24 | +
|
| 25 | + final total = groupColumn[matchingKey] ?? 0; |
| 26 | + final count = occurance[matchingKey] ?? 1; |
| 27 | + final average = (total / count).ceilToDouble(); |
| 28 | +
|
| 29 | + return Container( |
| 30 | + padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 15), |
| 31 | + child: Text('$summaryValue | Total: $total | Average: $average'), |
| 32 | + ); |
| 33 | + } |
| 34 | +
|
| 35 | + @override |
| 36 | + String performGrouping(String columnName, DataGridRow row) { |
| 37 | + if (columnName != 'salary') { |
| 38 | + return super.performGrouping(columnName, row); |
| 39 | + } |
| 40 | +
|
| 41 | + final int salary = row |
| 42 | + .getCells() |
| 43 | + .firstWhere((cell) => cell.columnName == columnName) |
| 44 | + .value; |
| 45 | +
|
| 46 | + String label; |
| 47 | + if (salary > 25000 && salary <= 30000) { |
| 48 | + label = '<= 30 K & > 25 K'; |
| 49 | + } else if (salary > 20000 && salary <= 25000) { |
| 50 | + label = '<= 25 K & > 20 K'; |
| 51 | + } else if (salary > 15000 && salary <= 20000) { |
| 52 | + label = '<= 20 K & > 15 K'; |
| 53 | + } else if (salary >= 10000 && salary <= 15000) { |
| 54 | + label = '<= 15 K & > 10 K'; |
| 55 | + } else { |
| 56 | + label = '> 30 K'; |
| 57 | + } |
| 58 | +
|
| 59 | + groupColumn[label] = (groupColumn[label] ?? 0) + salary; |
| 60 | + occurance[label] = (occurance[label] ?? 0) + 1; |
| 61 | +
|
| 62 | + return label; |
| 63 | + } |
| 64 | +``` |
| 65 | + |
| 66 | +You can download this example on [GitHub](https://github.com/SyncfusionExamples/How-to-Display-Sum-and-Average-of-Grouped-Column-with-Custom-Caption-Summary-in-SfDataGrid.git). |
| 67 | + |
| 68 | + |
| 69 | + |
0 commit comments