CODEWITHSUNDEEP
angulartypescriptnpm
Vithushan
Vithushan

Reputation: 513

Make a table vertical scroll-able to add ngx-infinite-scroll in angular 4

Im trying to make a table scrollable to use ngx-infinite-scroll. But could not find a solution. Can anyone help me or have any documentation to make a table scrollable in angular 4. I would like to make only the table body to be scrollable.

Tried this to css. But didnt work.

.tbody {
  height: 100px;
  overflow-y:scroll;
}

Upvotes: 0

Views: 6051

Answers (1)

Parker Hewitt
Parker Hewitt

Reputation: 31

I finally got this to work myself! This includes a boxshadow and a fixed header on the table. Hope it helps someone.

CSS:

.shadow {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.jumbotron {
  padding: 2rem 1rem;
}

tbody {
  display: block;
  height: 20rem;
  overflow: scroll;
}
thead,
tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

HTML: 

<div class="shadow">
  <table class="table table-hover">
    <thead class="thead-info">
      <tr>
        <th>Title</th>
        <th>Artist</th>
        <th>Key</th>
      </tr>
    </thead>
    <tbody infiniteScroll [infiniteScrollDistance]=".1" [infiniteScrollThrottle]="50" (scrolled)="onScroll()" [scrollWindow]="false">
      <div *ngIf="!tuneService.tunes" class="text-center justify-content-center">
        <h2>Loading...</h2>
      </div>
      <tr *ngFor="let tune of page.data | async" routerLink="/tune-details/{{tune.id}}">
        <td>{{tune.title}}</td>
        <td>{{tune.artist}}</td>
        <td>{{tune.musicalKey}}</td>
      </tr>
      <app-spinner *ngIf="page.loading | async"></app-spinner>
    </tbody>
  </table>

</div>

Upvotes: 3

Related Questions