allowColumnsResizing property

bool allowColumnsResizing
final

Decides whether a column can be resized by the user interactively using a pointer or not.

In mobile platforms, resize indicator will be shown on the right side border of the column header when the user long-press a column header. Then, users tap and drag the resizing indicator to perform the column resizing.

In web and desktop platforms, resizing can be performed by clicking and dragging the right side (left side in RTL mode) border of a column header.

DataGrid does not automatically resize the columns when you perform column resizing. You should maintain the column width collection at the application level and set the column width of corresponding column using the SfDataGrid.onColumnResizeUpdate callback.

The column width must be set inside the setState method to refresh the DataGrid.

If you want to disable the column resizing for specific columns, return false for the specific columns in SfDataGrid.onColumnResizeStart.

The following example shows how to set the column width when resizing a column.

Map<String, double> columnWidths = {
 'id': double.nan,
 'name': double.nan,
 'designation': double.nan,
 'salary': double.nan
};

@override
Widget build(BuildContext context) {
 return Scaffold(
   appBar: AppBar(
     title: const Text('Syncfusion Flutter DataGrid'),
   ),
   body: SfDataGrid(
     source: employeeDataSource,
     allowColumnsResizing: true,
     onColumnResizeUpdate: (details) {
       setState(() {
         columnWidths[details.column.columnName] = details.width;
       });
       return true;
     },
     columns: <GridColumn>[
       GridColumn(
           columnName: 'id',
           width: columnWidths['id']!,
           label: Container(
               padding: const EdgeInsets.all(16.0),
               alignment: Alignment.center,
               child: const Text(
                 'ID',
               ))),
       GridColumn(
           columnName: 'name',
           width: columnWidths['name']!,
           label: Container(
               padding: const EdgeInsets.all(8.0),
               alignment: Alignment.center,
               child: const Text('Name'))),
       GridColumn(
           columnName: 'designation',
           width: columnWidths['designation']!,
           label: Container(
               padding: const EdgeInsets.all(8.0),
               alignment: Alignment.center,
               child: const Text(
                 'Designation',
                 overflow: TextOverflow.ellipsis,
               ))),
       GridColumn(
           columnName: 'salary',
           width: columnWidths['salary']!,
           label: Container(
               padding: const EdgeInsets.all(8.0),
               alignment: Alignment.center,
               child: const Text('Salary'))),
     ],
   ),
 );
}

Defaults to false.

See also,

Implementation

final bool allowColumnsResizing;