Skip to main content

         This documentation site is for previous versions. Visit our new documentation site for current releases.      

Table layout

Updated on December 13, 2022
Applicable to Theme Cosmos applications

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.

Note: 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
Optimized table with toolbar. The toolbar shows table actions such as Group by, Fields, Density, and Refresh.

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

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:

  • 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 Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best. is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us