How to make Two Header Rows for table in UI5

Question

The image uploaded with this question shows a table having two header rows. My header rows are grouped and are under another header row. How to make it possible in SAPUI5?

Answer 1

You must use the sap.ui.table.Table class and use the multiLabels aggregation from sap.ui.table.Column class by using different sap.m.Label with the same text for the common header between columns.

Sample: Multi Header

<Column
    width="11rem"
    sortProperty="street"
    filterProperty="street"
    headerSpan="3,2">
    <multiLabels>
        <m:Label text="Contact" textAlign="Center" width="100%"/>
        <m:Label text="Address" textAlign="Center" width="100%"/>
        <m:Label text="Street" textAlign="Center" width="100%"/>
    </multiLabels>
    <template>
        <m:Text text="{street}" wrapping="false"/>
    </template>
</Column>
<Column
    width="11rem"
    sortProperty="city"
    headerSpan="2">
    <multiLabels>
        <m:Label text="Contact"/>
        <m:Label text="Address"/>
        <m:Label text="City" textAlign="Center" width="100%"/>
    </multiLabels>
    <template>
        <m:Input value="{city}"/>
    </template>
</Column>
<Column
    width="11rem"
    sortProperty="phone">
    <multiLabels>
        <m:Label text="Contact"/>
        <m:Label text="Phone" textAlign="Center" width="100%"/>
    </multiLabels>
    <template>
        <m:Input value="{phone}"/>
    </template>
</Column>