Table New - Hide Action Button

Feature Requests
1

Table New.
How can I hide the Action Button when hovering over a row based on the data in that row? For example, not to show the 'Add to Cart' button for rows where Amount equals 0.

2

Hi @peregrinus,

There is currently no way to hide an action button when hovering over a row based on the data in that row in Retool. However, there is a workaround that you can use. :slightly_smiling_face:

To do this, you will need to create a custom column in your table that calculates whether or not the action button should be visible. You can use the following formula:

{{ currentRow.Amount !== 0 }}

This formula will return true if the Amount column in the current row is not equal to 0, and false otherwise.

Once you have created the custom column, you can add it to the table and make it hidden. Then, you can add the following code to the Hidden property of the action button:

{{ !currentRow.visible }}

This code will hide the action button if the visible column in the current row is false.

Here is an example of how to implement this workaround:

// Create a custom column to calculate whether or not the action button should be visible
const visibleColumn = table.addColumn({
  title: 'Visible',
  type: 'boolean',
  formula: '{{ currentRow.Amount !== 0 }}',
  hidden: true,
});

// Hide the action button if the visible column is false
table.addActionButton({
  title: 'Add to Cart',
  hidden: '{{ !currentRow.visible }}',
});

This is a workaround, and it is not as ideal as having a built-in way to hide action buttons based on row data. However, it is a solution that you can use until our friends at Retool adds this feature. (@victoria hint hint)

Hope this helps.

:grinning:

Patrick

3

Why add a column? Why can't we use Hidden {{ currentRow.Amount !== 0 }}?
Anyway, there is an error - currentRow is not defined."

4

Hi @peregrinus,

The reason why the workaround requires creating a custom column is because the Hidden property of action buttons only supports simple expressions. The expression {{ currentRow.Amount !== 0 }} is not a simple expression, because it references the currentRow variable.

:grinning:

Patrick

5

Hi @peregrinus,

Try currentSourceRow, but even with it, I'm not sure the expression can be used in the hidden property anyway. Look forward to hearing if you succeed with this!

6

Hi @CalMacFarlane,

You are correct! The Hidden property of action buttons does indeed only support simple expressions, and the expression {{ currentRow.Amount !== 0 }} is not a simple expression.

I've tried using the currentSourceRow variable as you suggested, but unfortunately, it doesn't work either. The Hidden property still expects a simple expression, and {{ currentSourceRow.Amount !== 0 }} is still considered a complex expression.

I've also checked the Retool documentation, and there's no mention of using complex expressions in the Hidden property of action buttons. It seems that this functionality is currently not supported? @Tess

:grinning:

Patrick

7

Not working for me. I did it in another way: with custom CSS which hides all disabled buttons:

button:disabled
{
  display: none;
}

Unfortunately this solution will hide any other buttons on submit. But i think it is possible to make it smarter by adding a class of floating buttons.

1 Like
8

Currently, we don't support conditionally hiding action buttons based on row data, but we are tracking requests for this feature! I'll post back here if it's something we decide to add

1 Like
9

Add my name to the group of folks requesting this feature, I found this post while looking to see if it was possible to do

1 Like
10

I'd like this feature too - I'm trying to disable a delete action button in a table if the row is referenced in another table, but it seems like this is not doable from this thread.

11

Hi @nsn_ey Disabling the row conditionally should be doable using currentRow or currentSourceRow:crossed_fingers:

12

aha, thanks Tess! my apologies for hijacking this thread then :slight_smile: currentRow seems to work