Table layout
Tables are flexible user interface components that help you present large amounts of information in a clear and consistent way. Because you can quickly customize and expand tables, they provide a reliable basis for users to view or compare information.
For example, tables in a price comparison application can help users quickly identify the best offer.
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
- 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.
Previous topic Configuring swipe actions for a mobile app Next topic Optimizing table code