How to recreate a table like this video? for stock transfer transactions

Hi im creating a stock management system im with the stock transfer screen

how i can recreate in retool this product search component? i was thinking in table component but i think it doesnt do what the video does or im wrong?

also the search input from video when im typing it shows results from db, when i click on a result it adds to the table, how is that possible with retool?

thank you

@agaitan026 That's a big question but this can definitely be done in Retool.

I would suggest that you go through some of the tutorials and docs to determine the best approach for you and then once you have built out your MVP, you'll find a lot of your questions can be answered or found here. Of course, post any time.

https://docs.retool.com/docs/quickstart#3-add-search-to-the-app

1 Like

but at least the search by typing is something doable right? how? i cant see anything about that

Yes, the select component provides built in fuzzy match functionality. Also in that example just below the table is the following:
select * from users where first_name ILIKE {{'%' + textinput1.value + '%'}}......
" Now when you type different names into the TextInput , the query will automatically refresh, which'll cause your Table to refresh as well. Great - fuzzy search built in just a few minutes!"

1 Like

but in that example from the doc, they use text input, not select

the thing by using select component, if i got 5k items, and i click select field, it will show lot of items, any chance to hide all of them until a search result is got it?

You can use select that has built in fuzzy match

1 Like

got that, and how i can use that for my table?

i tried this

my idea is to make it just like this

just got it by using:

works good, but now how i can do the fields quantity, unit price, subtotal like the example?

You have to make the columns editable in the table and then use bulk update functionality found here
https://docs.retool.com/docs/sql-writes#bulk-updates

1 Like

i see, so i need to enable column editing, is not possible to make it like this

like text fields, inside the table

In the table component, select the edit icon in each column
You don't have to open each column as the icon is right there....

https://docs.retool.com/docs/data-in-tables#editable-table-columns

1 Like

ok im clear so i have to enable edit for each column, not possible to add a field like the image

You have to select the column type though Retool should be able to automatically detect it.

1 Like

and last, how i can do the following

when i select a new product from select component, it should add a new record in the table without erasing the current one

https://docs.retool.com/docs/data-in-tables#add-new-data-to-tables

1 Like


yes i tried that add new row button, but not taking the select field and also when first product is found select component should be clear for the next one

I apologize but I do not have the time to build out the entire solution for you. Maybe someone else can chime in and lend a hand but I would suggest reading through the docs and searching the forum. It will be better for your skillset if you challenge yourself and look for the information and/or try some solutions out on your own, get to a point where you have an MVP and then start digging deeper into the more complicated parts of your application.

1 Like

thank you

hi anyone can help me with this? which is the best way to achieve this, should i use listview or table :frowning: im struggling