Skip to content

Commit 3647a46

Browse files
Readme file Added
1 parent 52bfe51 commit 3647a46

File tree

1 file changed

+68
-1
lines changed

1 file changed

+68
-1
lines changed

README.md

Lines changed: 68 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,69 @@
11
# 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

Comments
 (0)