Multiple Select in Table / Manage Tags in a Table

App Building
1

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!

2

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.

3108×1462 390 KB

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

Best!
Grace

3

@retool_team 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?

4

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)
5

Here's an example set up of using a modal column as a workaround to not having a multiselect type column!

  1. A table with a modal type column
  2. Inside the modal, we have a multiselect component
  3. The multiselect component has an event handler that runs on change and "Runs Script"

Here's the script:

var data = table1.data

data.quantity[table1.selectedRow.index] = multiselect1.value

table1.setData(data)

In order to use this in your app, make sure to replace .quantity with the name of your column (e.g. data.your_array_column)

This will update the {{table1.data}} property successfully! If you're editing other columns the "normal" way and populating the .recordUpdates property, the new multiselect values will show up there as well :slight_smile: Pretty cool.

Let us know if you have any questions about this!

6

Just wanted to update this thread with some exciting news. The multiple Tags column (called Tags) is available on our new Table component :slight_smile: Drag in a new Table component to check it out!

1 Like