- Resizable Column / Table

Resizable Column/Table

Introduction

The Resizable Table / Column feature in WOW lets the end user drag the columns (from the right side) and the Table (right side and bottom) to a minimized or maximized view to display the data as desired. This gives the end user control over what they see and how much they see in the collection of data being viewed.

Below is a couple of views on how it may look. In this example, the rows have been limited to 5 rows per page.

example: bottom edge is maximized, although the columns are still able to be resized wider.

example: you can see there are vertical and horizontal scrollbars visible.

example: Here are the resizable edges of the columns and Table.

How to set up

Edit the Operation you wish to set this up on.

Note: this must be set on each Operation you wish to turn this feature on for.

Scroll down to the Display settings of the Operation Manager and go down to the Properties settings of the Display settings section. Here you will need to add the following to the TableDisplay{} property group.

allowColResize: true;

example: set in the TableDisplay{} property settings of the Properties section.

example: where to place the: allowColResize: true;

Once you place this in the correct spot, update the Operation by clicking the Update button at the top of the Operation Manager.

Now this is now set to ON. If you ever wish to turn this feature OFF, it is best to change the Boolean value to “false.” This way you have it in your list of Properties for future use.

example: here is what the column edges look like when the feature is turned OFF.

You will notice that the lines separating the columns are single lines but when the feature is turned on, they are double lines in the header except the bottom edge.

example: resize turned ON

NOTE: WOW Operations created in version 7 and above should have the property: allowColResize: false;

already included in new operations. For old operations, you should add this test to the TableDisplay property group to enable it:

allowColResize: true;

NOTE: Column resize feature is not compatible with mobile device themes due to limitations of mobile touch JS features.

Tags: resize columns, resize table, resizable fields, drag columns