New here and trying to understand - creating a dropdown & save in a data table

App Building
1

I came across a bit of an issue when trying to use a data table along with a Enum in the retool database feature. In the UI I want the user to be able to use that data table to look up phone numbers using fuzzy search and those phone numbers would have a status next to it but making status editable just makes it editable into text and I would want it to have a drop down like an Enum.

Thanks in advance.

2

Hello @lakshay53,

Welcome to the forum!

To achieve a dropdown for the status field in your data table while allowing fuzzy search on phone numbers, you can follow these steps:

  1. Create a separate table in your database to store the status options (e.g., "status_options" table with columns "id" and "status").

  2. In your main table where you store the phone numbers, add a foreign key column (e.g., "status_id") that references the "id" column of the "status_options" table.

  3. In your Retool app, create a new query (e.g., "status_options_query") that selects all the rows from the "status_options" table.

  4. Configure your data table component:

    • Set the "Data" property to the query that fetches the phone numbers and status data.
    • In the "Columns" section, configure the phone number column with the desired fuzzy search settings.
    • For the status column, set the "Column Type" to "Dropdown" and the "Options" property to "{{status_options_query.data.map(option => ({label: option.status, value: option.id}))}}".
    • Set the "Value" property of the status column to "{{self.status_id}}".

  5. Save and test your app. The status column should now display as a dropdown with the options from the "status_options" table, while still allowing fuzzy search on the phone number column.

By using a separate table for status options and a foreign key relationship, you can maintain the dropdown functionality for the status column while enabling fuzzy search on other columns in your data table.

Hope this helps.

:grinning:

Patrick