Skip to content

Commit 37f0547

Browse files
README.md file details has been modified
1 parent 637f88d commit 37f0547

File tree

1 file changed

+139
-1
lines changed

1 file changed

+139
-1
lines changed

README.md

Lines changed: 139 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,140 @@
11
# How-to-show-the-cell-and-table-summary-value-in-currency-format-in-Flutter-DataTable
2-
This repository contains the example about how to apply format for table summary cells.
2+
3+
The Syncfusion [Flutter DataGrid](https://www.syncfusion.com/flutter-widgets/flutter-datagrid) provides built-in support to display concise information about the rows by using the table summary rows. Table summary rows allow you to display summarized information about the rows in the DataGrid, such as the sum, average, maximum, and minimum value of a column. This can be useful when you want to provide a quick overview of the data in the DataGrid.
4+
In this article, we will show you how to format the column and its summary data in the DataGrid as a currency format. We will use the built-in table summary types provided by DataGrid to achieve this.
5+
6+
## STEP 1:
7+
Import the following package in your project to access the table summary types provided by the DataGrid.
8+
9+
```dart
10+
import 'package:syncfusion_flutter_datagrid/datagrid.dart';
11+
import 'package:intl/intl.dart';
12+
13+
```
14+
## STEP 2:
15+
Initialize the [SfDataGrid](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid-class.html) widget with all the required properties.
16+
17+
```dart
18+
late EmployeeDataSource _employeeDataSource;
19+
List<Employee> employees = <Employee>[];
20+
21+
@override
22+
void initState() {
23+
super.initState();
24+
employees = getEmployeeData();
25+
_employeeDataSource = EmployeeDataSource(employees);
26+
}
27+
28+
@override
29+
Widget build(BuildContext context) {
30+
return Scaffold(
31+
appBar: AppBar(title: const Text('Flutter SfDataGrid')),
32+
body: SfDataGrid(
33+
source: _employeeDataSource,
34+
columns: [
35+
GridColumn(
36+
columnName: 'id',
37+
label: Container(
38+
padding: const EdgeInsets.symmetric(horizontal: 8.0),
39+
alignment: Alignment.center,
40+
child: const Text('ID'),
41+
),
42+
),
43+
GridColumn(
44+
columnName: 'name',
45+
label: Container(
46+
padding: const EdgeInsets.symmetric(horizontal: 8.0),
47+
alignment: Alignment.center,
48+
child: const Text('Name'),
49+
),
50+
),
51+
GridColumn(
52+
columnName: 'designation',
53+
label: Container(
54+
padding: const EdgeInsets.symmetric(horizontal: 8.0),
55+
alignment: Alignment.center,
56+
child: const Text('Designation'),
57+
),
58+
),
59+
GridColumn(
60+
columnName: 'salary',
61+
label: Container(
62+
padding: const EdgeInsets.symmetric(horizontal: 8.0),
63+
alignment: Alignment.center,
64+
child: const Text('Salary '),
65+
),
66+
),
67+
],
68+
columnWidthMode: ColumnWidthMode.auto,
69+
tableSummaryRows: [
70+
GridTableSummaryRow(
71+
showSummaryInRow: false,
72+
columns: [
73+
const GridSummaryColumn(
74+
name: 'Sum',
75+
columnName: 'salary',
76+
summaryType: GridSummaryType.sum)
77+
],
78+
position: GridTableSummaryRowPosition.bottom)
79+
],
80+
),
81+
);
82+
}
83+
84+
```
85+
## STEP 3:
86+
Create a data source class by extending [DataGridSource](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource-class.html) for mapping data to the SfDataGrid. In the [buildTableSummaryCellWidget](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource/buildTableSummaryCellWidget.html) method, you can format the table summary value using the [NumberFormat.currency](https://api.flutter.dev/flutter/intl/NumberFormat/NumberFormat.currency.html) constructor. This method is called for each table summary cell, and it returns the widget that should be displayed in the cell.
87+
88+
You can also format the cell value in the [buildRow](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource/buildRow.html) method. This method is called for each row in the DataGrid, and it returns the widget that should be displayed in the row.
89+
90+
```dart
91+
class EmployeeDataSource extends DataGridSource {
92+
EmployeeDataSource(List<Employee> employees) {
93+
buildDataGridRow(employees);
94+
}
95+
96+
void buildDataGridRow(List<Employee> employeeData) {
97+
dataGridRow = employeeData.map<DataGridRow>((employee) {
98+
return DataGridRow(cells: [
99+
DataGridCell<int>(columnName: 'id', value: employee.id),
100+
DataGridCell<String>(columnName: 'name', value: employee.name),
101+
DataGridCell<String>(
102+
columnName: 'designation', value: employee.designation),
103+
DataGridCell<double>(columnName: 'salary', value: employee.salary)
104+
]);
105+
}).toList();
106+
}
107+
108+
List<DataGridRow> dataGridRow = <DataGridRow>[];
109+
110+
@override
111+
List<DataGridRow> get rows => dataGridRow.isEmpty ? [] : dataGridRow;
112+
113+
final formatter = NumberFormat.currency(symbol: '\$');
114+
115+
@override
116+
DataGridRowAdapter? buildRow(DataGridRow row) {
117+
return DataGridRowAdapter(
118+
cells: row.getCells().map<Widget>((dataGridCell) {
119+
return Container(
120+
alignment: Alignment.center,
121+
child: Text(
122+
dataGridCell.columnName == 'salary'
123+
? formatter.format(dataGridCell.value)
124+
: dataGridCell.value.toString(),
125+
));
126+
}).toList());
127+
}
128+
129+
@override
130+
Widget? buildTableSummaryCellWidget(
131+
GridTableSummaryRow summaryRow,
132+
GridSummaryColumn? summaryColumn,
133+
RowColumnIndex rowColumnIndex,
134+
String summaryValue) {
135+
String value = formatter.format(double.parse(summaryValue));
136+
return Container(alignment: Alignment.center, child: Text(value));
137+
}
138+
}
139+
140+
```

0 commit comments

Comments
 (0)