Table Column Toggle

Stable Version 1.0.1 (OutSystems 11)
Published on 01 July 2019 by 
Stable Version 1.0.1 (OutSystems 11)
Published on 01 July 2019 by 
Created on 30 December 2018

Table Column Toggle

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.

What’s new (1.0.1)

Fixed IE11 bug related to columns all showing as hidden on page refresh.

Reviews (0)
User interface, List & tables
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 1 dependencies
Component Consumers
No consumers yet.
Weekly Downloads