How to make a grid with fixed header inside an ion-scroll

Ionic Framework ionic-v3
1

I’m forced to have a table that needs to be scrolling horizontally (about 12 columns that does not fit in view width), I used ion-scroll to achieve that goal, but now I’m facing another dilemma: I want to have a header for that table that scrolls horizontally with columns but stays at the top (I don’t want the header to scroll vertically with rows).

I have searched a lot but could not find any solution. Please help!!

1 Like
2

Can anybody help me with this please!

3

I think you should share your table markup and code, that’ll make it easier for others to understand your problem.

4

Here is the code I use

<ion-content text-center style="background-color:#ddd">
  <!------------------- HEADER ----------------------->
  <ion-scroll scrollX="true" scrollY="true" zoom="false" no-padding>
    <ion-item color="gray" >
      <ion-row text-center nowrap>
        <ion-col col-8 style="font-size:11pt">Date</ion-col>
        <ion-col col-10 >Credit</ion-col>
        <ion-col col-10 >Debit</ion-col>
        <ion-col col-10 >Running Balance</ion-col>
        <ion-col col-4 >Currency</ion-col>
        <ion-col col-16 style="font-size:10pt">Type</ion-col>
        <ion-col col-6 >Account No.</ion-col>
        <ion-col col-5 >Branch</ion-col>
        <ion-col col-50 text-wrap>Remarks</ion-col>
        <ion-col col-10 >Ref.</ion-col>
        <ion-col col-6 >Code</ion-col>
      </ion-row>
    </ion-item>
    <!------------------- table ----------------------->
    <ion-item color="primary" style="width:400vw" *ngFor="let item of data">
      <ion-row text-center nowrap >
        <ion-col col-8 style="font-size:11pt">{{item.Dat}}</ion-col>
        <ion-col col-10>-{{item.Credit}}</ion-col>
        <ion-col col-10 >{{item.Debit}}</ion-col>
        <ion-col col-10 >{{item.RunningBalance}}</ion-col>
        <ion-col col-4 >{{item.Curr}}</ion-col>
        <ion-col col-16 style="font-size:10pt">{{item.TransType}}</ion-col>
        <ion-col col-6 >{{item.Account}}</ion-col>
        <ion-col col-5 >{{item.Branch}}</ion-col>
        <ion-col col-50 text-wrap>{{item.Remarks}}</ion-col>
        <ion-col col-10 >{{item.Ref}}</ion-col>
        <ion-col col-6 >{{item.Code}}</ion-col>
      </ion-row>
    </ion-item>
  </ion-scroll>

</ion-content>
1 Like
5

Thanks for sharing your code. Looking at the <ion-scoll> docs, I don’t think it has anything inbuilt to achieve what you need. Perhaps you can try doing it with some css and scripting tricks. Unfortunately, I’ve not yet worked with the scroll component much so I hope someone else would pitch in and help you out.

6

Please try below css to your header. I’m able to get the expected result as header always on the top even scroll down.

position: sticky;
top: 0;
left: 0;
right: 0;
z-index: 9999;

14 Likes
7

Oh My god, thanks @jeffreytck!

8

Thanks Man (y) :ok_hand::ok_hand:

1 Like
9

Perfecte!

Thank you :smiley:

10

I would simply wrap my header around:

<IonItemDivider sticky></IonItemDivider>