Data Table horizontal scroll breaks

[staplKody]

Has your issue been reported?

• I have searched the existing issues and confirm it has not been reported.
• I give permission for members of the FlutterFlow team to access and test my project for the sole purpose of investigating this issue.

Current Behavior

I have a data table which is displaying 17 columns. I have horizontal scroll on, and table width to 100% of parent. If I begin setting explicit widths on any columns OR have more than 20 columns at a time, the horizontal scrolling breaks.

Expected Behavior

I would expect the table to still be scrollable, no matter how wide the table itself becomes.

Steps to Reproduce

1. create a page
2. put a row inside of a column
3. put a data table in that row
4. Put a large number of columns
5. set width to 100%
6. turn on horizontal scrolling
7. define some widths explicitly if it still doesn't break

Reproducible from Blank

• The steps to reproduce above start from a blank project.

Bug Report Code (Required)

IT4CkcjfsMx2rsRE7aX6bu9VijsXJmY6RY0RkewbZwsbN5PND+x/esnRQFJuZ9OrdghtfWCKjn8zwNbOm9z1MflfPgWsR4g/+Lp2cDmWeFuubLaqPbiSeEFUGshjC2qm5revuxJBKtVYWUZk13GYDevJdA3UJp/1DmoeQ86ZCJ7XrgfuQ0SLb3kNh1JWeC/v

Context

I am trying to display my firestore collections in a tabular format for easy of reading, querying etc.
You may notice that I have up to 31 fields to display in the attatched screenshot, I have stacked some fields in columns so that I could shorten the table to not break. When testing in my specific project, I noticed that any number of columns over 20 seemed to begin breaking.

Visual documentation

Additional Info

No response

Environment

- FlutterFlow version: 4.0
- Platform: Web
- Browser name and version: Chrome  118.0.5993.118
- Operating system and version affected: Desktop: Windows 11 version 22H2 (OS Build 22621.2283)

[staplKody]

I ran into the problem again where it may be easier to note the problem with another table I made.

This the the table in the web editor:

And here is how the table renders in test mode:

You'll notice that it cut off the last column, but it also locked the scrolling.
I would expect the behavior to allow me to scroll over for however many columns are added.

[staplKody]

I can also verify that the same behavior occurs when published, though inconsistent with the debug mode.
Below, debug mode allows me to scroll over the the last column: 'specialist subacct', but the published app does not allow me to scroll over to that column. It is hidden off screen.

Debug mode:

Published:

[agreaves]

Hi @staplKody, thank you for the bug report! This actually has to do with the setup of your data table. We may need to add to the documentation to better explain how it works.

However, you should set the width of the table to the total amount of space that the table needs, not the amount of space that it has available. So, if your table needs 1000px of space, you should set it to be that at least that wide. However, in order to define how much space it takes up on the page, the easiest way is to wrap it in either a Row and make it expanded (so it takes up the full available width) or in a Container with some smaller width (like 80-100% of the page). That way, it takes up e.g. 80% of the width of the page, but the table itself is much wider and can be scrolled.

Hope that makes sense!

[staplKody]

ok thank you very much.

…

________________________________ From: Alex Greaves ***@***.***> Sent: Friday, December 22, 2023 4:37 PM To: FlutterFlow/flutterflow-issues ***@***.***> Cc: Kody Byrd ***@***.***>; Mention ***@***.***> Subject: Re: [FlutterFlow/flutterflow-issues] Data Table horizontal scroll breaks (Issue #1761) EXTERNAL EMAIL Hi @staplKody<https://github.com/staplKody>, thank you for the bug report! This actually has to do with the setup of your data table. We may need to add to the documentation to better explain how it works. However, you should set the width of the table to the total amount of space that the table needs, not the amount of space that it has available. So, if your table needs 1000px of space, you should set it to be that at least that wide. However, in order to define how much space it takes up on the page, the easiest way is to wrap it in either a Row and make it expanded (so it takes up the full available width) or in a Container with some smaller width (like 80-100% of the page). That way, it takes up e.g. 80% of the width of the page, but the table itself is much wider and can be scrolled. Hope that makes sense! — Reply to this email directly, view it on GitHub<#1761 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/BA3R4MGAWEQUT3X5T7JDVC3YKYDS3AVCNFSM6AAAAAA63EXCHGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNRYGEYTAOBTHA>. You are receiving this because you were mentioned.Message ID: ***@***.***>