Table Column Toggle

Stable Version 1.0.0 (OutSystems 11)
Published on 30 December 2018 by 
Created on 30 December 2018
Allows user to hide/show columns on tables at run time. Configured columns can be saved in database or session to persist the toggled columns across/during sessions.
Read More

Steps to use:

1. Reference 'TableColumnToggle' web block ('TableColumnToggle' module) in the consuming module that you want to implement toggle functionality.

2. Drag web block onto screen *AFTER* the table that you want to initialize toggle functionality on.

3. Set a 'Name' value for your table in its properties. Pass this Name.Id into the 'TableColumnToggle' web block's 'TableId' input parameter.

4. Add a container to your screen where you would like the toggle columns button to be rendered, giving the container a name, and passing the Name.Id into the 'TableColumnToggle' web block's 'ButtonDivId' input parameter.

5. For each column you would like to be available to be toggled, select its cell in the tables header row, and give the column an extended property of 'cid' (this value can be changed via the 'TableColumnToggle' web block's 'ColumnAttribute' input parameter, 'cid' is the default value), set the 'cid' value to the value you want to show in the toggle modal (typically the same name as the column header text). See Screenshot:

6. Create a screen action to handle the 'TableColumnToggle' web block's callback event 'TableColumnVisibilityChange', this event will send back JSON via the event input parameter 'TableColumnValues' that can then be saved in a session variable or the database to persist the columns being shown.

6a. In order to persist the values, the JSON that was passed back via the 'TableColumnVisibilityChange' event should then be passed into the 'TableColumnToggle' web block's 'DefaultColumnValues' input parameter.

7. Setup any addition non-mandatory input parameters of the 'TableColumnToggle' web block, configuring to your requirements.

Important Note: Make sure that when you are refreshing the table (i.e. pagination, column sorting, searches, etc) that you either have the 'TableColumnToggle' web block in the container that is being refreshed or you refresh the 'TableColumnToggle' web block directly after the table is being refreshed so the columns are still properly shown/hidden.

If you have any questions, run into any issues, or have ideas to make this component better, feel free to contact me via this components support thread.

Reviews (0)
UI & Widgets, Components
Support Options
This component is not supported by OutSystems. You may use the discussion forums to leave suggestions or obtain best-effort support from the community, including from Justin Babel who created this component.
See all 2 dependencies
Component Consumers
No consumers yet.
Weekly Downloads 
Related Components
Silk UI Web
OutSystems R&D
A fully responsive and beautiful UI framework that works within the OutSystems Platform. Build amazing looking applications, in a fraction of the time, which work perfectly across devices. Learn how to start using Silk UI and see the examples at . Obtain assistance on using Silk UI in our forums .
Multiple File Upload
Multi Uploaders
Allow you to upload multiple files in one upload form or using drag and drop functionality.
OutSystems UI Mobile
OutSystems R&D
Create amazing native mobile applications using this fully integrated UI framework for OutSystems, with dozens of UI patterns ready to use.
More from Justin Babel
Justin Babel
JQuery library used to reorder/drag table columns during runtime. Support for touch and click events. Based on: and
Super Placeholder
Justin Babel
superplaceholder.js is a library to bring your input placeholders to life by cycling multiple instructions in a single input placeholder.
Custom Touch Events
Justin Babel
Custom touch events uses Hammer.JS to handle tap, pan, pinch, press, rotate, and swipe events customized by you based on inputs to the event handlers. For example, detecting x amount of taps on an object, detecting a long press of over x amount of seconds, swiping an object right at a certain amount of velocity, etc Wraps: