Footer Row — Flutter DataGrid

Overview

SfDataGrid supports a custom footer row displayed below the last data row. Any widget can be placed inside the footer using the footer property.

Adding a Footer

Use the SfDataGrid.footer property to supply a widget:

SfDataGrid(
  source: _employeeDataSource,
  footer: Container(
    color: Colors.grey[400],
    child: Center(
      child: Text(
        'FOOTER VIEW',
        style: TextStyle(fontWeight: FontWeight.bold),
      ),
    ),
  ),
  columns: <GridColumn>[
    GridColumn(
      columnName: 'id',
      label: Container(
        padding: EdgeInsets.all(8.0),
        alignment: Alignment.center,
        child: Text('ID'),
      ),
    ),
    GridColumn(
      columnName: 'name',
      label: Container(
        padding: EdgeInsets.all(8.0),
        alignment: Alignment.center,
        child: Text('Name'),
      ),
    ),
    GridColumn(
      columnName: 'designation',
      label: Container(
        padding: EdgeInsets.all(8.0),
        alignment: Alignment.center,
        child: Text('Designation', overflow: TextOverflow.ellipsis),
      ),
    ),
    GridColumn(
      columnName: 'salary',
      label: Container(
        padding: EdgeInsets.all(8.0),
        alignment: Alignment.center,
        child: Text('Salary'),
      ),
    ),
  ],
)

Change Footer Row Height

Use SfDataGrid.footerHeight to customize the footer row height. Default is 49.0.

SfDataGrid(
  source: _employeeDataSource,
  footerHeight: 60.0,
  footer: Container(
    color: Colors.grey[400],
    child: Center(
      child: Text('FOOTER VIEW', style: TextStyle(fontWeight: FontWeight.bold)),
    ),
  ),
  columns: <GridColumn>[/* ... */],
)

Keep Footer Always Visible (Sticky Footer)

By default the footer row scrolls with content. To pin it to the bottom of the viewport at all times, set footerFrozenRowsCount to 1:

SfDataGrid(
  source: _employeeDataSource,
  footerFrozenRowsCount: 1,
  footer: Container(
    color: Colors.grey[400],
    child: Center(
      child: Text('FOOTER VIEW', style: TextStyle(fontWeight: FontWeight.bold)),
    ),
  ),
  columns: <GridColumn>[/* ... */],
)

This uses the same footerFrozenRowsCount property as Freeze Panes. See freeze-panes.md for more details on frozen rows.

Key Properties Reference

Property	Type	Default	Description
`footer`	`Widget?`	`null`	Widget shown below the last row
`footerHeight`	`double`	`49.0`	Height of the footer row
`footerFrozenRowsCount`	`int`	`0`	Set to `1` to pin footer to viewport bottom

2.8 KiB Raw Permalink Blame History