UI5ers Buzz #58: Column resizing & Auto pop-in feature in Responsive table

You read it right!

It is possible to resize columns in the responsive table. This is all possible via the sap.m.plugins.ColumnResizer plugin, which must be attached to the responsive table as a dependent.

<mvc:View xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc"
	controllerName="my.own.controller"
	xmlns:core="sap.ui.core"
	xmlns:plugins="sap.m.plugins">
	<Table id="idResponsiveTable"
		items="{ path: '/' }">			
		<dependents>
			<plugins:ColumnResizer />
		</dependents>
		…
	</Table>
</mvc:View>

Column resizing in desktop device

By attaching the column resizer plugin, the column headers of the responsive table will get a border, which provides a visual indicator where a column can be resized. On mouse hover, there is a resize handle presented that takes the height of the table. So, it’s possible to hover over the column also from the cell under the column header border.

You can now click the resize handle (keep the mouse button clicked), and drag either left or right, to increase or decrease the column width. On mouse release, the column resizer plugin fires a columnResize event which provides the column that is resized and its new width as parameters. The event listener can prevent the default action if required. By default, the new widths are applied to the column.

Column resizing for the responsive table is slightly different as compared to the column resizing in the grid table (sap.ui.table.Table) control. In the grid table, the column being resized is the only column which gets the new width, but in the responsive table, column resizing is shared between 2 columns. For example, in the screenshot above, when the column “Supplier” is resized to increase its width, this will decrease the width of the neighboring column “Dimensions” (if the placeholder column is not available). The reason for this difference in behavior is that the responsive table does not have a native horizontal scrolling feature as compared to the grid table.

When the column resizer plugin is added as a dependent to the responsive table, the plugin makes the following changes to the table:

1. fixedLayout="Strict" – This is done to ensure that when all the columns have a width defined (except width="auto") and the columns do not occupy the width of the table, then the remaining space is occupied by a placeholder column in order to strictly apply the width of the columns. You can look at the screenshot below to visualize how the placeholder column looks like.
2. Focusable column headers – This is done to support accessibility (screen readers and keyboard). Column resizing can also be done via keyboard when a column header is focused by pressing SHIFT + ARROW LEFT (to increase column width) & SHIFT + ARROW RIGHT (to decrease a column width)

Placeholder column in the responsive table

Note: When a column is resized in the responsive table, all the columns having width=”auto” or no width defined will get a static “px” width. This is to ensure that a column resize action should not move a column to the pop-in area. But, on the contrary, a pop-in column can move out and is rendered as a regular column in the table.

Auto column resizing

The column resizer plugin also provides auto column resizing capabilities. You can double click on the resize handle to resize a column according to the content in the column header and its cells.

The auto column resizing only works with visible cells, so if more data is loaded later then the auto resizing should be triggered again if required.

Column resizing in mobile devices

Column resizing in the responsive table is also supported for mobile devices, but the challenge here as compared to desktop devices is that the you do not see the resize handle as there is no hover action. So, for mobile devices the user should learn where the resizing is possible in the table (hint – column header borders).

Column resizing in mobile device

Like column resizing on the desktop, you can touch near the column header border and drag to resize a column. On touch release, the column width will be applied.

Column resizing in Smart Table for Responsive Table type

The information provided earlier was concerning the column resizing for a standalone responsive table. But how can the same be enabled for the smart table control with a responsive table type?

The answer is setting the property enableAutoColumnWidth="true" on the Smart Table control.

<mvc:View xmlns="sap.m"
  xmlns:mvc="sap.ui.core.mvc"
  controllerName="my.own.controller"
  xmlns:core="sap.ui.core"
  xmlns:smartTable="sap.ui.comp.smarttable">
  <smartTable:SmartTable
    entitySet="Products"
    type="ResponsiveTable"
    enableAutoColumnWidth="true" />
    …
</mvc:View>

Smart Table (Responsive table type) with column resizing and heuristic column width calculation enabled

The enableAutoColumnWidth property not only enables column resizing capabilities for the responsive table but also enables heuristic column width calculation for all supported table types based on the metadata information. The algorithm takes the OData type, column label, text arrangement, possible cell templates and many other metadata parameters into account for determining a suitable width for a column.

There can be situations where the calculated widths are not ideal. In such cases, the back-end can also be enhanced by defining HTML5.CSSDefaults width annotation for a property. This CSS width is then applied to the column for the specified back-end property. If the user is not happy with the column width, then the user also has the possibility to resize a column as desired and can be saved as a variant.

Auto pop-in feature (sap.m.Table)

Configuring the responsive behavior in the responsive table can be challenging in some cases. To make this configuration easier, you can rely on the auto pop-in feature of the responsive table. This feature can be enabled by setting autoPopinMode="true" on the table.

<mvc:View xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc"
	controllerName="my.own.controller"
	xmlns:core="sap.ui.core">
        <Table id="idResponsiveTable"
	      autoPopinMode="true"
	      items="{ path: '/' }">			
              …
        </Table>
</mvc:View>

When the auto pop-in mode is enabled on the responsive table, the configuration to define the demandPopin="true" and minScreenWidth is taken over by the table. By default, the order of columns that move to the pop-in area is from last to the second column in the table. The first column is considered as the most important column and will not move to the pop-in area. This is done to ensure that at least 1 column is rendered as a regular column in the table to maintain the table design.

Let’s consider an example to get a better understanding. There are 5 columns in the table with autoPopinMode="true" and their order is as follows:

1. Product
2. Supplier
3. Dimensions
4. Weight
5. Price

When you resize the browser window, the Price column will be moved to the pop-in area first, followed by Weight, Dimensions and Supplier.

The auto pop-in algorithm determines which columns to move in the pop-in area based on column importance. The sap.m.Column control has a property importance which can be used to influence the default behavior of the auto pop-in feature. The default importance for a column is None. The importance is listed below:

1. High: Moved to the pop-in area at the very end.
2. Medium & None: The 2 importance and treated as equals and moved to the pop-in area when there are no more Low importance columns.
3. Low: Moved first to the pop-in area.

Let’s consider the same example as before, the columns Product and Price are the most important columns and must move last to the pop-in area. To achieve this, importance= "High" must be set on the 2 columns. So, as you reduce the size of the browser window, the columns having lower importance will move to the pop-in area before the 2 columns with High importance.

You can also hide a certain column importance in the pop-in area. To achieve this, the hiddenInPopin property must be configured. For example, if you want to hide “Low” and “Medium” importance columns, then you can defined hiddenInPopin="Low,Medium". Additionally, you can also listen to the popinChanged event of the responsive table which is fired for every change to the pop-in area (columns popped-in or popped-out from the pop-in area).

To see the above functionality in action, please see the sample – Auto pop-in feature.

Conclusion

Now you know how to incorporate the addressed feature in your applications and hopefully these features bring additional value to you and the application users.

Looking forward to hear your feedback!

Previous post: UI5ers Buzz #57: Recently Used Values History for Smart Controls

Author

Jay Barbhaiya is a Senior Developer in the UI5 Tables Team with main focus on the Lists, Responsive Table and Smart Table controls. He was drawn to computer programming through his enthusiasm for computer and mobile gaming. He enjoys playing and experimenting with web & mobile development technologies and UI5. For leisure activities, he likes hiking, biking, playing indoor and outdoor sports and listening to music.