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.
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.
- For more information about how to optimize table code, see Optimizing table code.
- When you optimize table code, some table configuration options are disabled. For example, if you use optimized tables, you cannot set a report definition as a data source, or use a custom category template. Because the availability of options also depends on other factors, such as the table context and other options that you select, see the Layout properties window to verify which options are available. For more information, see Creating a table layout with code optimization.
- Tables in theme Cosmos applications and Hierarchical table layouts are optimized by default.
The classic non-optimized tables include the following features that are not present in optimized tables:
- Report definition as a source of data
- Table header and footer
- Custom controls
- Master-detail setting
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:
- Optimizing table code
Optimize the code of a table to improve client-side performance and enable customization of a toolbar for that table. By optimizing table code, you reduce memory requirements and processing time, and improve the work flow.
- Operations and actions in a table layout
Learn about the table layout operations and actions that you can configure to customize your layout. For example, you can enable row editing and configure keyboard actions to enable users to navigate and access items in a repeating grid.
- Creating a table layout with code optimization
Help users access and compare data with table layouts. Use tables in your applications as a flexible basis for users to process large amounts of information. For example, tables in a price comparison application can help users efficiently identify the best offer. You can also configure table layouts to support sorting and custom presentation options.
- Creating a table layout without code optimization
Help users access and compare data with table layouts. Use tables in your applications as a flexible basis for users to process large amounts of information. For example, by configuring tables with non-optimized code, you can keep your data always up-to-date with report definitions and make your table layouts adaptable to screen size changes.