Retool Table Component Summary Row Click event isn't operating correctly

đź’¬ App Building
, ,
1

  1. My goal: Use the summary to ONLY display summary information and not trigger on click or row select events

  2. Issue: In my primary example, Retool tables with 15 or above rows trigger on click events and on select events for the table whilst those of underneath that size do not. When this occurs, the table acts as if the 15th row was selected on the first click of the summary row. If you select the summary row again, it may select a row greater than 15 generally if the row is 2 less than the maximum number of rows and greater than row 15 OR equal to row 25 depending on which one comes first. All of the specific numbers here change depending on the literal size of the table, which is why in the example, there is a second table at the bottom that is bigger than the first table whilst having the same number of rows based on what you input in the number input component. Because of the unintended selection occuring, there isn’t a way I can stop click events from occurring based on the row selected as there is no way to distinguish an actual click of row 15 with a fake one caused by this issue. Additionally, for the actual intended usage of the click events on my company’s application (Triggering a pop up based on the info in that row) that brought this issue to light, the tables that have this issue’s summary rows are un-navigable for the end user.

  3. Steps I've taken to troubleshoot: I ran through every setting of Retool Tables to try to isolate the source of this issue as the dashboard my company is running into this issue on has some summary rows that have broken, and was able to reach this understanding

  4. Additional info: Cloud
    The click event for both tables is changing the text component underneath it to say “The Issue has occured.” You can reset this for your own testing via changing the number in the number input component or re-submitting the existing number.

    Link to Example
    Export:

    Untitled-18.json (12.7 KB)

4

@Darren @Jack_T @ChiEn Can you please look into this?

5

Thanks for flagging this, @Daniel_Fleuranvil! I'm not sure how it slipped through the cracks but will get eyes on it today. :+1:

1 Like
6

Thanks for the detailed reproduction! I've filed a bug report internally and will give you an update as soon as I can. :+1:

Out of curiosity, have you tried out the new app builder yet? It's still early days, but switching to a pure React-based architecture has effectively eliminated so many of these minor bugs.

7

I just tried doing so and using any part of the converted page causes the page to stop responding. I took a quick glance through the react code, and I don’t see anything that looks like the source of that issue, but I will say, the pop out behavior of the bottom row of the table doesn’t appear to be present in this new converted app cause the react code in the footer is as follows:

<TableFooter>
          <TableRow>
            <TableCell className="text-right font-medium tabular-nums">
              Sum: {numberFormatter.format(sum)}
            </TableCell>
          </TableRow>
        </TableFooter>
8

Hmm interesting. :thinking: I'm not able to access your converted app, as sharing via public URL isn't yet supported, but can you check for any errors in the browser console?

9

Console log and the performance tab is clear.

10

When you say that the page stops responding, do you mean that the browser tab itself is unresponsive? Or does it feel more like an issue with app-construction? Iterating on the app with the agent may help to diagnose and resolve the latter.

11

Thanks for joining Office Hours recently, @Daniel_Fleuranvil! Have you spent any additional time converting your app?

12

No, I haven’t.

1 Like
13

Let us know if you end up having any additional questions!