Table layout structure

A table layout consists of the following areas:

Layout area

The framework that contains the action and repeating areas. You can define the header format, header type, and the overall width of the layout area.

Action area

In optimized tables, the action area is a toolbar at the top of the table. In non-optimized tables, the action area is a header and footer, in which you can place actionable elements, such as Add Item or Delete.

Repeating area

The system displays information that is dynamically created from the data source. The first row in the repeating area holds the column headers that represent the data source fields. Subsequent rows display the requested data. You can also place action buttons in a repeating row to provide quick access to actions that do not require further user input, such as Flag for Review.

Table layout types

Tables can be optimized and non-optimized. The table optimization setting is the most basic setting that determines the performance and behavior of your table.

Optimized tables

The advantages of optimized tables include:

• Support for offline application usage, by using a client-side template-based rendering technology that generates the table markup directly inside the browser.
• Reduced amount of markup, which improves browser processing.
• Support for capabilities such as the Enable search setting, pagination options, and table personalization. With these capabilities, end users can personalize their table by adding and removing columns, sorting and filtering the data in the table, and saving the view for future use. For more information, see Enabling table personalization.
• Table toolbar customization. For more information, see Configuring table operations and toolbar.

Non-optimized tables

The classic non-optimized tables include the following features that are not present in optimized tables:

• Report definition as a source of data
• Responsiveness
• Table header and footer
• Custom controls
• Master-detail setting

Accessibility guidelines

Consider the following best practices for tables in your UI:

• Use optimized tables whenever possible.
• Set the table width as a percentage and check the responsiveness of the table.
• If you want to add the option to delete items, place the appropriate control, for example, a button, in the same row as the item and add a descriptive caption.
• Ensure that pagination is displayed in the footer of the table.
• For clickable rows, use the Enter or Spacebar keys as triggers instead of right-clicking. Alternatively, use a column with a link or button and a clear caption.
• Include a summary of what the tabular data displays in the UI.
• Ensure that tables are used exclusively for tabular data; do not use tables as an alternative to repeating dynamic layouts.

Learn more about tables in the following articles: