Hi ,
I would like to create a reactive webui with the ability to show/hide columns in a table dynamically. I saw an option TablecolumnToggle on Forge but for some reason unable to add it as a dependency to my module (there's a popup that shows the tablecolumntoggle is available for traditional web app). Is there any way to achieve this functionality. Thanks in advance.
Hi @Rahul Maniyil ,There are multiple ways to achieve this.You can manage toggling(show/hide) table columns by using display property of table header cell and row cell of that column based upon a variable in style.
E.g.
DispalyColumns.ShowAddress
variable will be used to show/hide a column named Name
If(DispalyColumns.ShowAddress = False,"Display:None","")
Additionally, you can also try a forge component Data Grid Reactive for this functionality and various other functionalities on tables.
Hope this will help you.
Hello Rahul,
If I understood your use case well then you can refer below post,
https://www.outsystems.com/forums/discussion/69632/how-can-i-dynamically-remove-columns-from-a-table/
Hope it helps you.
Regards,
Ajit Kurane.
Thank you for the response Ajit. Yes, this is the same requirement. I understood that a style attribute can be added, but im unsure how to link the column names to the search filter as suggested. If there's any sample oml file that's already available with this kind of functionality,that would be really helpful. Thank you.
Hi Mannu,
I have created a reactive version for the same component. You can give it a try using the same: TableColumnToggler
Demo App: ColumnTogglerDemo
I hope this helps you!
Kind regards,
Benjith Sam
Thank you for your response. I am trying to refer your oml but for some reason it doesnt download all the components. The part where you map the columns and then link it is not showing up.
Hi Rahul,
I'm unable to understand 'The part where you map the columns and then link it is not showing up.'??
I can try to help you; if you can share the oml file?
Refer to the attached demo application .oml file
Hi @Rahul Maniyil ,
I had prepared demo for you .check link. hideshowcolumn (personal-dt37vy6p.outsystemscloud.com)
Please check attached Oml I had prepared demo using JavaScript.
Let me know If it is fit for your expectation.
Thanks
Yogesh
Thanks for sharing