Table Types

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

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.

changes

In the future, with SAP Fiori elements for OData V4, analytical tables will display the number for the grouped total of items in the same group with different units of measure, for example, a grouped total for sales revenue calculated across different currencies.

These totals cannot yet be calculated so, for now, an asterisk (*) is displayed instead of a number.

<div> <div> <h2 id="feature-availability">Feature Availability</h2> </div> </div> <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-only">V2 Only</h4> </div> <div> <h4 id="v2-only-1">V2 Only</h4> </div> </div> <div> <div> <h4 id="support-of-table-type-according-to-sap-fiori-elements-template">Support of Table Type according to SAP Fiori Elements Template</h4> </div> </div> <div> <div>List Report / Worklist</div> <div></div> <div> <p>SAP Fiori elements for OData V4</p> <p><span class="icon icon-alert"></span>SAP Fiori elements for OData V2: read only</p> </div> <div></div> <div></div> </div> <div> <div>Object Page / Form Page</div> <div></div> <div> <p>SAP Fiori elements for OData V2</p> <p><span class="icon icon-alert"></span>SAP Fiori elements for OData V4: read only</p> </div> <div></div> <div></div> </div> <div> <div>Analytical List Page: Available only for SAP Fiori elements for OData V2</div> <div><span class="icon icon-alert"></span>Read only</div> <div><span class="icon icon-alert"></span>Read only</div> <div><span class="icon icon-alert"></span>Read only</div> <div><span class="icon icon-alert"></span>Read only</div> </div> <div> <div>Overview Page</div> <div><span class="icon icon-alert"></span>Read only</div> <div></div> <div></div> <div></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>Responsiveness</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%2Fv1-90%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%2Fv1-90%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%2Fv1-90%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%2Fv1-90%2Fui-elements%2Ftree-table%2F%23types">Tree Table: Types.</a></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-90%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Ftables-and-lists%2Ftable-types-sap-fiori-elements%23inline-controls-for-nonresponsive-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-90%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Ftables-and-lists%2Ftable-types-sap-fiori-elements%23inline-controls-for-nonresponsive-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-90%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Ftables-and-lists%2Ftable-types-sap-fiori-elements%23inline-controls-for-nonresponsive-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>

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