Read and update the table row in a column of type modal

App Building
1

I have some columns that have rich text content, I've therefore added a calculated column of type model to edit them with the rich text editor component.

  1. How do I get the row (or its index/id) that was clicked on to open the modal? This can differ from the {{table_name.selectedRow.data }}, being that one can still select other rows while this model is open.

    In React terms, how do I pass state down from the model cell to the form and rich text area? I'de want to pass the {{currentRow}} to the form with the rich text area or set a temp variable to that when the model is opened.

    Currently, if another row is selected any edits are immediately lost, without any warning.

    Perhaps there is a way to disable clicks outside of the open model that way I can use the {{table_name.selectedRow.data }} knowing that it will not change until the model is closed.

  2. After making changes how do I go about saving them? Can I

    1. Insert the changes into the table and save them with a bulk update on the table? or
    2. do I need to use a separate update query in the model. (Probably wrapping the rich text editor in a form.)
2

Hi Arye!

For # 1:
As a rule, when you click on a button in a row, it should automatically select that row. At that point, you can save that data into a Temporary State variable, or do whatever you want with it before table state changes.

I would recommend you use a button rather than a modal. The modal works well for simple use-cases. If your concern is that there could be a state change after the modal is opened, the Temporary State variable will solve this concern - and a button is the way to make this work properly.

Your button should set the Temporary State and then open the modal.

For #2:
If you have a button on the modal, if that triggers a query, you can simply drive that query with the Values in those fields.

Generally:
If you’re viewing data in the Table and would like to edit there, you can link a query to “On row add” under “Table Edit Queries”. This will turn on a + button and clicking that would allow users to provide new data. You can then pump that data into a query using table1.newRow.

This is the generally accepted way to add data to tables. However, as you can see, there are many ways to accomplish this. So, take “generally accepted” lightly.

I hope all of this helps. Let us know if you have any issues.

3