Update table cell's value without refreshing the data

App Building
1

I want to update the selected cell's value after a query is run.

  • I cannot recall the data
  • I cannot use editable columns

I want to basically be able to do something like:
table1.selectedRow.data.status = 'Done'

2

Hi there @ozgunk :wave:

I would suggest that instead of doing that, you write back and update the resource that you're querying for in the first (the data that populates your table). Once it's written back make sure to call the query again to get the most updated information for your table.

How does that sound to you? Let me know if you need help with that.

Best

Pawan

3

@Pawan I want to follow up here as a full table refresh doesn't my use case (and potentially the OPs). The table contains a lot of data and is expensive to populate. The use case is that I select a row and the data is sent to an API, and if the request is successful, I'd like to mark the status 'Complete' based on the response. Any guidance on this would be appreciated. Thank you!

4

Hi @rstu, I agree with Pawan that broadly it would be better if you could update your table component directly from your datasource rather than separately updating temporary data populating your table and your datasource. The latter opens up the potential for any number of issues with data integrity and isn't something I would recommend without a better sense of how this data is being updated and what other actions are being performed with the data in Retool.

That being said, you could populate a temporary state variable with the data from your initial query to your datastore. Then when the API request to update an individual row returns successfully, you could trigger a JS query that updates only the necessary slice of the temporary state with the state.setIn() method which would in turn update the table and avoid the expensive query run.

Something I might suggest instead would be to paginate the query that populates the table to avoid the expensive operation in the first place (assuming that your datastore supports pagination and that could work with your use case). Here's a link to our docs on server-side pagination if that could be an option!

5

@everett_smith old post but still very current as neither the legacy or new table supports "inline" editing (with background/deferred save).

I am using a temp state variable and setIn() on several columns of the row being edited. However the performance is very variable - the array is 3000 x 17, and one setIn() can take between 2 and 20s. 2 questions:

  1. is there a way to measure performance and find the bottleneck ? 20s for 3000 rows array is abnormal
  2. would using async and await on each setIn() help ? If so, code snippet would be appreciated.

Thanks !

6

@yiga2 Could you clarify what you mean when you say the table doesn't support inline editing? You can edit cells and the table will store those edits temporarily. Are you running into a restriction with this functionality?

7

@everett_smith Sorry, I meant user can edit a given cell but there is no (straightforward) way to edit programmatically other cells on same row. As discussed in many other threads, the workaround to update a temp state as source of table is really too cumbersome and slow.

We have ended up using more native Google Sheets. For our use cases, Retool Table are really only good for presentation.

8

Hey @yiga2, thanks for the additional feedback here. I've brought the issue up with the dev team for them to consider. In the meantime, it's understandable that you might want to integrate a different service for this particular functionality.

Since the topic you brought up here is specifically performance though, if you still have that implementation of your table would you mind sharing it? An app export may help but if you're in a Cloud-hosted org and we could step in to look at your app that would be awesome. No guarantees on what we find but performance issues can show up in a number of places so I'd definitely be curious to take a look!