Responsive Table

Official Content

The control used in GeneXus to design a Responsive Web Application is called Responsive Table, and it is the main control of the Abstract layout.

Frameworks like BootStrap provide a container that they call Grid. It is similar to a table, but it adapts to the width of the screen to allow for a RWD. Therefore, this container makes it possible to display the information in a way that is readable to the user regardless of the device or screen size.

The GeneXus Responsive Table is generated as a Bootstrap fluid grid.

Unlike the traditional Table control, responsive tables allow working with percentage-based designs that guarantee that the elements inside them will always adapt to the device screen. 

Responsive Table control

1. It looks like a table, but the width of the cells is specified using percentages.

Responsive Table control

The percentages are specified for four different screen sizes (according to the width of the screen).

  • Extra small devices (xs)       (Phone < 768px)
  • Small devices (sm)              (Tablets >= 768px) 
  • Medium devices (md)            (Desktops >= 992px)
  • Large devices (lg)               (Desktops >= 1200px)

The Responsive Sizes property (X Evolution 3) allows making this configuration for the different screens.

2. The cells cannot be spanned to more than one row - row span is always 1, so this property is not available for the control.

3. For each size (xs, sm, md, lg) a value can be specified for the offset of each column. Besides, the columns can be interchanged depending on the screen size (Move).

4. The aesthetic properties of the controls inside the cells of the Responsive Table have to be managed using Theme Classes.

Features of a Responsive Table

1. Generated as div elements

It is generated as div HTML elements, so the columns are not fixed. They may vary according to the screen size, and this can be set using the Responsive Sizes property (X Evolution 3)

2. Differences in behavior between Responsive Table and Table control

There are differences in the behavior of the responsive table and the Table control. If the width of a cell of a responsive table (which is determined in percentages) is not wide enough to contain the control inside, the information of the control can be overlapped. On the contrary, when the common Table control has no fixed width, it expands to occupy all the necessary horizontal space for its content to be displayed without wrapping or overlapping.

3. Different parts of the screen can be hidden or shown depending on the screen size

This can be achieved by using the Conditional Class Properties for Themes.

The form can be arranged in a different way depending on the screen size of the device also.

Layout issues of the responsive table

The cells of a row in the responsive table can be set to any width, regardless that the sum of all the widths is greater than 100%. In such case, the cells remaining - which exceed the width - will wrap to a new line.

Example:

i2016_07_01_13_52_311_png

Then, the cells of the same row can be interchanged, hidden, or dropped down to another row for any of the screen sizes.

Nevertheless, cells that are displayed in a different row, cannot move up to the row which is above of it.

For example, if you need to design the following form, where two controls are one beside to the other in the large screen, you need to design the following layout. This, although, in the other screens (extra small, small, medium), the controls are one at the top of the other.

i2016_07_01_13_58_581_png

Use default values for all screen sizes button

This button allows setting the defaults for all the controls and for all the screen sizes (extra small, small, medium, and large), not only for selected screen size in the "Size" combo box. See Responsive Sizes property to understand the defaults criteria.

Default checkbox 

When checked, the selected control is set to its default values. See Responsive Sizes property to understand the defaults criteria.

See Also

Arranging the layout in a RWA
How to use the Abstract Editor: Hiding a cell in the Responsive Table
How to design a responsive web application: Hiding an element of the form
How to design a Responsive Web Application: Hiding a column in a grid

 

 



Was this page helpful?
What Is This?
Your feedback about this content is important. Let us know what you think.