|
1 | | -# How-to-add-delete-and-resize-columns-in-Flutter-DataTable. |
2 | | -How to add, delete, and resize columns in Flutter DataTable. |
| 1 | +# How to add, delete and resize columns in Flutter DataTable?. |
| 2 | + |
| 3 | +In this article, we will show you how to add, delete and resize columns 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. Maintain the column width collection at the application level and adjust widths using the [SfDataGrid.onColumnResizeUpdate](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/onColumnResizeUpdate.html) callback. In this callback, identify the resized column, update its width, and replace the old column in the columns list. Update the columnWidths collection when adding or removing columns. After modifying columns, rebuild the rows to reflect the changes. |
| 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 | + actions: [ |
| 21 | + IconButton( |
| 22 | + icon: const Icon(Icons.add), |
| 23 | + onPressed: () { |
| 24 | + setState(() { |
| 25 | + // Set the width of the new column. |
| 26 | + columnWidths['team'] = double.nan; |
| 27 | + columns.add( |
| 28 | + GridColumn( |
| 29 | + width: columnWidths['team']!, |
| 30 | + columnName: 'team', |
| 31 | + label: Container( |
| 32 | + padding: const EdgeInsets.all(16.0), |
| 33 | + alignment: Alignment.center, |
| 34 | + child: const Text('Team'))), |
| 35 | + ); |
| 36 | +
|
| 37 | + employeeDataSource._buildDataGridRows(); |
| 38 | + }); |
| 39 | + }, |
| 40 | + ), |
| 41 | + IconButton( |
| 42 | + icon: const Icon(Icons.remove), |
| 43 | + onPressed: () { |
| 44 | + setState(() { |
| 45 | + columns.removeLast(); |
| 46 | + // Remove the width of the deleted column. |
| 47 | + columnWidths.remove(columnWidths.keys.last); |
| 48 | + employeeDataSource._buildDataGridRows(); |
| 49 | + }); |
| 50 | + }, |
| 51 | + ), |
| 52 | + ], |
| 53 | + ), |
| 54 | + body: SfDataGrid( |
| 55 | + source: employeeDataSource, |
| 56 | + gridLinesVisibility: GridLinesVisibility.both, |
| 57 | + headerGridLinesVisibility: GridLinesVisibility.both, |
| 58 | + allowColumnsResizing: true, |
| 59 | + onColumnResizeUpdate: (ColumnResizeUpdateDetails details) { |
| 60 | + setState(() { |
| 61 | + int index = columns.indexOf(columns.firstWhere( |
| 62 | + (element) => element.columnName == details.column.columnName)); |
| 63 | + columns[index] = GridColumn( |
| 64 | + columnName: details.column.columnName, |
| 65 | + width: details.width, |
| 66 | + label: details.column.label); |
| 67 | + }); |
| 68 | + return true; |
| 69 | + }, |
| 70 | + columns: columns, |
| 71 | + ), |
| 72 | + ); |
| 73 | + } |
| 74 | +``` |
| 75 | + |
| 76 | +You can download this example in [GitHub](https://github.com/SyncfusionExamples/How-to-add-delete-and-resize-columns-in-Flutter-DataTable). |
0 commit comments