Access cell value on table with multiple row selection

App Building
,
#1

Hi, I'm very new to re-tool and I seem to be stuck on a simple task. I have a table that allows for multiple selection of rows. One of the columns in my table is of type modal. When the modal opens, I want to display that particular row's description. The problem is that table.selectedRow.data is an array because of the multi-select option and I cannot access {{self}} from the modal. What I am looking for is how to access the value of the cell I clicked on so I can filter the data array and grab a property's value for that specific row, something like the index for the clicked cell table.selectedCell returns the first record in the list when multiple rows are selected.

Thanks!

Table component with clickable cells
#2

Hey @arincones and welcome to the forum! I’m a bit confused here - there’s no distinction on our end between the “clicked” row and the “selected” row. If you have multiple rows selected, the .selectedRow property is going to be an array (like you mentioned). In terms of selecting specific cells, you can definitely do that with a simple .map, like

{{ table.selectedRow.data.map(row => row.desiredColumn) }}

If you want just one, you can index the .selectedRow array and then reference the column directly.

1 Like
#3

Thanks, Justin! The problem is that my column is of type modal but I cannot access this modal through the inspector or assign it a query on open.

I ended up with the following solution: I added an action to my table with the “select row on click” option disabled. This way I can trigger a query and access the current row index using { additionalScope: {i:i} } in a JS query when the action button is clicked. Now, if I could just edit the styling of the action button so that it looks like a text link and not a button that would be ideal! But I can seem to be able to override the materialUI styling…any thoughts?

1 Like
#4

@arincones sorry for the delay! You can write custom CSS in Retool. For the action button, something like this should work:

<style>
  div.table-cell-action.table-cell-action-left button.ant-btn.minimal {
    box-shadow: none;
  }
</style>