How to auto-populate table column A based on the value of table column B

App Building
1

Hi there, I have a basic table with two columns: "A" and "B".

A is a boolean column (default: false), represented by a checkbox.
B is an integer column whose default value is null.

When the user ticks column A, then column B must be populated with the row number. Whenever column A is unticked, the value of column B must be changed back to null.

Could you please tell me the easiest / best way to achieve this?

Also, if in a given row column A is ticked, I want column B at that row to be editable. If A is not ticked, then column B should not be editable.

What I tried (but I'm not married to this approach):

I'm trying to attach a handler to the "cell changed" event on my table, but oddly enough, I can't reference the table itself from the handler.

2

Hi there @Javi_V,

You can use current row within the "mapped value" field within your B column and use a terniary to return different values, e.g. {{ currentRow.a === true ? currentSourceRow.id }} (if by Row number you mean the index, then you can use "i".

You can do the same and make the "Editable" field dynamic:

image
image327×534 21.6 KB

and you can use {{currentSourceRow.A }} (which if it is a boolean then it will either be true or false.

I hope this helps!

3

Hey Miguel,

I tried it, but it doesn't work. In the mappedValue field I have access to currentSourceRow, but not currentRow.

Keep in mind that, when the checkbox in col A is ticked, that change is not synchronized with the db (nor it should be). It's just a local change to the table.

When the checkbox is ticked, the local version of column B must be populated with the appropriate value. But then, it is up to the user to synchronize the data with the db.

When I tick the checkbox, currentSourceRow does not change, and therefore, column B is not updated.

How can I fix this?

4

Hello!

I have a couple of questions about the function of this use case. It seems like what you actually want is to use the Multi-Row selection properties of the table. When you enable this and select the generated checkbox for the row, a property of the table called selectedRowKeys is available as an array of all of the row numbers for the selected rows. There is also selectedDataIndexes.

Either way, you could then tie the edit function of any column to the this array by using the i reserved index property for the column:

image
image1551×512 68.4 KB

{{ table2.selectedDataIndexes.filter(index => index >= 0).includes(i) }}

ETA: I filter for indexes greater than or equal to 0 because I don't trust the table component to not return a -1 value for the "select all" toggle. It used to be wonky and this rules it out regardless of if it gets fixed.

5

Hi pyrrho,

No, that's not what I'm trying to do, but thanks for your reply. I don't want to allow item selection on my table (single or multiple). I want that, when you change column A's value to true (hence the checkbox), column B gets populated. And when column A is unchecked, column B returns to no value.

6

Although this might be something which you could achieve I believe you are attempting to use the Retool table slightly outside of its intended purpose.

Regardless... Here is how you can utilize the changesetArray of a table to determine whether or not 1) another column is editable and 2) how to set a value in that column when the row has a changed checked state:

A column value statement to display stuff when another column is checked (id is the PK on the row):

{{ yourTable.changesetArray.filter(change => 
   change.id === currentSourceRow.id) 
   && yourTable.changesetArray.filter(change => 
   change.id === currentSourceRow.id)[0].checkBoxRowStatus 
? "CHECKED VALUE"
 : null }}

Same function for determining editabilty (id is the PK on the row):

{{ yourTable.changesetArray.filter(change => 
   change.id === currentSourceRow.id) 
   && yourTable.changesetArray.filter(change => 
   change.id === currentSourceRow.id)[0].checkBoxRowStatus }}

And an example of the table with various rows checked and updated automatically:
image

Setup in the column:

image
image315×678 31.1 KB

ETA: code readability.

7

Thanks, you nailed it this time! I'll give it a go.

1 Like
8

To auto-populate column A based on the value of column B:

Excel/Google Sheets:

In cell A1, use this formula:

excel

Copy code

=IF(B1>=50, "Pass", "Fail")

Then, drag it down to apply to the entire column.

SQL:

sql

Copy code

UPDATE table_name
SET column_a = CASE WHEN column_b >= 50 THEN 'Pass' ELSE 'Fail' END;

Simple and accurate for both use cases!