LinkedIn
Copied!

Table of Contents

Table layout

Version:

Only available versions of this content are shown in the dropdown

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.

The UI Gallery landing page contains a working example of a table layout, which you can use as a reference or copy directly to your application. For more information, see Accessing the UI Gallery.

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.
  • 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.
A read-only optimized table with a 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
A read-only non-optimized table with a fixed header.
  • 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.

Have a question? Get answers now.

Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.