Changing horizontal ScrollBar position to beneath the DataGrid

[Evan Evans]

Currently when the scrollbar is visible, it's shown inside the table which is not intuitive since it may block the last row's content. Is there a way to position it below the table? I'm also using shrinkWrapRow so I want to do it without wrapping the grid with a fixed-height Container

[Tamilarasan Paranthaman]

Hi Evan,

By default, the scrollbar is visible inside the DataGrid i.e., at the bottom of its height. Its behavior of the DataGrid. Also, DataGrid doesn’t have support for changing the position of the scrollbar. In your case, you can achieve your requirement by using the footer. Load the SizedBox widget in the footer and set the required height, the scrollbar is shown at the footer. We have prepared the sample for that. Please check the following sample and code snippet.

Code Snippet:

  @override

  Widget build(BuildContext context) {

    return Scaffold(

        appBar: AppBar(

          title: const Text('Flutter SfDataGrid'),

        ),

        body: Column(children: [

          SfDataGrid(

            source: _employeeDataSource,

            columns: getColumns,

            defaultColumnWidth: 500,

            shrinkWrapRows: true,

            isScrollbarAlwaysShown: true,

            footer: const SizedBox(),

            footerHeight: 10,

          )

        ]));

  }

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/sample889640361

We hope this helps. Please let us know if you need any further assistance.

Regards,

Tamilarasan