Give us feedback
Web icon

Table Column Toggle

Stable version 1.0.1 (Compatible with OutSystems 11)
Uploaded on 01 July 2019 by 
 (1 rating)

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.

Release notes (1.0.1)

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

Reviews (0)