Populating dropdown options in a Smart Table


I am trying to use the smart table component, as I am finding it difficult trying to edit the rows of data in the generic ‘table’ component. For some columns in the smart table, I want the user to see options they can choose from when adding or editing a record. I see I have to choose the 'Filter Type; of List (see screenshot below), but I can’t see where I can specify what the options in the List should be. Can someone please help with this?

Screenshot - Sample Data 8


1 Like

hey mate I’m not Javascript expert but I suspect you’ll need to work with the Code module in the Data Connection tab.

Have a look at what I did here to select variables: Map AirTable Columns - #3 by ArtemRomanovsky

Your solution won’t be exactly the same but it’s in this ballpark I think.

1 Like

Thank you @TimTim!
@ObyY please let me know if the solution works. :pray:t3: If not, we’ll find the other one.

Thanks @TimTim. My data correctly maps to the smart table columns. The problem I am having is populating the dropdown options for the top row of the smart table, which is a row that allows you to add a new record. I want a user to see a list of options to choose from (for some input fields) when they are trying to add a new record. It is the populating of this options list that has me stuck.

Hi @ev_jennie. See my response to @TimTim. I am stuck in another section of the Smart Table. Thanks!

Oh I’m sorry I misunderstood. Have you looked at this?

Maybe this helps UI Bakery Documentation

1 Like

Thanks Artem! I will try this out and see if it addresses my concern.

A follow on question I have is: Is there a way to have a Date Picker for one or more of the input fields when adding or editing a record?

I’m not sure I got the question clearly.
Do you want to put a date picker into 2-3 input fields while editing the record?
Sorry if I’m mistaken, can you add an image illustrating the idea?

Hi Artem,

See a screen shot below. I am trying to see how a field like the one highlighted could have a Date Picker. Right now, it seems the Smart Table only supports typing in directly or choosing from a drop down list. But there is no option to choose dates. Is this something that is not yet supported?

Thank you for clarification, Oby!
Yes, you are right, we don’t have such functionality to add a date picker inside of SmartTable yet.
I infromed the development team about your idea, probably, we will see this feaure in the new release of a SmartTable.

1 Like

Okay, great.

In order to progress further with the project I am currently working on, I decided to go ahead and just use the Smart Table in the hopes that the ‘Date Picker’ component will be supported by the time I am wrapping up on the project and users begin using the Web App. However, I have run into some more setbacks with the Smart Table. I am not sure if it is a bug issue or just a feature limitation issue. The issues I am facing are:

  1. After incorporating the code to populate the drop down lists for the Smart Table, I see a drop down on the 1st row. However, when I try to add a new record or update an existing record, the drop down disappears. It is when a record is being added or updated that a dropdown list would be most useful in a table. Is there a plan to enable a drop down to show when adding or editing a record? (See screen capture below)

  2. The placement of the ‘Add New’ button seems wrongly placed. It looks like it should be placed above the table, so you know when you click on it, a new row shows up in the table for the addition of a new record. When I look at the Smart Table and see some input fields at the top and a button to the left that reads ‘Add New’, my initial assumption is that I populate the input fields on top and click the ‘Add New’ button to add the new record. However, from trying this out, I see that the input fields at the top of the Smart Table are actually search fields. So what you input in them filter the records shown in the Smart Table. To make it clear that the input fields on top of the Smart Table are actually search fields, I would think there should be a label that says something like ‘Search’ where the ‘Add New’ button currently is.

The feedback above is a bit long, but I hope it is clear.
Overall, for the 1st issue, can you advise if there would be a plan to accommodate having a dropdown list show for the add and edit feature? And if so, how soon someone could expect to see it in Production. This would help me determine if I should continue working with the Smart Table or try to do what I am trying to with a Regular Table. For the 2nd issue, I could potentially live with it, but it would be nice to have the ‘Add New’ button moved somewhere else to make it clear how it works.


See the screen shot I forgot to add

Got it, Oby!
I will add the request № 1 to the idea bank, there is no possibility to use a select while editing/adding row at the moment.
Regarding the request № 2, it should be fixed quite soon (with the release of a new SmartTable).
I hope this helps

1 Like

Thanks Artem. I look forward to using the soon to be release updated Smart Table.

Hi Artem,

I am just checking in. Is there a timeline now for when the new Smart Table would be released?


Thank you for the reply, @ObyY
It should be released in February 2021.
We have a roadmap with a timeline in months.

1 Like