|
1 | | -# How-to-resize-the-columns-in-a-Flutter-DataTable-SfDataGrid |
2 | | -How to resize the columns in a Flutter DataTable (SfDataGrid) |
| 1 | +# How to resize the columns in a Flutter DataTable (SfDataGrid)? |
| 2 | + |
| 3 | +In this article, we will show you how to resize the column 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 all the required properties. Enable column resizing by setting the [SfDataGrid.allowColumnsResizing](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/allowColumnsResizing.html) property to true. Additionally, to resize the columns, it's essential to maintain the column width collection at the application level and set the column width of the corresponding column using the [SfDataGrid.onColumnResizeUpdate](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/onColumnResizeUpdate.html) callback. |
| 6 | + |
| 7 | +```dart |
| 8 | +Map<String, double> columnWidths = { |
| 9 | + 'id': double.nan, |
| 10 | + 'name': double.nan, |
| 11 | + 'designation': double.nan, |
| 12 | + 'salary': double.nan |
| 13 | +}; |
| 14 | +
|
| 15 | + @override |
| 16 | + Widget build(BuildContext context) { |
| 17 | + return Scaffold( |
| 18 | + appBar: AppBar( |
| 19 | + title: const Text('Syncfusion Flutter DataGrid'), |
| 20 | + ), |
| 21 | + body: SfDataGrid( |
| 22 | + source: employeeDataSource, |
| 23 | + allowColumnsResizing: true, |
| 24 | + onColumnResizeUpdate: (ColumnResizeUpdateDetails details) { |
| 25 | + setState(() { |
| 26 | + columnWidths[details.column.columnName] = details.width; |
| 27 | + }); |
| 28 | + return true; |
| 29 | + }, |
| 30 | + columns: <GridColumn>[ |
| 31 | + GridColumn( |
| 32 | + width: columnWidths['id']!, |
| 33 | + columnName: 'id', |
| 34 | + label: Container( |
| 35 | + padding: EdgeInsets.all(16.0), |
| 36 | + alignment: Alignment.center, |
| 37 | + child: Text( |
| 38 | + 'ID', |
| 39 | + ))), |
| 40 | + GridColumn( |
| 41 | + width: columnWidths['name']!, |
| 42 | + columnName: 'name', |
| 43 | + label: Container( |
| 44 | + padding: EdgeInsets.all(8.0), |
| 45 | + alignment: Alignment.center, |
| 46 | + child: Text('Name'))), |
| 47 | + GridColumn( |
| 48 | + width: columnWidths['designation']!, |
| 49 | + columnName: 'designation', |
| 50 | + label: Container( |
| 51 | + padding: EdgeInsets.all(8.0), |
| 52 | + alignment: Alignment.center, |
| 53 | + child: Text( |
| 54 | + 'Designation', |
| 55 | + overflow: TextOverflow.ellipsis, |
| 56 | + ))), |
| 57 | + GridColumn( |
| 58 | + width: columnWidths['salary']!, |
| 59 | + columnName: 'salary', |
| 60 | + label: Container( |
| 61 | + padding: EdgeInsets.all(8.0), |
| 62 | + alignment: Alignment.center, |
| 63 | + child: Text('Salary'))), |
| 64 | + ], |
| 65 | + ), |
| 66 | + ); |
| 67 | + } |
| 68 | +``` |
| 69 | + |
| 70 | +You can download this example on [GitHub](https://github.com/SyncfusionExamples/How-to-resize-the-columns-in-a-Flutter-DataTable-SfDataGrid). |
0 commit comments