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.