Multiple Select in Table / Manage Tags in a Table

I’m trying to find a way to manage tags (with multiple selection) inside a table. Scenario: I’ve got products that are tagged with multiple sizes and I’d like to remove or add sizes.

The dropdown option of the table component seems to be single-select only. So I thought about opening a modal and place a multiple select component on it.
Is there a better way to achieve this?

If not: I can’t find a way to pre-fill the multiple select component when the modal opens. Is there any way to do this?

Thanks!

Hi Dominik,

Thanks for the question. Yes, you can reference data from your table in a modal with a multi-select field. You can then save this data back to your database and update the table. I’ve included an image on this post as an example.

I’m doing this by referencing the {{table1.selectedRow.data.sizes}} as the default value for my multi-select in the image attached.


I hope this helps and let us know if you have any other questions.

Best!
Grace

@grace Thanks so much for responding! I got that working now. I didn't get that the "Default Values" have to be the same format as the "Values". Which is absolutely reasonable and I didn't know why I didn't come up with this earlier.

I'm still struggling with updating the cell value on the table. I have tried (and failed) to run a JS code on "Save" button click on the modal:

table1.selectedRow.data.sizes = modifiedSizes.values

modifiedSizes being the multi select component on the modal.

Could you please help me out with this one as well?

Hey Dominik!

All of the javascript in Retool is executed in a separate iFrame, so you wouldn't be able to directly assign the properties in the app. We have some JS methods that are run through a JS API to affect your app, like .setValue() or in the table's case .setData(). That method does overwrite the entire table's data property with the value passed in, so you could do something like:


let data = table1.data
let index = table1.selectedRow.index
data[index].sizes = modifiedSizes.value //note, if the table is using an object of arrays as it's input data structure instead the format would be data.sizes[index]
table1.setData(data)