Expandable Rows Buggy Behavior

[yourbudweiser]

I have a Table with expandable rows enabled. I've added a form component to the expanded row with the data source {{ ntoTable.selectedRow }}.

With the first row expanded, the form fields are correctly populated but opening any other row populates the form with missing/incorrect data.

Viewing the form state, it looks like the form object has to be cleared or reset when a new row is expanded?

First row expanded:

Second row expanded:

Third row expanded:

Am I using the wrong Data source for the form or is there some other way to clear state when a new row is expanded?

[yourbudweiser]

I'm hoping my question was clear

Do I need to add more details or screenshots? Hoping to get some help with this asap.

Thanks,
Marc

[jg80]

I see the same behaviour, which is odd since {{ table.selectedRow }} doesn't show up as an array but seems to be treated as one in the form.

Perhaps related, is there any programmatic control over collapsing non-selected rows in the new table?

[Tess]

Hi there! Thanks for reporting this. As mentioned here, could you try using {{currentRow}} instead of the selected row? It seems to be working better

For the programmatic controls, we don't support this yet. We are tracking requests for this behavior internally, so i'll post here if it gets shipped

[jg80]

Thanks for checking in, @Tess. I still see the same behavior:

[Tess]

Hi @jg80,

How will the form fields be populated? If you click on {{currentRow}}, does it show the right object:

I might be missing something! But this set up appears to be working on my side. Once you expand a row, the form data for that row will show under form1

[jg80]

The strange behavior is the state of the form has new arrays added to it when rows are expanded. Is each data set added in the state the data in the form for the expanded row? If that is the case, why wouldn't the form already have a set of data for each row in the table before they are expanded?

First add the form, one set of data in the state:

Expand the next row, another set is added:

Can't access data in the third row yet though:

Also, when the row is collapsed, the reference doesn't go away in the state:

I found a different approach to accomplish what I was initially trying to do that brought me here, but would still like to better understand how the state evolves for components in expandable rows. The initial use case was simply to nest extended details for each record under the more critical aspects of the record, allowing users to access that information without having to "scroll right" forever. I had thought I would be able to create a JSON object in the query that could then be expanded, but found the nesting logic and states got complex.

[Tess]

Got it! I believe that part is expected (once expanded, it gets added to the component's state & will stay there even if collapsed) I'm glad you were able to move forward!

I added this thread to an internal ticket for our engineering team to review where we're tracking feedback on the expandable rows data structure.