Saving changes to custom column in a table without backend DB

Queries and Resources
#1

Hi everyone!

Deceptively simple problem here:

I've created a table with a dropdown custom column. I'd like to select a value from preset categories in the dropdown, click "Save Changes" in the footer of the table, and have those changes persist over time. I also have an event handler for the table that simply gives a notification for "Changes saved!"

However, the changes to the custom column do not persist over time. Maybe this is by design, but when I refresh the page or click "Reload table data." in the footer of the table, the previously assigned categories disappear. Is there any way to get these changes to persist at least after refreshing the webpage? It seems like I may need an SQL DB to have these changes persist over time (as shown here: How to build an admin panel / GUI for your SQL database in 10 minutes - YouTube). Is this true?

I've attached a Loom video below to give context:

Twitter Analytics | Editor Retool - 15 May 2022 - Watch Video



Thank you for your help in advance!

#2

Hey,

The Save Changes button might a bit misleading in this case. It only gives you the opportunity to call your api and actually save your changes :slight_smile:

To achieve what you want, you have to use local storage to persist the changes in the changeSet

property of the table when the Save Changes button is clicked.

1 Like
#3

@vangelov this is extremely helpful - thank you! i'll work on debugging further -- do you mind if I tag you again if i hit another roadblock?

also, i don't want to push my luck here, but if you know anything about cursor-based pagination in Retool, i'm facing a bug here: Debugging cursor-based paginated API JS Query

thank you regardless :slight_smile:

#4

I got curious how it will actually work so I created a small demo :slight_smile:

Source:

In my example I use the Postgres sample database.

In short it works like this:

  • Don't add a custom column manually from the table settings UI.
  • The additional column is added by a transformer that gets the data from the query, adds the custom column with a initial value and get the latest saved data from the local storage (if any) using the item's id value
  • When Saves changes button is clicked the data is persisted in the local storage for each updated item using its id
3 Likes