Hide an empty table?

I’m probably overlooking something obvious but how do I go about hiding an empty table that is only filled via an API request when a form is submitted (its default state is empty)? Once there is data in the table, I’d like it to display, but be hidden when it is empty.

Thanks!

Hey John!

In the bottom right of the inspector panel, there is a "Hide when true" setting that can take a dynamic input. Something like {{ !query1.data }} where query1.data is what is being displayed would return as true when null.

@alex-w, Supposing we have a button and upon clicking that, it will hide the table entirely. In addition, clicking once more will display the entire table.

{{query1.data}} or multiple options {{query1.query}} and {{query1.disabled}} aren't working.
How to proceed ?

Hi @tester!

Welcome to the community. The Hide when true property can reference any state inside the Retool application. We also have Temporary State, which allows you to create state that's de-coupled from components and queries.
In this case, we can keep track of whether or not to display the table in Temporary State. You can do this by clicking on the "Create a variable to store state" in the left sidebar (accessible via Cmd+B). After that, you can set the default value by clicking on the variable in the left sidebar, and then setting its default value on the right.


In this case, state1 is true when the table should be hidden, and false when the table should be shown.
After that, you can add a button to toggle the state by adding an action handler on click. You'll want to choose "Set temporary state" as the Action, then flip the boolean value of state1.
Finally, under the Layout options for the table, put {{ state1.value }} under "Hide when true".
Let me know if you have any questions!

Thanks,
Grace





Looks like {{ !my_query.data }} is false even when the query result is empty?

@myu

Hey there :wave: Would you mind sharing a screenshot of a query you are seeing this behavior with?