Multiselect array in table

I have a field in a table with data in the form [category 1, category 2] etc. and I have a list of 50 categories. I want to implement a multi-select field such that if the existing data in a cell from the DB is [category1, category 2] and the user clicks the cell, they can search the full list of categories in order to add/remove categories to/from the cell and eventually save the updated cell with new categories in the multi-select to the DM as an array.

I've spent the last couple of days trying to figure this out, but I'm pretty stumped, because I don't know know to implement a multiselect in a table, any help would be appraciated

2 Likes

@johntim

Hey there :wave:

When you say multi-select field in a table are you asking if you can have a column field be a dropdown with the ability to select multiple values?

yup that's the ask

@johntim

Got it, thanks for confirming! Unfortunately that is not currently a column type, but I can think of a couple workarounds if you are open to that? One would be setting the column type to modal and in the modal having a multiselect dropdown with that cell's values.

I am going to move this to our feature-requests, but am happy to brainstorm any workarounds with you :slightly_smiling_face:

So I tried switching the columns in question to a modal but something weird, happens - clicking cells in the column doesn't trigger anything + all the data in the cells in the column disappear. See images below

Before

After (the only thing I did between this and the previous image, was switching column type to Modal)

@johntim

Ah interesting. Here I wrapped the values (self) in quotes and they show up again:

Perfect, that worked. Thanks!

When I manually populate the value and labels for the multiselect dropdown, I am able to prepopulate the multi-select to map to the labels for the equivalent values from the table cell, but when I populate the value and labels from a query, it does not pre-populate with the specified default value from the table cell, even though those values are in the query I use for value in the multi-select. I this expected behavior?

See examples below.

This is with a manual addition of values + labels for [3,31] and it works

This is when I use the query I need to pull my categories - although the values [3,31] exist in the values query, it is not prepopulated with the appropriate value label - the drop down is empty when I select the [3,31] column

Is this feature for mapping default value to the appropriate value/label in the data source only supported for manual and not the mapped option in the multi-select component?

@johntim

Just to clarify since I don't see it in the screenshot -- For the mapped data source are you setting the default value also to table3.selectedRow.data.categoryIds?

Yup, please see below, got cropped off in the last image

Hi @johntim, I think the issue here is that the default values you're trying to set aren't in your Values array. You've set your values for this component as names and your labels as ids and you're trying to set ids as values with this Default value input. If you switch your Value and Label inputs so that Value is {{item.Categories.getAll.id}} and Label is {{item.Categories.getAll.name}}, I expect this should work.

All that being said, we are close to rolling out a multiple tags column type that will allow you to do this on the table directly quite soon!

That worked, thanks!

@everett_smith do you have an update regarding the multiple tags dropdown? It is a top ask for us, hoping to see it happen soon

Hi @Webot, Unfortunately, the multitag column type was put on hold and I don't have an ETA I can share with you :confused:

Hey @johntim @Webot Wanted to follow up here and let you know that the team has launched a new table component that supports Multitags! The new table component is now the default table in the component search and the old table component will be referred to as the "legacy table" moving forward.

Your existing tables will remain unchanged as legacy tables and you can continue to use and create legacy tables if need be. But the new table has a bunch of improvement, such as a Multi-tag column! There's no auto-migration path for the new table component yet, but there is a guide describing what's changed to help with the process of migrating a legacy table to the new table.

Let us know if you have any feedback!

1 Like