Adding upvote,downvote,comment feature on my table( custom column)

Hi,
(I am new to retool and JS)
I am creating a UI where I have to display name,text,upvote,downvote,comments,upvote(button),downvote(button) as the columns of the UI.


So here I want to add a functionality as when a user clicks on upvote on a row it should increase upvote count on that row and same for the downvote.

I know that this can be done by storing that value on a database and updating it when button clicked but here I am taking data from S3 which has only
username, text as column and remaining are custom column so how can I store all this in a DB and which DB can be used for this use case.

And also how can I implement comment feature.
(This is just sample data.)

Hey @G_JIGNYAS!

It sounds like you might need to get started by setting up a database that has columns for upvote, downvote and comments. We usually recommend a SQL database like PostgreSQL or MySQL, or if you're interested in a database that's in beta, but is easier to setup and manage, RetoolDB!

Once you have this setup, let me know and I can help you get your upvote/downvote buttons working :handshake:

Hi @victoria
So I tried doing what you have mentioned , I am using retool db here .


here I am facing a problem when Im clicking on upvote button then that particular rows is getting shifted to bottom of the table.

So I clicked on the id=3 row and it shifted to bottom of the table.

Also need a clarity on how to store data in retool db ,(here I manually inserted the data).
So the flow is Im getting data from S3 and display it on UI(username, text = original columns
other are custom columns).

Thanks

"So I clicked on the id=3 row and it shifted to bottom of the table."

It sounds like you'd like to make sure the table stays sorted by id, so we can do something like this in your table component (Set the sorting to sort by the id in the Asc direction):

And for your second question "So the flow is Im getting data from S3 and display it on UI(username, text = original columns", would you mind sharing how your data is coming in from S3? https://docs.retool.com/docs/s3-integration

thanks for the sort suggestion
Regarding s3 data


Here first Im getting list of bucket and then

reading the required files it and then I am doing bulk inserting that data into retool db(for storing of upvote,downvote counts) and then retrieving data from DB.

Thank you for sharing those screenshots!

It seems like you have two main setups happening here.

First, we need to figure out your data portion. Are you trying to get all your S3 data into RetoolDB? Does your S3 data have columns? Have you set up your RetoolDB to have those same columns? If so, running a bulk update query should work :slight_smile: Does your data need to be constantly shuttled from S3 to RetoolDB or just this once?

Once we figure out this backing data setup, we can tackle the table UI!

And as a quick note, instead of controlling the data order from the table, it might actually be better practice to add an ORDER BY id statement at the end of your GET query. :+1:

Yes, to implement voting( upvote, downvote) functionality I am storing my s3 data into retoolDB.
And regarding s3, it has columns and I have done setup of retool and ran the bulk insert too.
So, I have implement upvote and downvote using this setup you have mentioned.

Not sure how to constantly shuttle from s3.

Also needed a suggestion, I have implement comments feature by adding comment component and
Note key: {{ table.selectedRow.data.id }}
so here I am not sure where is the data entered in this component is stored
or is there any better way to implement the comments feature on each row of table.

In order to constantly shuttle S3 to retoolDB, you'll need to either run the query every time you open your app or set up a Workflow to constantly shuttle the data over! (docs on Workflows here: https://docs.retool.com/docs/retool-workflows)

For your comments component, it gets stored within the component's component1.comments property!

If you want to access the latest comment, you can do something like:

{{_.last(comment1.comments).value}}