Table Types

Discover / Frameworks / SAP Fiori Elements / Tables and Lists / Table Types
information

No longer maintained, this article reflects the SAPUI5 version 1.136 release of SAP Fiori Elements for OData V2 and SAP Fiori Elements for OData V4.

To explore the design capabilities of SAP Fiori elements for OData V4 and the various options for the building blocks, and to experiment with their behavior – both standalone and when used in standard floorplans or custom pages, see: the SAP Fiori Development Portal.

information

No longer maintained, this article reflects the SAPUI5 version 1.136 release of SAP Fiori Elements for OData V2 and SAP Fiori Elements for OData V4.

For information on the latest release of both versions of SAP Fiori Elements, see: What's New in SAPUI5 documentation.

To explore the design capabilities of SAP Fiori elements for OData V4 and the various options for the building blocks, and to experiment with their behavior – both standalone and when used in standard floorplans or custom pages, see: the SAP Fiori Development Portal.

Intro

The SAP Fiori elements templates support the features and settings for the different table types detailed below.

For design information, see the guidelines starting with Table Overview, and see the links below.

Feature Availability

[internal_only]

<div> <div> <h3 id="table-type">Table Type</h3> </div> <div> <h3 id="responsive-table-default">Responsive Table (Default)</h3> </div> <div> <h3 id="analytical">Analytical</h3> </div> <div> <h3 id="grid">Grid</h3> </div> <div> <h3 id="tree">Tree</h3> </div> </div> <div> <div> <h4 id="sap-fiori-elements-for-odata-version">SAP Fiori Elements for OData Version</h4> </div> <div> <h4 id="v2--v4">V2 & V4</h4> </div> <div> <h4 id="v2--v4-1">V2 & V4</h4> </div> <div> <h4 id="v2">V2</h4> </div> <div> <h4 id="v2--v4-2">V2 & V4</h4> </div> </div> <div> <div><strong>Devices</strong></div> </div> <div> <div>Desktop</div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div>Tablet</div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div>Phone</div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div><strong>Responsive</strong><br>(hide column, popin support)</div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div> <p><strong>Density Mode</strong></p> <p>See <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Ffoundations%2Fvisual%2Fcozy-compact">Content Density</a>.</p> </div> <div></div> <div>See <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fanalytical-table-alv%2F%23compact-cozy-and-condensed">Analytical Table: Compact, Cozy, Condensed</a>.</div> <div>See <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fgrid-table%2F%23compact-cozy-and-condensed">Grid Table: Compact, Cozy, Condensed</a>.</div> <div>See <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Ftree-table%2F%23types">Tree Table: Types.</a></div> </div> <div> <div>Compact density</div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div>Condensed density</div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div>Cozy density</div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div>Summarized cell</div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div>Hierarchical data</div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div>Large number of rows (> 200)</div> <div><span class="icon icon-status-critical-colored"></span></div> <div></div> <div></div> <div></div> </div> <div> <div>Grouping</div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div>Freeze columns</div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div>Horizontal scrolling</div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div>Merge duplicates</div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div>Supported Inline Controls</div> <div><strong>All</strong></div> <div><strong>Limited</strong><br>See <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-130%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Ftables-and-lists%2Ftable-types-sap-fiori-elements%23inline-controls-for-non-responsive-tables">Inline Controls for Non-Responsive Tables</a> below.</div> <div><strong>Limited</strong><br>See <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-130%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Ftables-and-lists%2Ftable-types-sap-fiori-elements%23inline-controls-for-non-responsive-tables">Inline Controls for Non-Responsive Tables</a> below.</div> <div><strong>Limited</strong><br>See <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-130%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Ftables-and-lists%2Ftable-types-sap-fiori-elements%23inline-controls-for-non-responsive-tables">Inline Controls for Non-Responsive Tables</a> below.</div> </div> <div> <div>Row-based</div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div>Column-based</div> <div></div> <div></div> <div></div> <div></div> </div>

[/internal_only][external_only]

<div> <div> <h3 id="table-type-1">Table Type</h3> </div> <div> <h3 id="responsive-table-default-1">Responsive Table (Default)</h3> </div> <div> <h3 id="analytical-1">Analytical</h3> </div> <div> <h3 id="grid-1">Grid</h3> </div> <div> <h3 id="tree-1">Tree</h3> </div> </div> <div> <div> <h4 id="sap-fiori-elements-for-odata-version-1">SAP Fiori Elements for OData Version</h4> </div> <div> <h4 id="v2--v4-3">V2 & V4</h4> </div> <div> <h4 id="v2--v4-4">V2 & V4</h4> </div> <div> <h4 id="v2-1">V2</h4> </div> <div> <h4 id="v2--v4-5">V2 & V4</h4> </div> </div> <div> <div><strong>Devices</strong></div> </div> <div> <div>Desktop</div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div>Tablet</div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div>Phone</div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div><strong>Responsive</strong><br>(hide column, popin support)</div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div> <p><strong>Density Mode</strong></p> <p>See <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Ffoundations%2Fvisual%2Fcozy-compact">Content Density</a>.</p> </div> <div></div> <div>See <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fanalytical-table-alv%2F%23compact-cozy-and-condensed">Analytical Table: Compact, Cozy, Condensed</a>.</div> <div>See <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Fgrid-table%2F%23compact-cozy-and-condensed">Grid Table: Compact, Cozy, Condensed</a>.</div> <div>See <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fui-elements%2Ftree-table%2F%23types">Tree Table: Types.</a></div> </div> <div> <div>Compact density</div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div>Condensed density</div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div>Cozy density</div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div>Summarized cell</div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div>Hierarchical data</div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div>Large number of rows (> 200)</div> <div><span class="icon icon-alert"></span></div> <div></div> <div></div> <div></div> </div> <div> <div>Grouping</div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div>Freeze columns</div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div>Horizontal scrolling</div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div>Merge duplicates</div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div>Supported Inline Controls</div> <div><strong>All</strong></div> <div><strong>Limited</strong><br>See <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-130%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Ftables-and-lists%2Ftable-types-sap-fiori-elements%23inline-controls-for-non-responsive-tables">Inline Controls for Non-Responsive Tables</a> below.</div> <div><strong>Limited</strong><br>See <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-130%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Ftables-and-lists%2Ftable-types-sap-fiori-elements%23inline-controls-for-non-responsive-tables">Inline Controls for Non-Responsive Tables</a> below.</div> <div><strong>Limited</strong><br>See <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-130%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Ftables-and-lists%2Ftable-types-sap-fiori-elements%23inline-controls-for-non-responsive-tables">Inline Controls for Non-Responsive Tables</a> below.</div> </div> <div> <div>Row-based</div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div>Column-based</div> <div></div> <div></div> <div></div> <div></div> </div>

[/external_only]

Inline Controls for Non-Responsive Tables

These inline controls are supported for grid, analytical, and tree tables:

  • Text
  • Label
  • ObjectStatus
  • Icon
  • Button
  • Input
  • DatePicker
  • Select
  • ComboBox
  • MultiComboBox
  • CheckBox
  • Link
  • Currency
  • RatingIndicator
  • ProgressIndicator

Also, the following when they are of a responsive or very small size:

  • StackedBarMicroChart
  • ComparisonMicroChart
  • BulletMicroChart

Elements and Controls

Implementation