Skip to Content

Hide empty table head

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)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • Aug 31, 2017 at 12:41 PM

    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

    Add comment
    10|10000 characters needed characters exceeded

    • 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

  • Sep 02, 2017 at 07:35 PM

    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.

    Add comment
    10|10000 characters needed characters exceeded