Question about select component

Hi i have a select component for search functions and a table, i populated the select component with a query from a mysql db so when im typing on select component it search at the same time. After i found my item i click on it and it populates to the table correctly.

like this:

my table config

now im trying when i search a new item to keep the first item on table, then after i find the second item it should be added to my table and clear the select component and be ready to add N items. how is that possible?

right now its erasing the first item and replacing it


what i did was:

  1. save select component to a temp state (state1)

  2. set table data to

  3. create a js like this

  4. set event like this

but still getting this

expected behaviour Loom | Free Screen & Video Recording Software | Loom

thank you

It seems like state1.value is the intended source for your table, but you are using a hard-coded object instead.

You also then do not need any of the table event triggers. Instead fire your Select's change event handler to add the item to your state1 like this: state1.value.length and do state1.setIn(state1.value.length, yourDataHere). You could also use a separate button to add the record so there are no negative effects to the user selecting the wrong item.

Then you have a button to save this back to your database or wherever, using state1.valeu as your bulk update input. You will probably have to use a array of objects rather than an object of arrays as you are showing in your table2.Data example right now.


What you mean by using a button to add a new row? It can't be added automatically(table row) as i select from the select component?

What I need is to first add items then after I click Save button it will save everything on the db to create a order

The button is optional, you can certainly use the Select's change event as I mentioned and then have the user change the quantiles in the table. Or you can use the Select, a number input for the quantity and a button to add the record. You have options!

To save the order:

Then you have a button to save this back to your database or wherever, using state1.valueas your bulk update input. You will probably have to use a array of objects rather than an object of arrays as you are showing in your table2.Data example right now.

Here is some data on how to bulk update queries:

I would suggest that when you add new objects to state1, you make it ready to do the bulk update, so add something like this object each time you add a record:

state1.setIn(state1.value.length, {order_id: orderId, {{}}, quantity: 0})

Then your user can change the quantiles in your table and then you use {{}} in your bulk update query.

1 Like

I will try that thank you

What about that table2 data where I added the column name and quantity that's wrong?

What I'm kinda confused is , how when I select a item using Select component it adds a new row on table, I can't see that code or how to do that each time I select a item it should be added to the table as a new row

The simple answer is: You are not adding a row to the table in this situation. You are adding a row to the table's data source, which is whatever you put in the table's Data property.

The table just displays what you tell it to, state1.value in this case, if I am understanding your situation correctly.

You just need to add items to the array in state1.value using setIn() and the table will display them.

When the user edits the quantities in the table, things change and now the table holds your "truth" in table2.recordUpdates - it now contains a copy of state1.value with all of the changes. That is why you now use the table's data to update your database.

I honestly do not know what will happen if you add records after the user has changed quantities. You are after all getting a little cheeky with the table component - it was not really designed for this use case in mind.

A more direct, if less performant, way to accomplish the same thing is to have your table's data source be a query of your order items, add a new record to order items every time the user Selects something and refresh your order items query on every update. The user changes quantities and updates using a normal bulk update query. That would be a normal Retool pattern.

1 Like

What alternative I have? To achieve this, basically is creating a stock transfer to move items from Warehouse A to Warehouse B and viceversa by selecting warehouse from and warehouse to then all the items required with quantities.

Im open to other alternatives to achieve this to make it the most easier possible to the end user who's in charge of inventory

so right now im like this



It looks like you are on the right track according to your screenshots. You need to put {{ }} around the entire JS in your Value box.

Then just do standard debugging: See what values you are getting at various steps and figure out what is happening if you don't get the expected results. You can do some tricks like take the JS out of the event and putting it into its own JS query and use the JS debugger command to step into your code using Dev Tools to see what it is doing. I tend to not put much code directly in my handlers like this as it is harder to debug.

That's a bit advanced (but very worth learning!) You can also us the old console.log() standby to output values at various steps in your code to see what is happening.

I spend a lot of time debugging in Dev Tools to figure out why stuff ain't working right. No shortcuts!

As to alternatives, there is the one I suggested earlier using a more standard Retool pattern. You can also use ListView - that would look better, but be a little bit more work.

1 Like

what you mean value box? which one? like this?


any example of that listview component? i mean how it will look better? whats the idea using listview

Yep, that's the one. Get that syntax right and you will be halfway there.

1 Like

Oh but if I remove those brackets it got green :frowning:

i will try this another GUI

i think this is a listview right?

Hey @agaitan026!

As Bradly mentioned I think you're on the right track here. When you're using setIn for your tempstate there's also a handy option you can use in the GUI!