|
1 | 1 | # 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