Filter select options results in a table cell base on row field


I've a table with an editable custom field, used to select a possible category.

When I click on the cell, it opens the select with the options based on a query.

What I'm trying to do, is filter the results based on the department value of the row clicked on.

Static is something like this and it works:
{{formatDataAsArray( => option.department == "Female" )}}

I have to replace "Female" with the proper department.

The problem is that it's a multiple row selection table, so when I click on the cell is not selecting the row.

The case is the same of this topic, but the accepted solution is not working to me.


You can add event handler to row click of new table component.

And in the event handler script you can add the the row selcetion.

At the moment I've solved using an action and a temporary state.
The action save the department value of the row in the temp state and temp state is used to filter the data in the select.

Edit: I've replaced the action with the click on a cell and it works properly.
Do you think it was possible without using a temp state?

No, it doesn't work properly :frowning:

I noticed now that the options works, but if I selected a value for a row that is female and later I click on a row that is male, the selected option value disappears since it's not anymore in the array.
It appears again if I click on a female row.
So the data remains in the changesetObject but it's not ok for the UI.

Furthermore, in order to run the insert query, I would like to have all the values in the selectedRows array, while now overwrite_category is undefined.

Is it possible to set the value for overwrite_category in selectedRows array?

I solved the last part, merging selectedRows with changesetArray, but I still have the issue with the dropdown select.
Anyone has some input for that?

Yes, You are right. Here is the key I failed to implement something like cascade select as your use case.

We have not method to change changesetObject and changesetArray in programmatically way.

I still want to find a way to workaround, I still need the same help.

I think I found a solution that can be acceptable for our case.

  • temp_department_state with initial value empty
  • in the tags field, I use this data source

{{temp_department_state.value == "" ? formatDataAsArray( : formatDataAsArray( => option.department == temp_department_state.value || option.department == "")}}

  • as event handler, i set:
    -- on click cell, I set the temp_department_state to value {{currentRow.department}}
    -- on focus, i set the temp_department_state to empty

The only downside is that when you click on the select, the selected values in other rows with different department temporary disappear.

1 Like