Skip to Content
0

Hide empty table head

Aug 31, 2017 at 07:18 AM

131

avatar image

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!

tableerror.png (1.6 kB)
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

2 Answers

Sharath M G Aug 31, 2017 at 12:41 PM
0

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

Show 2 Share
10 |10000 characters needed characters left characters exceeded

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.

0

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

0
Akhilesh Upadhyay Sep 02, 2017 at 07:35 PM
0

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.

Share
10 |10000 characters needed characters left characters exceeded