How to make a scrollable table with fixed header using angular and ionic

Question

I am trying to create an scrollable table horizontal and vertical scroll bars with fixed headers using ionic grid.

i am able to achieve the scroll part but not able to make the headers fixed.

HTML:

    <ion-content class="{{selectedTheme}} inventory-content">
      <div class="{{selectedTheme}} reports-table">
        <ion-grid>
          <ion-row nowrap class="headers">
            <ion-col size="5" class="single-border">
              Name
            </ion-col>
            <ion-col size="2" class="single-border">
              Model
            </ion-col>
            <ion-col size="3" class="single-border">
              Make
            </ion-col>
            <ion-col size="3" class="single-border">
              Year
            </ion-col>
          </ion-row>

          <ion-row nowrap class="content" *ngFor="let inventory of sortedInventoryList">
            <ion-col size="5"> {{ inventory.Name }} </ion-col>
            <ion-col size="2"> {{ inventory.Model }} </ion-col>
            <ion-col size="3"> {{ inventory.Make }} </ion-col>
            <ion-col size="3"> {{ inventory.Year }} </ion-col>
          </ion-row>
        </ion-grid>
      </div>
    </ion-content>

CSS:

    .reports-table {
      overflow-x: auto;
    }

    .inventory-content {
      background-color: #f0f1f2;
    }

    .headers {
      color: #454f63;
      font-family: "Open Sans";
      font-weight: bold;
      font-size: 14px;
      margin-top: 10px;
      word-wrap: break-word;
    }

    .border,
    .single-border {
      border-bottom: 2px solid #989898;

    }

    .single-border {
      padding-top: 12px;

    }

    .content {
      color: #454f63;
      font-family: "Open Sans";
      font-size: 10px;
    }

Thanks @H3llrais3R :)... but the requirement is we need to achieve it using ion-grid only. — Nandha Kumar
– Nandha Kumar, Commented Nov 20, 2019 at 7:25

Lajith · Accepted Answer · 2020-12-07 07:13:48Z

2

It is late.. but it is use for some one else.. below code works fine for me Change ur herader css to

 .headers {
          color: #454f63;
          font-family: "Open Sans";
          font-weight: bold;
          font-size: 14px;
          margin-top: 10px;
          word-wrap: break-word;
          background-color: #f0f1f2;;
    
        // Fixed Header
          position: sticky;
          top: 0;
          left: 0;
          right: 0;
          z-index: 9999;
        }

answered Dec 7, 2020 at 7:13

Lajith

1,9183 gold badges26 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nick Pichetto · Accepted Answer · 2022-12-03 19:29:28Z

0

Adding to Ajt's answer, I also had to remove the .reports-table css. Otherwise, the header row scrolled with the rest of the grid.

answered Dec 3, 2022 at 19:29

Nick Pichetto

1

1 Comment

Nick Pichetto Over a year ago

I recognize also that it's been nearly 2 years since Ajt's answer, so it may have worked when they posted. A lot could have changed since then, and I'm relatively new to Ionic.

Collectives™ on Stack Overflow

How to make a scrollable table with fixed header using angular and ionic

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related