Hi everyone,
In our app, we show a table with several columns. We integrated a toggle button which allows to show more details, in our case more columns of the table. Two select statements are defined in the toggle button element definition (one for selecting 11, one for selecting 14 columns).
We would like to have the table filling the whole width of the page in both cases, so without toggle button activated (11 columns of the table are shown) and with toggle button activated (14 columns are shown).
At the moment, we are only able to fill the full page width when the toggle button is activated and all the 14 columns are shown (solved with % in the table element definition).
Is there a way to solve this dynamically and get the full page width for both toggle scenarios?
Thanks for your help 
CC: @ThomasZ @DanyEle
Hey @hanna.roider
I think the problem is, that in the column definition of your table you have all 14 columns and their width in percent defined. And if you only provide 11 columns via the query, the table element will still leave space for the columns that you defined in the column section but which are not available after your query anymore.
Would it be a possibility for you to actually show 2 different table elements based on the value of the toggle? You could have 1 table element with 14 columns and 1 table element with 11 columns and via the toggle button you set a variable that controls the “hide” property of the containers of these elements. For one toggle configuration you hide the one and not the other and vice versa.
Another option might be as @JohannesS suggested in the AppBuilder Channel to control the width of your columns via a variable that you steer with your toggle button. You would need a variable of type “object” for that, to use 1 variable to control multiple app parts.
If this is an option for you, I would also be happy to explain in more detail
Thanks for your answer! @magdalena.murr
I’d be happy to read your explanation of option 2 (control the width of the columns via a variable in the toggle button), if you have time
@hanna.roider unfortunately it will not work - sorry for the false promise! I just tried it out and the problem is, that you cannot make a column disappear by setting its width to 0px or 0% (also not intended by Apps, so this will not change).
I would recommend that you go with the 2 table-elements approach that I described in the beginning - even if it’s some code duplication, this should definitely work Or is there something that’s prohibiting this?
@magdalena.murr I understand, thanks a lot for trying this out!
Basically, the 2 table-elements approach is a good solution, now there is only a problem with integrating that into the layout template. Is there a possibility to make a case distinction depending on the toggle button in the template? That means, showing table 1 over the whole width when toggle=left and table 2 when toggle=right, respectively. I’ve already tried to solve this via the minmax option for rows and columns, but this didn’t work very well or caused further problems 
The solution that we came up with in the end was:
Let the toggle button set a variable for the query (as before) and for the element_id of the table. There are now 2 table elements with different IDs and depending on the toggle-state, the variable contains one or the other. This element-id-variable is then used in the placements of the layout. That means there is only 1 container for the table but in the placement, the element-id is set via the element-id-variable and by that we can switch the table that is shown with the toggle-button.
CC @hanna.roider
Here you can find some code snippets illustrating the solution:
For the toggle button element:
For the placement:
And for the variable definition:
