[syncfusion_flutter_datagrid] Customizable Footer (tableSummaryRows) : Show at the bottom when list has insufficient data

[gltiennd]

Use case

Proposal

[abineshPalanisamy]

Hi @gltiennd ,

In SfDataGrid, the footer is an additional row that can be displayed under the last row. Widgets can be shown in this additional row by setting the SfDataGrid.footer property. The footer being added as the last row is the expected behavior of the DataGrid.

However, we have a workaround to achieve this behavior on our end. When there is insufficient data, you can add a custom widget, like a footer, in the build method to display at the bottom of the screen. When the rows are scrollable, you can use the SfDataGrid.footer property. In the SfDataGrid.footer, you should only add the custom widget. This workaround helps achieve the desired behavior.

We have provided sample for your reference. Please refer to the attached sample for more details.

Sample : SfDataGrid.zip

Regards,
Abinesh P

[gltiennd]

This is not the desired result. I would like it to be associated with changing the width. @abineshPalanisamy b

[abineshPalanisamy]

Hi @gltiennd ,

To display a footer in the SfDataGrid and associate it with changing the width, you can customize the widget used for the footer. The width of the footer can be dynamically adjusted to match your requirements by wrapping it in a container and setting its width property accordingly.

We have included a code snippet for your reference. Please refer to the code for more details.

  @override
  Widget build(BuildContext context) {
    final double footerWidth =
        MediaQuery.of(context).size.width * 0.8; // Adjust based on requirements

    return Scaffold(
      appBar: AppBar(
        title: const Text('Syncfusion Flutter DataGrid'),
      ),
      body: Column(
        children: [
          Expanded(
            child: SfDataGrid(
              source: employeeDataSource,
              columnWidthMode: ColumnWidthMode.fill,
              footer: isFooterEnabled
                  ? Align(
                      alignment: Alignment.center,
                      child: Container(
                        width: footerWidth, // Dynamic width for the footer
                        color: Colors.grey[400],
                        child: const Center(
                          child: Text(
                            'FOOTER VIEW',
                            style: TextStyle(fontWeight: FontWeight.bold),
                          ),
                        ),
                      ),
                    )
                  : null,
              columns: <GridColumn>[
                GridColumn(
                    columnName: 'id',
                    label: Container(
                        padding: const EdgeInsets.all(16.0),
                        alignment: Alignment.center,
                        child: const Text('ID'))),
                GridColumn(
                    columnName: 'name',
                    label: Container(
                        padding: const EdgeInsets.all(8.0),
                        alignment: Alignment.center,
                        child: const Text('Name'))),
                GridColumn(
                    columnName: 'designation',
                    label: Container(
                        padding: const EdgeInsets.all(8.0),
                        alignment: Alignment.center,
                        child: const Text(
                          'Designation',
                          overflow: TextOverflow.ellipsis,
                        ))),
                GridColumn(
                    columnName: 'salary',
                    label: Container(
                        padding: const EdgeInsets.all(8.0),
                        alignment: Alignment.center,
                        child: const Text('Salary'))),
              ],
            ),
          ),
          if (!isFooterEnabled)
            Align(
              alignment: Alignment.center,
              child: Container(
                height: 50,
                width:
                    footerWidth, // Same dynamic width as the DataGrid footer.
                color: Colors.grey[400],
                child: const Center(
                  child: Text(
                    'FOOTER VIEW',
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                ),
              ),
            ),
        ],
      ),
    );
  }

If you are still encountering issues, if there are any misunderstandings regarding your requirements, or if your needs differ, please provide specific and detailed information about the expected behavior. This should include how you need to display the footer and how you wish to customize it. Providing this additional information will help us address your request comprehensively and offer an appropriate solution.

Regards,
Abinesh P

[gltiennd]

The list I can drag horizontally. I appreciate if you fix it with buildTableSummaryCellWidget
@abineshPalanisamy b

[abineshPalanisamy]

Hi @gltiennd ,

In SfDataGrid, the table summary row always appears next to the DataGridRow. We provide support for moving the table summary to the top or bottom of the DataGrid by using the GridTableSummaryRow.position property.

In your case, you need to display the table summary row at the bottom of the screen. Unfortunately, this cannot be achieved directly through the table summary, as it is always attached to the grid. This is the expected behavior.

To achieve the desired layout, we have provided a workaround using the footer. If you need any assistance with this implementation or have further questions, please don’t hesitate to reach out. We’re happy to help!.

Regards,
Abinesh P