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.

[Diskin]

@jg80

record, allowing users to access that information without having to "scroll right" forever. I had thought I would be

@Tess
In addition to programmatic access to collapsible state, simply persisting the value when the table is hidden would be a massive gain.

We have a project based around a table, and the workflow requires frequent moving away from the table to a different view.

We've had to bend over backwards in order to keep the state of collapsed/expanded, so when the user comes back to the table, they don't need to re-expand the multiple groups each time. We implemented a rather inelegant hack; but it's caused some performance degradation, which we can't really afford.

[Tess]

Thank you for the context, @jg80! I shared this directly with the team that owns the table. This request is still being reviewed, so I don't have an update yet, but I'll keep this thread updated with any changes

[MiguelOrtiz]

Hi @Tess,

I'm experiencing a similar issue where only if the first row is not collapsed will the values for the list view be captured correctly.

I have created a listview within the collapsible row, and the data source is filtering based in a value of the current row AND selectedCell:

Upon page load, the listView looks like this

If I expand a row that it is not the first, it changes correctly:

However, the moment I select a cell in the second row, it adds index 0, and the data that should go in Key 1 goes into Key 0. In fact, the data that it is added to key 0 is correct, as it belongs to the first row.

Onlly when I open the first row and click on a cell, would all values order up correctly

Not sure if I'm doing something wrong here and I will appreciate your support on finding a solution for this.

Best,
Miguel

[Tess]

Hey @MiguelOrtiz! Thanks for reaching out in office hours I think I see what's happening here.

The first part of your logic looks good. We're filtering invoices_getData for each row of the list view

However, the selectedCell logic is causing confusion because the selected cell could be in a different row. We need to modify this logic to only filter if the selectedCell is also in the current row.

As I was testing this theory, I seemed to also run into a race condition where the listView didn't always have the updated table values. For this reason, I added a temporary variable to track the selectedCell. I'm not sure that this is a sustainable approach, since it adds another layer of JS logic, but it seems to be working ok with my data. Hopefully, it helps give you an idea of how you might go about this use case:

Variable:

Event handler to set the variable:

List logic modified to check if the selected cell is also in the currentRow + modified to reference the temporary variable:

[Tess]

Note that this set up will default to showing all items if the user hasn't specifically selected a month for a given row

[MiguelOrtiz]

Hi Tess,

Thank you! It does work. And actually I don't see this behaviour of showing all items if no month has been selected. For reference, I leave here my final Data source code for the list view

{{ invoices_getData.data.filter(e => e.company_id === currentRow.id).filter(item => {
    const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    const invoiceDate = new Date(item.invoice_date);
    const invoiceMonthName = monthNames[invoiceDate.getMonth()];
    const isSelectedMonth = invoiceMonthName === variable1.value.columnId;
    return isSelectedMonth;
}) }}

 

Much appreciate your help!

[Tess]

Glad it works! Did you wan it to show all when no month is selected?

[MiguelOrtiz]

Actually, I hadn't thought about that. I have implemented your code and it actually makes sense and looks great Thanks!

[Tess]

Programmatic collapse rows functionality shipped

@Tess

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