Define the look and behavior of a table layout in your user interface to build a responsive, intuitive, and user-friendly application that meets your business needs. For example, you can style your table like a spreadsheet or make the table responsive to the screen width changes.
Search for and open an existing section form that contains the target layout.
In the Table header, click the View properties icon to display the Properties panel, and then select the Presentation tab.
In the Style list, select a pattern for the table rows and columns.
Tip: You can see the available styles and their previews in the skin rule. For more information, see Component style formats.
In the Container format list, define the look of the layout.
In the Width of content list, define whether the width of the layout columns is set as a percentage or in pixels:
- To set minimum column widths that expand if the content exceeds the minimum width, select Pixels (fit content).
- To set column widths as fractions of the total width of the layout area, specified in pixels, select Fill (100%).
- To set specific column widths, select Pixels (fixed).
To define additional layout behavior, select any number of the following check boxes, which represent specific personalization settings:
- To specify a fixed height for the layout, select the Fixed (pixel) size grid check box, and then provide the height in pixels.
- To sequentially number the rows in the grid, select the Display row numbers check box.
- To make the table change the appearance of a row when a pointer hovers
over a row, select the Enable row hovering check box.
Note: You can set the hover text and background color in the skin rule. For more information, see Component style formats.
- To display the container headings, select the Display container header and title check box, and then configure the headings in the Header settings section, which opens when you select the option.
- To make your grid adjust to screen width changes, select the
Responsiveness check box.
Tip: When you enable responsiveness, you can specify which columns users can see in the table when the available screen width is reduced. For more information, see Arranging column visibility by importance.
- To override the default presentation when the grid is empty, select the Display custom message when there are no rows to display check box. In the fields that open when you select the option, you can specify a custom section or a field value that you want to present instead.
- To override the default presentation when your filter criteria yield no matching results, select the Display custom message when there are no results upon filtering check box. In the fields that open when you select the option, you can specify a custom section or a field value that you want to present instead.
On the section form, click Save.