How Can I Dynamically Remove Columns From A Table? - OutSystems

Trang chủ » Html Table Hide Column Dynamically » How Can I Dynamically Remove Columns From A Table? - OutSystems

Có thể bạn quan tâm

Community/Forums/QuestionsUserImage.jpgYizuhi GalavizRank: #7251How can I dynamically remove columns from a table?1172Views8CommentsSolvedQuestionReactiveApplication TypeReactive

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 :)

0002 Apr 2021Copy post link2020-05-07 18-53-00Rui Barradas MVPRank: #58Solution

Hello Yizuhi,

Hope you're doing well.

Let's say as an example that you have a boolean variable called HideColumnOneafter 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

6002 Apr 2021Copy comment linkUserImage.jpgUserImage.jpg2020-05-07 18-53-003 repliesLast reply 11 Jul 2023Show threadHide threadUserImage.jpgYizuhi GalavizRank: #7251

Thank you so much, that worked well :)

0002 Apr 2021Copy comment linkUserImage.jpgAhmad AlqannasRank: #6062

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

0011 Jul 2023Copy comment link2020-05-07 18-53-00Rui Barradas MVPRank: #58Replying to Ahmad Alqannas' comment on 11 Jul 2023 06:57:21

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

0011 Jul 2023Copy comment link2023-09-19 08-40-06Antonio CordeiroRank: #3687

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

1023 Nov 2023Copy comment link2013-04-29 09-48-152023-09-19 08-40-062022-01-06 10-19-393 repliesLast reply 08 MarShow threadHide thread2013-04-29 09-48-15Bob MatthyssensRank: #849

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).

0027 Nov 2023Copy comment link2023-09-19 08-40-06Antonio CordeiroRank: #3687Replying to Bob Matthyssens' comment on 27 Nov 2023 07:54:01

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.

0027 Nov 2023Copy comment link2022-01-06 10-19-39Thiago MágeroRank: #2793Replying to Antonio Cordeiro's comment on 27 Nov 2023 11:27:51

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.

0008 MarCopy comment linkLog in to AnswerLog in to AnswerLog in to Follow Loading...

Từ khóa » Html Table Hide Column Dynamically