Changing queried data in the frontend table without submitting to backend

Question and Answers
1

Hello,
I’m trying to build a small proof of concept using appsmith.
My use case is, to develop a new frontend using existing application’s HTTP APIs to query data and submit changes.

I was able to build a page with all controls, and as a result populate table with requested data. Table is configured for multi-row selection. After user selects rows, he has a buttons below table to change state of those rows (state is kept in one of the table columns). This changes should happen only in the frontend until user click another button which submits all changes to the API - so it is possible to set different states to different rows before submit, using multiple button clicks and different selections.

I have written custom JS attached to button which modifies the rows (using table.selectedRows variable), but although fields are modified in JavaScript (printed with console.log()) those changes are not reflected in the table. I also tried to modify the “api.data” variable directly but with the same result.

I have found a workaround to do this using storeValue() - first when API is requested for table data it is stored under some variable. Table is then getting data from store, instead of direct binding to API. And my JS attached to button is modifying data from store and storing it under the same variable after changes.

Is there a simplier way to do this? Or maybe this is the right approach?

thank you for your help!

2

@droggo considering you are trying to modify the state of an individual row, the approach to store it in memory and update it is correct. You cannot manually update the table.selectedRows variable, they are all read-only. The correct way to achieve this is to store the state and read it in the custom column.

3

Hi Nikhil, thank you for the response. Using this method everything is working as expected

4

Just wanted to add that it might be helpful to add this concept (storing a table in memory via storeValue) in the documentation. I find myself doing this somewhat frequently to do a few things (before inserting the full table into a database):

  1. add tools to allow users to move rows up and down and change a value that corresponds to a row’s position
  2. add/remove rows in a table
  3. edit values as described by droggo
    Maybe this is less common for others, but since I find myself reusing this “trick” often, I thought I’d make the suggestion.