Official Content

Over time, web languages have evolved and new standards and practices have emerged that enable HTML modeling in a much more sophisticated and efficient way. 

In the case of HTML Tables, there have been transformations that allow modeling scenarios ranging from adjusting the layout based on screen size (Responsive Tables) to new ways of writing layouts to organize and display information, such as Flex Tables and later Smart Tables.

Smart Table control

Technically, the Smart Table control in HTML is a two-dimensional grid-based layout (rows and columns) that allows you to model elements within a structure in a simpler way.
The difference with the Flex Table is that, in the case of Flex, it is designed to model elements in a dimension (rows or columns), while in the case of the Smart Table it is possible to define both rows and columns. In short, it is a matrix that allows showing static information in an attractive way.

To add a Smart Table to a Form, drag the "Smart Table" control from the toolbox (image_202046154452_1_png) to the desired location:

image_202046154647_1_png

Once the control is placed inside the object, its properties are enabled:

image_20204616010_1_png


Columns Style

Sets the width of each column. An entry will appear for each column that is added to the Smart Table.
Valid units that may be used are %, px, and dip.

image_20204616948_1_png

Rows Style

Sets the height of each row. An entry will appear for each row that is added to the Smart Table.
Valid units that may be used are %, px, and dip.

image_202046161215_1_png

Columns Gap

Space between columns:

image_202046163324_1_png

Rows Gap

Space between rows:

image_20204616343_1_png

Width

Total width of the Smart Table (by default it is the sum of all the defined columns).

Height

Total height of the Smart Table (by default it is the sum of all the defined rows).

Restrictions

Because this is an implementation of CSS Grid Layout, Internet Explorer support is limited.

Availability

The Smart Table control is available from GeneXus 16 upgrade 9.

Sample Knowledge Base

See TravelAgency Knowledge Base

See also

Table control
Flex control
Responsive Table control



Last update: February 2024 | © GeneXus. All rights reserved. GeneXus Powered by Globant