Table in expandable row not working as expected

Hi!

I have a table with expandable rows. I have a table inside that and need to select a row and populate data from that table's selected row.

If I open the first row first, the inner table works in that and some of the other rows work as well. Randomly the third or forth row do not work or sometimes they do (tried with multiple browsers).

If I open any other row first, the table select does not work as expected. What is going on here? Am I missing something?

This is the bug view on my app (row "selects" but does not give data to right)

This is my expandable table setup:

This is how it should work (in editor it works like it should) and you can see how my data source works:

2 Likes

Edit: this is buggy also in the editor view. So no change when viewing vs editing.

Edit: if I open all expandable rows and select row in all rows, then everything works as expected. If one is closed, it randomly breaks this.

HI @retool_amateur and welcome to the forum!

Would you mind sharing yoru settings for the text components on the right (with customer info)?

Most likely you are referring to {{table_orders_without_delivery.selectedSourceRow}}. However, as your table has several instances of it (as many instances as rows) which do not render until a given row is expanded, you need to specify which instance of the table should be used. Here's a thread regarding this issue

The way I solve this is using {{table_orders_without_delivery[table1.selectedIndex].selectedSourceRow}}

by using table1.selectedIndex, I can tell the component which instance of the nested table should be used to find the data. Bear in mind though that this will break if:

  • you have multiselect enabled for your parent table
  • if user selects another row besides the one that it is expanded. What I usually do (which is not always applicable to all use cases) is to apply an event handler to collapse a row that is no longer selected

But maybe this is not the error, please do let me know if the above helps.

Thanks for the fast reply!

I was using {{table_orders_without_delivery_plan.selectedSourceRow.customer_name}}

I tried {{ table_orders_without_delivery_plan[table1.selectedIndex].selectedSourceRow.customer_name }} but it gave me this error:

TypeError: undefined is not an object (evaluating 'table_orders_without_delivery_plan[table1.selectedIndex].selectedSourceRow')

PS. I need to have multiple rows open at the same time and have them be able to select on multiple rows. So if this breaks that it is not the solution I need.

Sorry, it is selectedDataIndex, instead of selectedIndex. you can see how that works, but if you have multiple rows open then this won't be what you need.

You will be able to find the index as well using currenSourceRow. I've got to run to a meeting, but I'll tag here @AJVancattenburch who I'm sure will be able to share some magic on how you can find the index of the nested component using the id of your parent table.

1 Like

Thanks a lot!

Still no luck.

I feel like this bug has something to do with the states being created only when all rows have been opened.

Hey @retool_amateur!

It's still early where I live haha so bear with me as I align my daily flow! :stuck_out_tongue_winking_eye:

It seems like you're having issues with selectedRow not being expressive enough as currentRow? Is that correct? If so, the self property should also be available in most areas of your tables inspector. If you're also able to iterate over item or i, you should be able to access your {{ currentRow.column_name }} where it's not available with a similar method of {{ self.data[i].column_name }}.

Also, have you tried using a listView component? They're particularly handy for dealing with nested data relationships since you can directly iterate over a data source within a component that lives inside of your listView like how you would a select component with {{ item }} -- giving you access to all properties that would live in currentRow.

I apologize if I'm misunderstanding the context of your requirements! Once I'm fully awake I can take another look at this if none of the above suggestions apply to your scenario :pray:

Thanks for the shout-out, @MiguelOrtiz! Don't sell yourself short, either, I've seen you come up with some very elegant solutions that I've applied in my applications more than once!

2 Likes

I personally would use a list view here too just with data structure and app integrity. The issue is retool will reload components when a source row is changed and I think that’s causing the app state to not hold the data correct. I like this approach of course but do recommend looking into the list view since it will target what you need. @retool_amateur

2 Likes

Thank you both!

I mean sometimes my data works just fine. I feel like this is some kind of a bug.

I was trying to use the list view but could not figure out how i was going to show that data on the left on when clicking the item.

It should work on multiple expanded rows at the same time so one variable does not work.

1 Like

Of course! Sorry it isnt working as expected. Maybe a retool dev can pop in here and offer some advice.

Hi @retool_amateur I don't see any known bugs that could be causing this :thinking: Would you be open to sending me a JSON export of your app (You can send as a DM so that other community members won't see your data)?
See screenshot below for exporting your app with hardcoded data.

3 Likes

I did that!

Hi @retool_amateur,

Thanks for checking in! Apologies for the delay. Really appreciate the json, as I am able to reproduce it, but I haven't found a workaround yet.

I will flag to our team for a fix and will keep you posted if I find a solution in the meantime

1 Like

Hi @retool_amateur It seems like a workaround could be a Select row event handler on the nested table that controls the container title component and sets the value based on the current row. This approach also seems to work in a listview :slightly_smiling_face: :crossed_fingers: