Sap.Ui.Table.Table: Visiblerowcountmode="Auto" Not Working with Vbox (Flexbox)

sap.ui.table.Table: visibleRowCountMode= Auto not working with VBox (FlexBox)

The property visibleRowCountMode with "Auto" requires that the table is allowed to grow if it's rendered within a FlexBox (VBox). This can be achieved with <FlexItemData growFactor="1" /> as additional layout data to the table:

<!-- ... -->
  <VBox fitContainer="true"> <!-- or height="100%" -->
    <table:Table visibleRowCountMode="Auto">
      <table:layoutData> <!-- Every control has the aggregation `layoutData` -->
        <FlexItemData growFactor="1"/> <!-- See API ref of `sap.m.FlexItemData` -->
      </table:layoutData>
      <table:columns>
        <!-- ... -->
      </table:columns>
    </table:Table>
    <Button /> <!-- Other flex box items -->
  </VBox>
<!-- ... -->

From the API reference for visibleRowCountMode="Auto":

The table must be rendered without siblings in its parent DOM element. The only exception is if the parent element is a CSS flex container, and the table is a CSS flex item allowed to grow and shrink.

Here is a little demo:

sap.ui.getCore().attachInit(() => sap.ui.require([
  "sap/ui/core/Fragment",
  "sap/ui/model/json/JSONModel", // sample model
], async (Fragment, Model) => {
  "use strict";
  
  const control = await Fragment.load({
    definition: `<VBox xmlns="sap.m" fitContainer="true" renderType="Bare">
      <table:Table xmlns:table="sap.ui.table"
        visibleRowCountMode="Auto"
        class="sapUiSizeCondensed"
        minAutoRowCount="2"
        columnHeaderVisible="false">
        <table:layoutData>
          <FlexItemData id="flexItemData" growFactor="2"/>
        </table:layoutData>
        <table:footer>
          <ToggleButton text="Toggle Grow Factor" press="onMyTogglePress" type="Transparent" />
        </table:footer>
      </table:Table>
    </VBox>`
  });
  
  control.placeAt("content");
}));

function onMyTogglePress(event) {
  const pressed = event.getParameter("pressed");
  const flexItemData = sap.ui.getCore().byId("flexItemData");
  flexItemData.setGrowFactor(pressed ? 0 : 1);
}

html, body {
  height: 100%;
}

<script id="sap-ui-bootstrap"
  src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
  data-sap-ui-libs="sap.ui.core,sap.m,sap.ui.table,sap.ui.unified"
  data-sap-ui-theme="sap_fiori_3"
  data-sap-ui-async="true"
  data-sap-ui-compatversion="edge"
  data-sap-ui-excludejquerycompat="true"
  data-sap-ui-resourceroots='{ "demo": "./" }'
  data-sap-ui-xx-waitfortheme="init"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>

sap.ui.table.Table with visibleRowCountMode= Auto doesn't adjust its height dynamically in VBox

Update: adding FlexItemData growFactor worked for my smarttable.

use property

visibleRowCountMode="Auto"

Update

            <layoutData>
                <FlexItemData growFactor="1" baseSize="0%"/>
            </layoutData>

table:

<Table id="DynamicTableId" selectionMode="MultiToggle" visibleRowCountMode="Auto" minAutoRowCount="10" noData="{i18n>noDataText}"
            fixedColumnCount="1" showColumnVisibilityMenu="true" modelContextChange="onModelContextChange" width="auto">
                <layoutData>
                    <FlexItemData growFactor="1" baseSize="0%"/>
                </layoutData>
</Table>

regards

SAPUI5 add element on top of a VBox

You should use:

this.byId("vbox").insertItem(oControl);

instead of:

this.byId("vbox").addItem(oControl);

Select rows in sap.ui.table.Table Control

Here is an example of how to achieve this: embed.plnkr.co/NQpkJo/

In order to change the number of shown rows, you need to add the property visibileRowCount to your table which you could manipulate via data binding from single-click controls like sap.m.StepCount or sap.m.Slider.
The selection mode "MultiToggle" provides an additional column to select rows, which even enables us to select all of them if needed.

The value "Multi" is deprecated since UI5 version 1.38.

How to Stretch sap.m.ScrollContainer Over The Remaining Page Space in SAPUI5?

work around: wrap the site's content with a sap.ui.layout.FixFlex: set a pixel value to the sap.ui.layout.FixFlex property minFlexSize. the sap.m.ScrollContainer with the sap.m.Table goes into the sap.ui.layout.FixFlex aggregation flexContent. now the parent of the sap.m.ScrollContainer has a fixed height. therefore the sap.m.ScrollContainer can resize itself based on this.

Sap.Ui.Table.Table: Visiblerowcountmode="Auto" Not Working with Vbox (Flexbox)