sap.m.Table: Fixed header with scrollable content

[saivellanki]

Dear UI5 experts,

Can anyone suggest how to have a fixed thead (header) with scrollable table cells (content) on sap.m.table control ?

I tried using CSS property -  position: fixed for .thead class, but it is getting cluttered also header and cells are being mismatched.

Thank you for your help in advance!

Regards,

Sai.

[faragelfadaly · Accepted solution]

Dear Sai,

I solved it by work around:

1.   draw table with only header
2. scroll container containing table with hidden header and the same columns of the first table.

This is code sample:

<Table showNoData="false">

   <columns>

       <Column minScreenWidth="" demandPopin="false">

           <Text text="{i18n>ContractID}" />

       </Column>

       <Column minScreenWidth="Tablet" demandPopin="true">

           <Text text="{i18n>ContractType}" />

       </Column>

       <Column minScreenWidth="Tablet" demandPopin="true">

           <Text text="{i18n>CompanyCode}" />

       </Column>

   </columns>

</Table>

<ScrollContainer
   horizontal="true"
   vertical="true"
   focusable="true"
   >

   <Table
        select="handleSelectionChange"
        itemPress="handleItemPress"
        growing="true"
        growingThreshold="100"
        growingScrollToLoad="true">

   <columns>

       <Column minScreenWidth="" demandPopin="false">

       </Column>

       <Column minScreenWidth="Tablet" demandPopin="true">

       </Column>

       <Column minScreenWidth="Tablet" demandPopin="true">
       </Column>

   </columns>

   </Table>

</ScrollContainer>

Thanks

[saivellanki · Accepted solution]

Nice Hack Farag!

But, only thing is when you do some column re-ordering this might create a problem. Since, column names and items are not associated each other. However, for people who need for only display and doing some logic on items this should work.

Working sample of your logic - Plunker - MobileTblHdrFixed

Regards,

Sai Vellanki.

[Former Member · Accepted solution]

Hai Sai,

Can you please bit elaborate this in js view? Bcoz it's bit difficult to understand in xml view

Thanks,

Pal

[saivellanki · Accepted solution]

Hi Pal,

Here you go - TblFixedHdr-JavaScript

Regards,

Sai Vellanki.

[Former Member · Accepted solution]

I got it...Thank you sai

[Former Member · Accepted solution]

But I guess when we have to use fixed layout table and the table has a lot of column this solution won't work. Cause I tried it now and I can scroll second table and see other columns but the header of first table seems fixed. I can't see other the header of other columns.

[former_member182862]

HI Sai

IMO, this is a feature that is not easy to implement. I am looking forwards to SAPUI5 to provide this.

-D

[saivellanki]

Hi Dennis,

Thanks for the reply.

Yeah, actually this is not in the requirement provided by patron. But, I was thinking this issue will arise if there are many fields like 10 and many records in the table. Once the user scrolls down, then it will be bit difficult for user to find out which field accumulates which value. That's the only intention I had in my mind.

Any ways, let's see if UI5 team can provide a method in upcoming API. Also, I will try working on the same using JQuery, CSS etc., whatever it takes/requires to get desired output. 🙂

Regards,

Sai.

[Qualiture]

As I can see the need for desktops (and in the sap.ui.commons.Table it works just like you envisioned), in a mobile environment you certainly don't want this behavior of having table contents scroll inside a page (which can also scroll)

Although I do see your need, since the sap.m.Table is much nicer looking on desktops as well

In the meantime, if you're developing a desktop application, you may want to use the sap.ui.commons.Table instead for this specific use case.

[saivellanki]

Hi Robin,

Thanks for the reply.

No, We're developing a mobile application which will be used on 10.1 inch screen tablet. So, I believe we cannot use a desktop control for the same.

So, Is there a way to render the same desktop control behavior using mobile control?

Regards,

Sai.

[Qualiture]

You could use the desktop table in your application and use it on a tablet, but you should keep in mind a few things won't work on a tablet (for instance, multiselect of tablerows won't work since the tablet doesn;t have a Ctrl key, etc)

[saivellanki]

Robin,

Yes, I completely agree that sap.ui.table.Table perfectly works for this scenario. But, however I will stick with sap.m.table itself since it has got it's own style

I will try to check, whether this thing can be fixed using jQuery and CSS.

Thank you for your time!

Regards,

Sai

[janforabap]

Hi Sai,

did you solve the problem with sap.m.table,? I don't like to change to "Desktop" Table or lists as well.

Thanks.

Best regards

Jan

[saivellanki]

Hi Jan,

I was not able to achieve this functionality and it is not customizable too.

I tried with CSS, but table header is getting somewhat cluttered.

Regards,

Sai Vellanki.