Hide empty table head

[former_member450060]

Hey everyone,

I want to use a table where only the table body is scrolling and the head stays at the same position. I used the scroll container workaround, where I place to tables above each other, but use empty columns for the lower one. My sourcecode looks like this:

<Table showNoData="false" class="sapUiSizeCompact">
    <columns>
        <Column>
            <Text text="{i18n>test1}"/>
        </Column>
        <Column>
            <Text text="{i18n>test2}"/>
        </Column>
        <Column>
            <Text text="{i18n>test3}"/>
        </Column>       
    </columns>
</Table>
<ScrollContainer class="test" vertical="true"
                 horizontal="false">
    <Table items="{ path: 'testModel>/' }" inset="false"
           growing="true"
           growingScrollToLoad="true" class="sapUiSizeCompact"
           noDataText="{i18n>TableNoData}"
           itemPress="testFunction">
        <columns>
            <Column/>
            <Column/>
            <Column/>
        </columns>
        <items>
            <ColumnListItem type="Active">
                <cells>
                    <Text text="{testModel>test1}"/>
                    <Text text="{testModel>test2}"/>
                    <Text text="{testModel>test3}"/>
                </cells>
            </ColumnListItem>
        </items>
    </Table>
</ScrollContainer>

Alright, so far so good. Technically that works fine, but my problem now is, that the empty columns are still displayed, they just don't have text in it. I used to do this with SAPUI5 and it works, now I'm using OPENUI5 and for some reason the result looks like this

You can clearly see what the problem is.

I already tried to just hide the empty columns (display: none) but that just breaks the table. Anyone has an idea how to fix that?

Thanks in advance!

[former_member227918]

you might hiding the 'th' element, you can give a try as below,

give id to table inside scrollbar container i.e. idTable, and css is-

table[id*='idTable1'] thead {
    display: none;
}

if no luck, paste your css code here we can check.

[Sharathmg]

Check this sample in explored link. Dosen't it fulfill your requirement to freeze the header?

https://sapui5.hana.ondemand.com/explored.html#/sample/sap.ui.table.sample.TableFreeze/preview

[former_member450060]

Technically yes, my only problem is that the empty header

<columns>
      <Column/>
      <Column/>
      <Column/>
</columns>

is still displayed and not completely gone (like in the screenshot I posted).

It works fine, like in the example you posted, it just doesn't look right.

[Sharathmg]

In terms of design, it is not recommended to use two tables one above the other, for the purpose of visual appeal.

As per the Fiori guidelines, it is better for you to keep one table, and use CSS or other options to achieve the best possible solution.

Your main purpose is to provide the functionality which is consistent across device types and simpler to implement.

Regards,

Sharath