csssapui5

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


I would like the number rows of my sap.ui.table.Table to fit the screen height. I tried using visibleRowCountMode="Auto" for that but in the beginning, it did not work because certain parent elements did not have a height="100%".

My table is nested quite deeply into several Pages and FlexBoxes but this is kind of how my views look.

<VBox height="100%" class="sapUiTinyMarginBegin">
  <layout:Splitter id="CSL_idSplitter" height="100%" resize=".onSplitterResize">
    <VBox height="100%">
      <HBox justifyContent="SpaceBetween" height="100%">
        <VBox height="100%">
          <table:Table id="idTable" visibleRowCountMode="Auto" />
          <Button />
        </VBox>
      </HBox>
    </VBox>
  </layout:Splitter>
</VBox>

I also added this to my CSS file:

html, body {
  height: 100%;
}

According to other questions, this seemed to be the solution but it did not work for me. I found out that, in the DOM, the direct parent <div> of the table-control (which is automatically created by UI5 and does not seem to belong to any element declared in the view) was the problem because it did not have a style height: 100%.

Here is the DOM from the Chrome Dev-Tools (Yellow is my table and in red is the div without any height):

enter image description here

If I add the height to the element manually, the visibleRowCountMode="Auto" works fine.

So I found a quite ugly workaround and I was hoping that anyone would know a nicer way to overcome this issue. When the View is loaded, I select the parent <div> element of the table and set its height programmatically in onAfterRendering of the controller.

onAfterRendering: function() {
  const oTable = this.byId("idTable");
  const oHTMLElement = document.getElementById(oTable.getIdForLabel());
  oHTMLElement.parentNode.style.height = "100%";  
}

Since this is just a workaround, I was wondering where the real problem was lying and if anyone could help me solve it.


Solution

  • If the table has sibling controls, a prerequisite for the visibleRowCountMode="Auto" or sap.ui.table.rowmodes.Auto to work is that the table is allowed to grow within a flexbox element (e.g. sap.m.VBox). This can be achieved by adding <FlexItemData growFactor="1" /> to the layoutData aggregation of the table.

    <VBox xmlns="sap.m" renderType="Bare" fitContainer="true"><!-- or height="100%" -->
      <table:Table xmlns:table="sap.ui.table" visibleRowCountMode="Auto">
      <!-- visibleRowCountMode deprecated since 1.119 -->
      <!-- Add sap.ui.table.rowmodes.Auto to the aggregation rowMode instead. -->
        <table:rowMode><!-- since UI5 1.119 -->
          <rowmodes:Auto xmlns:rowmodes="sap.ui.table.rowmodes" />
        </table:rowMode>
        <table:layoutData><!-- Every control has the aggregation layoutData -->
          <FlexItemData growFactor="1" /><!-- Allow the Table to grow -->
        </table:layoutData>
        <table:columns>
          <!-- ... -->
        </table:columns>
      </table:Table>
      <Button /><!-- Other flex box sibling items ... -->
    </VBox>
    

    From the API reference of sap.ui.table.rowmodes.Auto:
    Similar description in the old visibleRowCountMode="Auto"

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

    Here is a little demo:

    globalThis.onUI5Init = () => sap.ui.require([
      "sap/ui/core/mvc/XMLView",
      "sap/ui/model/odata/v4/ODataModel",
      "sap/ui/model/json/JSONModel",
    ], async (XMLView, ODataModel, JSONModel) => {
      "use strict";
      
      const control = await XMLView.create({
        definition: `<mvc:View xmlns:mvc="sap.ui.core.mvc"
          xmlns="sap.m"
          xmlns:table="sap.ui.table"
          displayBlock="true"
          height="100%"
        >
          <App autoFocus="false">
            <Page showHeader="false">
              <VBox
                fitContainer="true" 
                renderType="Bare"
              >
                <ToggleButton
                  pressed="{viewModel>/grow}"
                  text="{= %{viewModel>/grow} ? '' : 'Enable '}Growing Automatically"
                  type="Neutral"
                />
                <table:Table xmlns:table="sap.ui.table"
                  class="sapUiSizeCondensed"
                  columnHeaderVisible="false"
                  selectionMode="None"
                  visibleRowCountMode="Auto"
                  enableBusyIndicator="true"
                  rows="{/People}"
                >
                  <table:layoutData>
                    <FlexItemData id="myFlexItemData"
                      growFactor="{= %{viewModel>/grow} ? 1 : 0}"
                      backgroundDesign="Solid"
                    />
                  </table:layoutData>
                  <table:rowMode><!-- since UI5 1.119 -->
                    <rowmodes:Auto
                      xmlns:rowmodes="sap.ui.table.rowmodes"
                      minRowCount="3"
                    />
                  </table:rowMode>
                  <table:columns>
                    <table:Column>
                      <Text text="First Name" />
                      <table:template>
                        <Text text="{FirstName}" />
                      </table:template>
                    </table:Column>
                    <table:Column>
                      <Text text="Last Name" />
                      <table:template>
                        <Text text="{LastName}" />
                      </table:template>
                    </table:Column>
                  </table:columns>
                </table:Table>
              </VBox>
            </Page>
          </App>
        </mvc:View>`,
        models: {
          undefined: new ODataModel({
            serviceUrl: "https://services.odata.org/TripPinRESTierService/(S(w2saquxz0v41rmteqmgyytks))/",
            autoExpandSelect: true,
            sharedRequests: true,
          }),
          "viewModel": new JSONModel({ grow: true }),
        },
      });
    
      control.placeAt("content");
    });
    <script id="sap-ui-bootstrap"
      src="https://sdk.openui5.org/nightly/resources/sap-ui-core.js"
      data-sap-ui-libs="sap.ui.core,sap.m,sap.ui.table,sap.ui.layout,sap.ui.unified"
      data-sap-ui-async="true"
      data-sap-ui-on-init="onUI5Init"
      data-sap-ui-compat-version="edge"
      data-sap-ui-exclude-jquery-compat="true"
      data-sap-ui-resource-roots='{ "my.demo": "./" }'
      data-sap-ui-xx-wait-for-theme="init"
    ></script>
    <body id="content" class="sapUiBody sapUiSizeCompact"></body>

    Press Run Code Snippet and then "Full Page" to see the table adjusting its height automatically depending on the viewport height.


    API reference: sap.ui.table.rowmodes.Auto
    Understanding flex-grow, flex-shrink, and flex-basis