Search code examples
sapui5

How to group Table Header - SAPUI5 xml

I need to have multiple header in a table using SAPUI5 XML.

This is what I have tried. JsBin

<table:Table title="Real-time order status" noDataText="No data to display" id="tableDisp" enableBusyIndicator="true" showNoData="true" width="auto" class="sapUiResponsiveMargin">
                                    <table:Column id="col6" hAlign="Center" headerSpan="[2,1]">
                    <table:multiLabels>
                        <Label text="2 - Batch records handed over to QA"    class="tableHeaderWrap"/>
                        <Label text="Target" textAlign="Center"  />
                    </table:multiLabels>
                    <table:template>
                        <Label text="{Target}"/>
                    </table:template>
                </table:Column>
                <table:Column id="col10" hAlign="Center">
                    <table:multiLabels>
                        <Label text="2 - Batch records handed over to QA"    class="tableHeaderWrap"/>
                        <Label text="Actual" textAlign="Center"/>
                    </table:multiLabels>
                    <table:template>
                        <Label text="{Actual}"/>
                    </table:template>
                </table:Column>

What I need is : - enter image description here

Solution

  • What ever you have tried is fine. But while adding the header span instead of the array just give 2 as below you can see this thread.

    This answer is for the data present in the jsbin.

    <Page title="{i18n>title}">
    <content>
        <table:Table title="Real-time order status" noDataText="No data to display" id="tableDisp" enableBusyIndicator="true" showNoData="true" width="auto" class="sapUiResponsiveMargin">
            <table:Column id="col6" headerSpan="2" colspan="2">
                <table:multiLabels >
                    <Label text="Batch records" textAlign="Center" width="100%"/>
                    <Label text="Target" textAlign="Center" width="100%"/>
                </table:multiLabels>
                <table:template>
                    <Text text="Target"/>
                </table:template>
            </table:Column>
            <table:Column id="col10">
                <table:multiLabels>
                    <Label text="Batch records" textAlign="Center"/>
                    <Label text="Actual" textAlign="Center" width="100%"/>
                </table:multiLabels>
                <table:template>
                    <Text text="Actual"/>
                </table:template>
             </table:Column>
         </table:Table>
     </content>
</Page>

    Or you have to get the column by id in the controller and then you have to set the headerspan.

    For your above code add the width, "textAlign" and change the headerSpan property as below

    <table:Table title="Real-time order status" noDataText="No data to display" id="tableDisp" enableBusyIndicator="true" showNoData="true" width="auto" class="sapUiResponsiveMargin">
  <table:Column id="col6" hAlign="Center" headerSpan="2">
    <table:multiLabels>
        <Label text="2 - Batch records handed over to QA" textAlign="Center" width="100%" class="tableHeaderWrap"/>
        <Label text="Target" textAlign="Center" width="100%" />
    </table:multiLabels>
    <table:template>
        <Label text="{Target}"/>
    </table:template>
  </table:Column>
  <table:Column id="col10" hAlign="Center">
    <table:multiLabels>
        <Label text="2 - Batch records handed over to QA" textAlign="Center" width="100%" class="tableHeaderWrap"/>
        <Label text="Actual" textAlign="Center" width="100%"/>
    </table:multiLabels>
    <table:template>
        <Label text="{Actual}"/>    
    </table:template>
  </table:Column>
</table:Table>