Extremely Bad Performance and crash on Web App on Table with all text "Selectable"

[jmchacond]

Can we access your project?

• [X] 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

Background

I am trying to build a corporate level application using Flutterflow for the frontend. This application needs to show tables for data management and user must be able to copy any text from these tables. The tables may contain hundreds of rows and 10-30 columns, and I am pulling the data using API calls.

Issue

The problem is that when all the text is selectable in the table, it lags and if I select number of pages, e.g. 50 o even 100, then the performance is so bad that the web app crashes. I have built a project just so that you can verify the issue:

https://supplai-wms-test.flutterflow.app/

Expected Behavior

Text selection should not cause performance problems on the web app when working with tables. If this cannot be fixed withing flutterflow a suggestion would be to enable javascript with html so that we can have smooth tables.

Steps to Reproduce

1. Create a brand-new page
2. Add a Data Table
3. Make an API call to get data and Generate Dynamic Children in a DataTable, in this case I am getting hundreds of rows and 15 columns
4. Link the corresponding data json path to every DataTableCell
5. Make every single TEXT field in each DataTableCell SELECTABLE
6. Save and Publish
7. Go to https://supplai-wms-test.flutterflow.app/
8. If you set the "Rows per Page" to 5 it works normally
9. Set the "Rows per Page" to 50 and it is extremely slow (try to scroll down)
10. Set the "Rows per Page" to 100 and it freezes :(

Reproducible from Blank

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

Bug Report Code (Required)

IT4Khc/qy4hOsctA+KXbbcFR/So5KVgjauYslsJ9Y0ojC7L0G7YyXvTBYlJuZ8PidGxcDFqWmmMG097WvvPxBMY4AE+qbJxy+LVtQx7gWk25RKqxDqueSXNfP/5hC26O05m7oB1DHOtwd2wu62a6JeusfBXYCY/7O1YWQ/qYF9n7jkq6AjLdNCJt+ysUIm6aTI5ODEz25eKMrop5yfj/0w==

Visual documentation

Environment

- FlutterFlow version: v4.1.81+
- Platform: ANY
- Browser name and version: ANY
- Operating system and version affected: ANY

Additional Information

No response

[Alezanello]

Hello!

I understand what you're experiencing. The page does freeze when I set it to 100 rows, especially when the text is set as selectable. Have you confirmed if this issue only occurs when the text is set as selectable?

As an alternative, you could try disabling the selectable option and instead enable an action on each row that copies the text to the clipboard when clicked.

Let me know if this solution works for you!

[jmchacond]

Hello, yes. I have verified that making the text selectable causes this. When I remove the Selectable flag from all of the text fields the table runs smooth. I will try setting the action and get back to you.

[jmchacond]

Hello, when add an action instead of Selectable text there are no issues, however this does not seem very efficient since I will be implementing hyperlinks for each text so that it uses that text data to open another table. Because of this I would have to use something like "Douple Tap" Or "On Hold" actions to copy the text which would make it not user friendly. Another alternative would be to add a copy icon next to each text but this, again, would not be user friendly.

[github-actions[bot]]

This issue is stale because it has been open for 7 days with no activity. If there are no further updates, a team member will close the issue.

[Alezanello]

Hello,

I apologize for the late response. Does this issue still persist, or was it fixed in the latest FlutterFlow updates?

[Alezanello]

Closing this issue since we haven't heard back from you. If you are still facing the problem please submit a new issue. Have a great day!