1270
Views
8
Comments
Solved
How can I dynamically remove columns from a table?
Question
Application Type
Reactive

Hi there.

I have a screen with a table, and the user should be able to specify which columns of this table they want to see. Which means I should be able to hide columns whenever the user unselects them (from a list that shows the available columns). How could I approach this?

Thanks in advance for your help :)

2020-05-07 18-53-00
Rui Barradas
 
MVP
Solution

Hello Yizuhi,

Hope you're doing well.


Let's say as an example that you have a boolean variable called HideColumnOne after the user selects Column One from the list of the available columns (meaning that he wants to hide that Column One).

This variable is set to True if the user selects that column from the available columns list, otherwise it is set to False.


Then you just need something like:

If (HideColumnOne, "display: none;", "")


You may place this condition as a style attribute for the Row and for the Header of that Column One.

For the Row of Column One, it should be:


This will make the Row of your column hide or not according to the value of HideColumnOne variable.

Don't forget to do the same for the Header :)


Hope that this helps you!


Kind regards,

Rui Barradas

UserImage.jpg
Yizuhi Galaviz

Thank you so much, that worked well :)

UserImage.jpg
Ahmad Alqannas

Thanks a lot this worked on Reactive Web but I faced another issue when we want to hide it from mobile or small screen it's shows back, did you have an Idea? thank you 

2020-05-07 18-53-00
Rui Barradas
 
MVP

Hello Ahmad,

Since this is an old thread, I suggest that you create a new one with your issue. I'll take a look into it afterwards :)

Kind regards,

Rui Barradas

UserImage.jpg
Antonio Cordeiro

How is it possible to do this without using the "display: none;"?


Using the style property it just hides it but you can reach the value through inspection. How can we delete the column and add it back again depending on a boolean variable value?


Kind regards,

Antonio Cordeiro

2013-04-29 09-48-15
Bob Matthyssens

You can wrap your data in an IF with the same condition...  and show data only in the False-branch. 

Your sneaky user is still able to add the column back in inspection-mode... but it will be empty (it will show the True-branches of the IF's).


UserImage.jpg
Antonio Cordeiro

Hey Bob,

Thanks for the answer. The column does not get hidden doing that, just becomes empty. Maybe is a traditional and not a reactive project.

2024-12-15 23-37-56
Thiago Mágero


Hello Antonio,

What Bob meant is a complement to display none, because if the user inspects the code and redisplays the column, for security your ifs will make the content never exist in that context.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.