Skip to content

Header columns wont scroll after shrinkWrapColumns is true #680

@pluzmedia

Description

@pluzmedia

Header columns ain't scrollable after shrinkWrapColumns: true. How to achieve that?

Activity

changed the title [-]Header columns wont scroll after shrinkWrapColums is true[/-] [+]Header columns wont scroll after shrinkWrapColumns is true[/+] on Apr 19, 2022
Tamilarasan-Paranthaman

Tamilarasan-Paranthaman commented on Apr 20, 2022

@Tamilarasan-Paranthaman

Hi @pluzmedia,

Greetings from Syncfusion.

The Header columns will not be scrollable if you use the shrinkWrapColumns property. Because if you use shrinkWrapColumns, then the DataGrid sets its maximum width based on the available columns in the DataGrid, so all the columns are laid out. Please provide more details and a sample in case we misunderstood your requirement. It will be helpful for us to check on it and provide you with the solution at the earliest.

Regards,
Tamilarasan

pluzmedia

pluzmedia commented on Apr 20, 2022

@pluzmedia
Author

So it's a limitation. I want to use use textfileds with focus node in the cells. Focusnodes got destroyed after scrolling the data grid horizontally, to over come this should to use shrinkWrapColumn but it has limitation.

Tamilarasan-Paranthaman

Tamilarasan-Paranthaman commented on Apr 21, 2022

@Tamilarasan-Paranthaman

Hi @pluzmedia,

If you’re using the focus node in the TextField and scrolling the DataGrid horizontally, the focus node will be destroyed. Because DataGrid will reuse the rows while scrolling. That’s why the focus node is destroyed. Can you please let us know the purpose of using the focus node in TextField? Also, please provide the exact details of your requirement. It will be helpful for us to check on it and provide you with the best solution at the earliest.

Regards,
Tamilarasan

pluzmedia

pluzmedia commented on Apr 21, 2022

@pluzmedia
Author

We are using focusnode to navigate textfields by arrow key or enter button.

Tamilarasan-Paranthaman

Tamilarasan-Paranthaman commented on Apr 22, 2022

@Tamilarasan-Paranthaman

Hi @pluzmedia,

You can achieve it by using the SingleChildScrollView Widget. Wrap the DataGrid as a child of the SingleChildScrollView and set the scrollDirection property to Axis.horizontal. It will allow you to scroll the header horizontally. Please check the following code snippet.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: const Text('Syncfusion Flutter DataGrid')),
        body: SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: SfDataGrid(
                  source: _employeeDataSource,
                  shrinkWrapColumns: true,
                  columns: getColumns),
            ));
  }

Also, we have published the KB article about how to perform vertical or horizontal scrolling in Flutter DataGrid by mouse dragging in web or desktop platforms. Please refer the following KB document,

KB link: https://www.syncfusion.com/kb/12893/how-to-perform-vertical-or-horizontal-scrolling-in-flutter-datatable-sfdatagrid-by-mouse

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

Regards,
Tamilarasan

YancyHsu

YancyHsu commented on Nov 18, 2024

@YancyHsu

Hi @pluzmedia,

You can achieve it by using the SingleChildScrollView Widget. Wrap the DataGrid as a child of the SingleChildScrollView and set the scrollDirection property to Axis.horizontal. It will allow you to scroll the header horizontally. Please check the following code snippet.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: const Text('Syncfusion Flutter DataGrid')),
        body: SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: SfDataGrid(
                  source: _employeeDataSource,
                  shrinkWrapColumns: true,
                  columns: getColumns),
            ));
  }

Also, we have published the KB article about how to perform vertical or horizontal scrolling in Flutter DataGrid by mouse dragging in web or desktop platforms. Please refer the following KB document,

KB link: https://www.syncfusion.com/kb/12893/how-to-perform-vertical-or-horizontal-scrolling-in-flutter-datatable-sfdatagrid-by-mouse

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

Regards, Tamilarasan

use this method, frozenColumnsCount wont work

abineshPalanisamy

abineshPalanisamy commented on May 26, 2025

@abineshPalanisamy

Hi @YancyHsu ,

In SfDataGrid, when shrinkWrapColumns and shrinkWrapRows are enabled, the DataGrid sets its maximum width and height based on the available columns and rows. This causes all columns and rows to be laid out, removing the built-in scrollbars in both directions.

To enable scrolling, wrap the DataGrid in a SingleChildScrollView and set the appropriate scrollDirection. However, using SingleChildScrollView makes the entire grid scrollable, which disables the freeze pane feature of the DataGrid.

In this case, freeze panes are not applicable, and this is the expected behavior of the DataGrid when using shrinkWrap.

Regards,
Abinesh P

ashok-kuvaraja

ashok-kuvaraja commented on Jun 9, 2025

@ashok-kuvaraja
Collaborator

Hi @pluzmedia,

We suspect that the reported issue has been resolved at your end. Hence, we are closing this issue. If you need any further assistance, please reopen this. We are always happy to help.

Regards,
Ashok K

added
workaround availableWorkaround available to overcome the query
and removed on Jun 9, 2025
locked and limited conversation to collaborators on Jul 7, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    data gridData grid componentsolvedSolved the query using existing solutionsworkaround availableWorkaround available to overcome the query

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @JayavigneshwaranG@pluzmedia@YancyHsu@ashok-kuvaraja@VijayakumarMariappan

        Issue actions

          Header columns wont scroll after shrinkWrapColumns is true · Issue #680 · syncfusion/flutter-widgets