Hide Table + Reorder Table Components on Page when table Hidden?

Goal:
I currently have a search bar, at the top of a page, that renders a table with information. On start, the user has not yet input any information in search and therefore the tables are empty - however, this is a poor user interface/experience.

I would prefer to have the search bar at the center of the page during on the initial loading of the webpage, but then move to an alternative location after the user inputs data and the tables properly render the search-results.

My Approach, so far

  1. I've created a table ("partyTable") which is hidden when the initial query ("getParties") has null data. However, this setup results in an odd format where the search-bar is not centered in the page.


QUESTION(S)

  1. Is it possible to modify the layout of a page when tables are hidden?
  2. I can see that is a "Maintain Space when hidden" under the Appearance >> Advanced table settings. I assume that this would allow for the page to be more dynamic?
  3. Is there any alternative to address my goal? I've also considered creating a separate landing page with a centered search bar and then passing parameters between each app, but would prefer if this remained as a single page (Store temporary data with variables and localStorage | Retool Docs)

Hi there @springstreet,

I think there may be a couple of workarounds for what you're trying to achieve.

1. Is it possible to modify the layout of a page when tables are hidden? As far as I know, it is not a feature as such.
2. I can see that is a "Maintain Space when hidden" under the Appearance >> Advanced table settings. I assume that this would allow for the page to be more dynamic? Not a lot. Currently when components are one over each other, the moment one is hidden the other one will occupy the space of the hidden component. You can avoid this from happening by using this option. I find it helpful for forms when you have conditional fields.
3. Is there any alternative to address my goal? Off the top of my head, I'm thinking you could have two containers, the first one with your search bar in the middle, and another one with a second search bar on top and your tables. Once you click search you can hide the first container and show the second one. You'll have to modify your query so that it can understand which search bar to use depending on which container is show/hidden (or a variable of sorts)

2 Likes