Unable to scroll horizontally ?

[harryandroiddev]

after updating to the new version i am unable to scroll horizontally , before it was working fine scrolling on both directions flawlessly , using the datatable2 , do it need any other property to be used .

[maxim-saplin]

Please share flutter doctor output and provide more detail (env, steps to reproduce, code snippet, video or screenshot etc)

[harryandroiddev]

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.0.2, on macOS 12.3.1 21E258 darwin-x64, locale en-IN)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 13.3.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2020.3)
[✓] VS Code (version 1.68.1)
[✓] Connected device (2 available)

[harryandroiddev]

`
Expanded(
child: Container(
// height: 400,

                        padding: EdgeInsets.all(defaultPadding),
                        decoration: BoxDecoration(
                          color: secondaryColor,
                          borderRadius:
                              const BorderRadius.all(Radius.circular(10)),
                        ),
                        child: DataTable2(
                       
                          // fixedLeftColumns: 1,
                          scrollController: _scrollcontroller,
                          dividerThickness: 0,
                          dataRowHeight: 80,
                          showCheckboxColumn: false,
                          bottomMargin: 10,
                    
                          // scrollController: _controller,
                          horizontalMargin: 10,
                          columnSpacing: 30, //defaultPadding,
                          minWidth: 2000,
                          columns: userscolumn(),
                    
                          rows: List.generate(
                            mailuser.length, //loading testing
                            (index) => recentFileDataRow(
                                users, index, context, groups),
                          ),
                        ),
                                           
                    
                                        
                                      ),
                    );`

[maxim-saplin]

I can reproduce the bug, thanks for submitting the issue. It's related to the addition of fixed columns in 2.3.0

Could you please for the time-being revert to lower version?

dependencies:
  data_table_2: ^2.2.3

[harryandroiddev]

dependencies: data_table_2: ^2.2.3

Have the same issue .

[maxim-saplin]

I've just pushed a fix to the main branch, could you please try it via referencing git directly

dependencies:
  data_table_2:
    git: https://github.com/maxim-saplin/data_table_2

[blayziken]

The git reference worked. Thanks

[maxim-saplin]

Great! Will close the issue once the changes are pushed to pub.dev

[rickypid]

Hi @maxim-saplin,

I have the same issue,
until a few days ago I had no problems, but now it doesn't work anymore.

Dependency:

dependencies:
  data_table_2: ^2.2.3

Error:

Error: Cannot hit test a render box with no size.
The hitTest() method was called on this RenderBox: RenderFlex#0766f:
  needs compositing
  creator: Column ← FutureBuilder<PaginateResponse<Archive>?> ← ArchivesPage ← RepaintBoundary ← IndexedSemantics ← NotificationListener<KeepAliveNotification> ← KeepAlive ← AutomaticKeepAlive ← KeyedSubtree ← _SliverFillViewportRenderObjectWidget ← _SliverFractionalPadding ← SliverFillViewport ← ⋯
  parentData: <none> (can use size)
  constraints: BoxConstraints(w=1840.0, h=672.0)
  size: MISSING
  direction: vertical
  mainAxisAlignment: start
  mainAxisSize: max
  crossAxisAlignment: center
  verticalDirection: down
Although this node is not marked as needing layout, its size is not set.
A RenderBox object must have an explicit size before it can be hit-tested. Make sure that the RenderBox in question sets its size during layout.

Code:

Column(
  children: [
    Expanded(
      child: ScrollShadow(
        controller: scrollControllerHorizontal,
        scrollDirection: Axis.horizontal,
        size: AppSize.paddingLarge,
        color: AppColors.accent,
        child: SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          controller: scrollControllerHorizontal,
          child: AppCard(
            child: DataTable2(
              scrollController: scrollController,
              dataRowHeight: 60,
              columns: TableColumns.getHeader(
                  context,
                  context.read<MachineTypeAndDetails>().machineType,
                  widget.filters),
              rows: snapshot.data!.docs
                  .mapIndexed((index, e) => TableColumns.getDataRow(
                      context,
                      context
                          .read<MachineTypeAndDetails>()
                          .machineType,
                      e,
                      index,
                      widget.filters))
                  .toList(),
            ),
          ),
        ),
      ),
    ),
...

flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.0.2, on Microsoft Windows [Versione 10.0.19043.1766], locale it-IT)
[√] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc1)
[√] Chrome - develop for the web
[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.9.0)
[√] Android Studio (version 2020.3)
[√] Android Studio (version 2021.2)
[√] VS Code (version 1.67.0)
[√] Connected device (3 available)
[√] HTTP Host Availability

• No issues found!

Today i try with new dependency but the issue persists:

dependencies:
  data_table_2: ^2.3.2

Thanks.

[maxim-saplin]

SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          controller: scrollControllerHorizontal,
          child: 

Might be the cause, DataTable2 won't work in parent with infinite dimensions.

[rickypid]

Yes, i read documentation

! Don't put the widgets inside unbounded parents. You don't need scrollables anymore (e.g. SingleChildScrollView) - widgets handle scrolling by theirselves. If you need a widget inside a Column(), wrap it into Expanded() or Flexible().

And i edited my implementation:

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    DataTable2(
      scrollController: scrollController,
      dataRowHeight: 60,
      columns: TableColumns.getHeader(
          context,
          context
              .read<MachineTypeAndDetails>()
              .machineType,
          widget.filters),
      rows: snapshot.data!.docs
          .mapIndexed((index, e) =>
              TableColumns.getDataRow(
                  context,
                  context
                      .read<MachineTypeAndDetails>()
                      .machineType,
                  e,
                  index,
                  widget.filters))
          .toList(),
    ),
...

But i have this error

======== Exception caught by widgets library =======================================================
The following assertion was thrown building LayoutBuilder:
Assertion failed: file:///C:/tool/flutter-sdk/.pub-cache/hosted/pub.dartlang.org/data_table_2-2.3.2/lib/src/data_table_2.dart:1184:12
totalFixedWidth < totalColAvailableWidth
"DataTable2, combined width of columns of fixed width is greater than availble parent width. Table will be clipped"

[maxim-saplin]

That's not an error but an assertion - the widget is supposed to be rendered just fine. It hints of a bad state situation when there're fixed width columns and their total width is greater than the available width. I supposed that somewhere in your code there're columns with fixedWidth set and the parent where the table is put is to narrow

[rickypid]

Yes, all my columns are with fixedWidth, this is why it is placed inside a SingleChildScrollView. Have you a solution for horizontal and vertical scroll ?

[maxim-saplin]

Set DataTable2.minWidth

[rickypid]

Thanks @maxim-saplin ,

I have set DataTable2.minWidth and now the DataTable2 work, but scroll only with scrollbar, not work if use touch on table area.

[maxim-saplin]

Please record the video and post here

[rickypid]

look here the scroll problem (This video is recorded with mouse pointer but the same problem it's with touch):

[maxim-saplin]

Where is the app started (OS, kind of device)?

[rickypid]

This is Web platform.

[maxim-saplin]

Can you please provide the complete info on the environment where the video is recorded (browser, device, OS etc.)?

[maxim-saplin]

If you happen to be using Chrome Dev Tool and mobile device emulation on desktop browser - that won't work and not supposed to work.

[rickypid]

Nono, my app is only web!

[maxim-saplin]

What is the browser? Do you run the browswrr (where you open the app) on PC, Mac or some Android phone?

[rickypid]

Browser is Chrome Versione 102.0.5005.115 (Build ufficiale) (a 64 bit) On Windows machine

[maxim-saplin]

Check that issue #100

[rickypid]

Ok, i have try with Edge and Firefox (On Windows) and I have the same issue!

[maxim-saplin]

Do you try to scroll via mouse or trackpad? Or do you try to scroll via taping down and then moving the cursor?

[rickypid]

Hi @maxim-saplin ,

The isses is when tap on datatable e moving the cursor or without mouse when tap on screen (with touchscreen) e move finger. with mouse scroll wheel or scrollbar the datatable scrolling correctly

[maxim-saplin]

Scrolling with mouse taps on desktop with mouse inputs doesn't make sense... That is not supposed to work

[maxim-saplin]

or without mouse when tap on screen (with touchscreen) e move finger.

That is interesting. Please provide details (device model, environment where the issue is present)

[rickypid]

Scrolling with mouse taps on desktop with mouse inputs doesn't make sense... That is not supposed to work

Yes, it working, because i have enabled this:

class AppCustomScrollBehavior extends MaterialScrollBehavior {
  @override
  Set<PointerDeviceKind> get dragDevices => {
        PointerDeviceKind.touch,
        PointerDeviceKind.mouse,
      };
}

MaterialApp(
    scrollBehavior: AppCustomScrollBehavior(), //<----------

[rickypid]

or without mouse when tap on screen (with touchscreen) e move finger.

That is interesting. Please provide details (device model, environment where the issue is present)

I have try on Browser (Chrome/Firefox/Edge) installed on linux(Ubuntu 20.04) and windows(Windows 10) machines.

[maxim-saplin]

So you don't have an actual touch device, the issue you have is you want to be able to scroll the table via mouse with the above overrides enabling mouse behaviour to be treated as touch events...

[rickypid]

So you don't have an actual touch device, the issue you have is you want to be able to scroll the table via mouse with the above overrides enabling mouse behaviour to be treated as touch events...

No, the production devices have a 15-inch capacitive touch screen, the functionality to use the mouse is only used in the development phase. The problem, however, occurs both with the mouse and with the touch.

[maxim-saplin]

I see... The best I can suggest you now is trying to fork the package, play with static bool _isControllerActive(ScrollController controller) at /lib/src/data_table_2.dart - you can make an exception here to treat certain devices as touch and thus allow proper scroll bars syncing. At the moment I don't have a general solution...

[rickypid]

I see... The best I can suggest you now is trying to fork the package, play with static bool _isControllerActive(ScrollController controller) at /lib/src/data_table_2.dart - you can make an exception here to treat certain devices as touch and thus allow proper scroll bars syncing. At the moment I don't have a general solution...

This is the exception when i try to scroll

======== Exception caught by gesture ===============================================================
The following assertion was thrown while handling a gesture:
Assertion failed: file:///C:/tool/flutter-sdk/packages/flutter/lib/src/widgets/scroll_position.dart:917:12
activity!.isScrolling
is not true

[yogithesymbian]

i have tested on safari browser from my macbook pro . also on chrome . its still happend on issue , but when i resize my screen of apps ( safari or chrome ) or mode mobile , its work to scroll horizontal . what i looking for is always enable scroll horizontal , thankyou :D

[yogithesymbian]

solved by just added minWidth: 3000,

DataTable2(
minWidth: 3000, // here is properties
)

[yogithesymbian]

awesome ,
can you make style properties to modified scroll color or thickness ?