How to only show a table when a button is clicked

App Building
1

Hi Retool team,

I want to hide a table and only show it when a button is clicked. On the right-side panel of the table component, there's a layout section to dynamically set when the table should be hidden. My use case is the table and button are in a modal. When the user opens a modal and clicks the button, the table shows. And after the modal is closed and reopened again, they need to click the button again in order to see the table.

I tried to link the button to trigger a query, and control the visibility of the table using {{!=query.data? false:true}}. But the problem is that after a query is run, the table stays and cannot be hidden again.

Thank you very much for the help!

2

I think a switch component would work better for this use-case.

  • Add a switch to the modal
  • Make sure the default state of the switch is false
  • Add the switch value to the table hide parameter {{switch.value != true}}
  • Add an event handler to the modal that when it's closed sets the value of the switch to false

Would that work for you?

2 Likes
3

Hi @minijohn,
Yes, it works! Thank you a lot for the help. :innocent:

1 Like