Part 28 of Advance SAPUI5: SAPUI5 Responsive Table - Contextual Width

One of the most popular aspects of a responsive table is its automatic contextual width. Automatic contextual width refers to the way columns change from covert to popin content and vice versa depending on the amount of screen real estate. Automatic contextual width therefore kicks in and squeezes the columns into a popin saving space on the screen in circumstances when the user is allowed to utilize a slider to compress and expand content space. I’ll use an example to illustrate this in this blog article.

We must work with the responsive table’s characteristics shown below in order to implement the automatic contextual width functionality of a table.

popinLayout
contextual Length
And the responsive column’s characteristics below
screen width in minutes
madPopin

Table Characteristics

popinLayout

We can specify the layout in which the table popin rows are shown by using the popinLayout attribute. It accepts Block, GridLarge, and GridSmall as its three possible options.

contextual Length

We can specify the width of the container in which the table is placed by setting this attribute. The table can now modify the popin behavior as a result. Usually, we have Auto selected.

Column characteristics

screen width in minutes

This attribute is implemented for every column within the table. It instructs the table to display or conceal the column according to the width of the screen. For instance, the column would be hidden if this attribute was set to “Tablet” and the application was subsequently used on a phone. However, the column would show up if you used a tablet to run the application and a desktop or laptop screen that was larger than a tablet. Usually, demandPopin is used in conjunction with this attribute.

demand, Putin

The minScreenWidth parameter’s “column hiding” effect becomes “showing in a popin” if this property is set to true. This indicates that the content of the column is displayed in a table popin format rather than being hidden.

Examine Coding

I’ve added a slider to the screen to show how responsive table columns behave when content becomes squeezed. A responsive table is located on the left side of the slider, and a short text has been added to the right side. Table data is first shown in columns with the slider in the center. At first glance, it appears like below.