Row Height Customization in Flutter DataGrid (SfDataGrid)

26 Apr 202120 minutes to read

This section explains about options to customize the header row height and the row height of all the grid rows or particular row based on your requirements.

Set height for header row

SfDataGrid allows you to customize the height of the header row by using the headerRowHeight property.

dart

@override
Widget build(BuildContext context) {
  return Scaffold(
      body: SfDataGrid(
    source: _employeeDatasource,
    headerRowHeight: 70,
    columns: <GridColumn>[
      GridTextColumn(
        columnName: 'id',
        label: Container(
          padding: EdgeInsets.symmetric(horizontal: 16.0),
          alignment: Alignment.centerRight,
          child: Text(
            'ID',
            overflow: TextOverflow.ellipsis,
          ))),
      GridTextColumn(
        columnName: 'name',
        label: Container(
          padding: EdgeInsets.symmetric(horizontal: 16.0),
          alignment: Alignment.centerLeft,
          child: Text(
            'Name',
            overflow: TextOverflow.ellipsis,
          ))),
      GridTextColumn(
        columnName: 'designation',
        label: Container(
          padding: EdgeInsets.symmetric(horizontal: 16.0),
          alignment: Alignment.centerLeft,
          child: Text(
            'Designation',
            overflow: TextOverflow.ellipsis,
          ))),
      GridTextColumn(
        columnName: 'salary',
        label: Container(
          padding: EdgeInsets.symmetric(horizontal: 16.0),
          alignment: Alignment.centerRight,
          child: Text(
            'Salary',
            overflow: TextOverflow.ellipsis,
          ))),
    ],
  ));
}

Set height for rows except header row

You can customize the height of the grid rows in SfDataGrid by using the rowHeight property.

dart

@override
Widget build(BuildContext context) {
  return Scaffold(
      body: SfDataGrid(
    source: _employeeDatasource,
    rowHeight: 60,
    columns: <GridColumn>[
      GridTextColumn(
        columnName: 'id',
        label: Container(
          padding: EdgeInsets.symmetric(horizontal: 16.0),
          alignment: Alignment.centerRight,
          child: Text(
            'ID',
            overflow: TextOverflow.ellipsis,
          ))),
      GridTextColumn(
        columnName: 'name',
        label: Container(
          padding: EdgeInsets.symmetric(horizontal: 16.0),
          alignment: Alignment.centerLeft,
          child: Text(
            'Name',
            overflow: TextOverflow.ellipsis,
          ))),
      GridTextColumn(
        columnName: 'designation',
        label: Container(
          padding: EdgeInsets.symmetric(horizontal: 16.0),
          alignment: Alignment.centerLeft,
          child: Text(
            'Designation',
            overflow: TextOverflow.ellipsis,
          ))),
      GridTextColumn(
        columnName: 'salary',
        label: Container(
          padding: EdgeInsets.symmetric(horizontal: 16.0),
          alignment: Alignment.centerRight,
          child: Text(
            'Salary',
            overflow: TextOverflow.ellipsis,
          ))),
    ],
  ));
}

Refresh row height for specific row

The SfDataGrid allows you to update or refresh specific row and it’s height when
an underlying data is updated.

You can refresh a specific row and its height by using the DataGridController.refreshRow method. This method has following two arguments,

• rowIndex- Specify the required row index which is required to refresh. If you specify this, the data alone will be refreshed for a row.

• recalculateRowHeight - Decides whether a height of a row should be refreshed along with the data.

If you call refreshRow method, onQueryRowHeight callback will called for that specific row. So, auto-calculation of height can be recalculated for that row.

In the below example, row data is updated when the refreshRow is called in onPressed callback of the FlatButton.

dart

List<Employee> _employees = [];

final EmployeeDataSource _employeeDataSource = EmployeeDataSource();

final DataGridController _controller = DataGridController();

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('Syncfusion Flutter DataGrid'),
    ),
    body: Column(
      children: [
        FlatButton(
          child: const Text('Update cell value),
              onPressed: () {
                _employees[0].id=1010;
                _employeeData[0].name = 'Maria Anders';
                _employeeData[0].designation = 'Sales Representative';
                _employees[0].salary = 25000;
                _controller.refreshRow(0);
                _employeeDataSource.getData(_employees);
                _employeeDataSource.updateDataSource();
              }),
          SfDataGrid(
            source: _employeeDataSource,
            controller: _controller,
            columnSizer: _columnSizer,
            onQueryRowHeight: (RowHeightDetails details) {
              if (details.rowIndex == 0) {
                return 100.0;
              }
              
              return 50.0; 
            },
            columns: <GridColumn>[
              GridTextColumn(
                columnName: 'id',
                label: Container(
                  padding: EdgeInsets.symmetric(horizontal: 16.0),
                  alignment: Alignment.centerRight,
                  child: Text(
                    'ID',
                    overflow: TextOverflow.ellipsis,
                  ))),
              GridTextColumn(
                columnName: 'name',
                label: Container(
                  padding: EdgeInsets.symmetric(horizontal: 16.0),
                  alignment: Alignment.centerLeft,
                  child: Text(
                    'Name',
                    overflow: TextOverflow.ellipsis,
                  ))),
              GridTextColumn(
                columnName: 'designation',
                label: Container(
                  padding: EdgeInsets.symmetric(horizontal: 16.0),
                  alignment: Alignment.centerLeft,
                  child: Text(
                    'Designation',
                    overflow: TextOverflow.ellipsis,
                  ))),
              GridTextColumn(
                columnName: 'salary',
                label: Container(
                  padding: EdgeInsets.symmetric(horizontal: 16.0),
                  alignment: Alignment.centerRight,
                  child: Text(
                    'Salary',
                    overflow: TextOverflow.ellipsis,
                  ))),
            ],
          ),
        ],
      ),
    );
  }

In the below example, row data is refreshed along with its row height when the refreshRow is called in onPressed callback of the FlatButton.

dart

List<Employee> _employees = [];

final EmployeeDataSource _employeeDataSource = EmployeeDataSource();;

final DataGridController _controller = DataGridController();

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('Syncfusion Flutter DataGrid'),
    ),
    body: Column(
      children: [
        FlatButton(
          child: const Text('Update cell value),
              onPressed: () {
                _employees[0].id=1010;
                _employeeData[0].name = 'Maria Anders';
                _employeeData[0].designation = 'Sales Representative';
                _employees[0].salary = 25000;
                _controller.refreshRow(0, recalculateRowHeight: true);
                _employeeDataSource.getData(_employees);
                _employeeDataSource.updateDataSource();
              }),
          SfDataGrid(
            source: _employeeDataSource,
            controller: _controller,
            columnSizer: _columnSizer,
            onQueryRowHeight: (RowHeightDetails details) {
              if (details.rowIndex == 0) {
                return 100;
              }
              return 50.0;  
            },
            columns: <GridColumn>[
              GridTextColumn(
                columnName: 'id',
                label: Container(
                  padding: EdgeInsets.symmetric(horizontal: 16.0),
                  alignment: Alignment.centerRight,
                  child: Text(
                    'ID',
                    overflow: TextOverflow.ellipsis,
                  ))),
              GridTextColumn(
                columnName: 'name',
                label: Container(
                  padding: EdgeInsets.symmetric(horizontal: 16.0),
                  alignment: Alignment.centerLeft,
                  child: Text(
                    'Name',
                    overflow: TextOverflow.ellipsis,
                  ))),
              GridTextColumn(
                columnName: 'designation',
                label: Container(
                  padding: EdgeInsets.symmetric(horizontal: 16.0),
                  alignment: Alignment.centerLeft,
                  child: Text(
                    'Designation',
                    overflow: TextOverflow.ellipsis,
                  ))),
              GridTextColumn(
                columnName: 'salary',
                label: Container(
                  padding: EdgeInsets.symmetric(horizontal: 16.0),
                  alignment: Alignment.centerRight,
                  child: Text(
                    'Salary',
                    overflow: TextOverflow.ellipsis,
                  ))),
            ],
          ),
        ],
      ),
    );
  }