Table Types

<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-1">V2</h4> <p><strong>SAP Internal Only: V4</strong> offers limited, read-only support for the tree table with the ABAP RESTful Application Programming Model (RAP).</p> </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%2Fv1-114%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-114%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-114%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-114%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-114%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-114%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-114%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>

<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-2">V2 & V4</h4> </div> <div> <h4 id="v2--v4-3">V2 & V4</h4> </div> <div> <h4 id="v2-2">V2</h4> </div> <div> <h4 id="v2-3">V2</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%2Fv1-114%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-114%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-114%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-114%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-114%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-114%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-114%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>